Acadevmy - GraphQL & Angular: Tutto il REST è noia!

GraphQL & Angular
Tutto il REST è noia!
https://www.acadevmy.it/intro
https://www.francescosciuti.it

Chi sono?
Developer per scelta e per passione,
amante di nerdaggini di ogni tipo
ed amante della condivisione del sapere!
Da non troppo anche (quasi)
imprenditore!

Software Factory

Learning Factory

Le tecnologie che prediligiamo

Francesco Sciuti @ GDG DevFest Levante 2019

+
ma basta presentazioni e parliamo di...
GraphQL &
Angular

L’evoluzione delle API
GraphQL &
Angular

● Cos’è e come funziona
● Le differenze con REST
● Apollo Platform
● Angular ed Apollo Client
● Esempi Pratici
● Links Utili e tanto altro!
GraphQL
GraphQL &
Angular

Cosa è GraphQL?
GraphQL è un API query language ed un runtime server side per
l'esecuzione delle interrogazioni utilizzando
un sistema di tipi deﬁnito per i dati.
GraphQL non è associato a nessun database
o motore di archiviazione speciﬁco.
GraphQL &
Angular

Lo scenario
Le API sono diventate ormai onnipresenti nelle infrastrutture
software, e sono (sempliﬁcando) la deﬁnizione di come un client può
richiedere dati da un server.
GraphQL &
Angular

Lo scenario & GraphQL
GraphQL consente il recupero dei dati, dichiarando client side
esattamente quali dati sono necessari dall’API.
Un server GraphQL espone solo un singolo endpoint e risponde con
precisione ai dati richiesti dal client.
GraphQL &
Angular

● Evita l’over-fetching
Evita di recuperare più dati del necessario perché puoi speciﬁcare i campi esatti di cui hai bisogno.
● Evita l’under-fetching
Se hai bisogno di più dati, puoi anche evitare di effettuare più chiamate alla tua API.
● Maggiore separazione di competenze
A volte per recuperare i dati esatti di cui hai bisogno, soprattutto se vuoi evitare più chiamate API, dovrai chiedere ai tuoi sviluppatori
API di creare nuovi endpoints. Con GraphQL, il tuo lavoro è indipendente dal team API!
● Schema Deﬁnition Language ed Auto Documentazione
Ogni API GraphQL è conforme a uno "schema" autodocumentato che è il modello di dati del grafo e del tipo di query che può fare
un client.
Quali caratteristiche ha?
GraphQL &
Angular

Ecco un esempio...
GraphQL &
Angular

Pensare ai dati restituiti dall'API come a un grafo consentirà di effettuare query
per recuperare frammenti di dati correlati in un’unica azione.
Pensare in GraphQL
GraphQL &
Angular

Rispondiamo subito ad una domanda...
GraphQL &
Angular

È un’alternativa a REST?
GraphQL si pone sia come un’ottima alternativa che come un collante per
costruire le tue API, portando con sé numerosi vantaggi che lo rendono un’ottima
scelta!
● Cross Language
GraphQL è uno standard (in continua evoluzione), quindi può essere implementato in ogni linguaggio (così come in realtà già lo è).
● Type system
GraphQL offre una tipizzazione dei dati, grazie alla deﬁnizione dei tipi stessi nello Schema.
● Query Language
GraphQL nasce come query language e quindi offre un semplice dialetto per richiedere al server esattamente i dati che ti servono...un po’
come faresti in una query SQL (anche per questo c’è in effetti un po’ di confusione).
● Singolo endpoint
GraphQL espone un singolo endpoint al quale effettuate le richieste, che siano di richiesta dati, di modiﬁca, etc...
GraphQL &
Angular

Le analogie con REST
Requirement REST GraphQL
Recupero dei dati GET query
Scrittura dei dati POST mutation
Aggiornamento/cancellazione dei
dati
PUT/PATCH/DELETE mutation
Watching/subscribing dei dati - subscription
GraphQL &
Angular

GraphQL vs REST
GraphQL &
Angular

GraphQL è stato rilasciato solo come una speciﬁca.
Ciò signiﬁca che GraphQL non è in realtà altro che un lungo documento che
descrive in dettaglio il comportamento di un server GraphQL.
Esistono numerose architetture server GraphQL che possono essere
implementate, anche se le più comuni sono 3.
Architetture
GraphQL &
Angular

GraphQL Server collegato direttamente ad un database
Architetture
GraphQL &
Angular

Architetture
GraphQL Server che funge da
layer o gateway che integra
(e nasconde) sistemi eterogenei
pre-esistenti.
GraphQL &
Angular

GraphQL Server con approccio
Ibrido e quindi:
● collegato direttamente ad un
database
● funge da layer o gateway che
integra (e nasconde) sistemi
eterogenei pre-esistenti.
Architetture
GraphQL &
Angular

Tutto molto bello ma...
GraphQL &
Angular

...come fa a fare tutto ciò?
GraphQL &
Angular

● Schema
● Document
● Server / Client
● Funzioni Resolver
● ...
Gli elementi chiave
GraphQL &
Angular

Schema
È il fulcro di ogni implementazione
server di GraphQL e descrive tutte le
funzionalità richiedibili dai clients
connessi.
In poche parole deﬁnisce quali siano le
API esposte dal server.
Per scrivere lo schema è utilizzato lo
Schema Deﬁnition Language.
GraphQL &
Angular

Tutte le specifiche dell’API sono definite ed esposte usando il
GraphQL Schema Definition Language (SDL).
L’SDL consente di definire le funzionalità di un API con
un approccio fortemente tipizzato.
Lo schema serve quindi come contratto tra client e server per definire
come un client può accedere ai dati e che di che tipo di dato si tratta.
Schema Definition Language (SDL)
GraphQL &
Angular

SDL Type System
GraphQL ha un sistema di tipi statico.
Questo rappresenta un grosso vantaggio rispetto a REST.
● Initial types
○ Schema type
○ Root types
Query, Mutation, Subscription
● Primitive values
○ Scalars
ID, String, Int, Float, Boolean
○ Enums
● Object types
Tipi componibili e che rappresentano entità
complesse (es.: User, Post)
○ Input object type
○ Output object type
● Abstract types
○ Interface
○ Union
● Modiﬁers
Non-null, List, Directive
GraphQL &
Angular

Schema - Root Types
Per inizializzare lo schema dobbiamo deﬁnire i root types.
Questi types rappresentano fondamentalmente ogni tipo di
operazione eseguibile e sono inizializzati nello Schema.
● Query
Azioni di lettura
● Mutation
Azioni che mutano i dati
● Subscription
Funzionalità Realtime
GraphQL &
Angular

● Interface
Un’interfaccia può essere usata per descrivere un tipo in un modo astratto. Questo permette di specificare un
set di campi che ogni tipo che implementa questa interfaccia, deve necessariamente avere.
● Union
I tipi Union possono essere usati per esprimere che un tipo è in realtà una collection di altri tipi.
● Enum
Le Enum types (short enums) sono utili per esprimere un tipo con un insieme fisso di valori.
● Modificatori
Grazie ai modificatori è possibile indicare:
- Fields obbligatori per mezzo del carattere !
- Fields che corrispondono ad elenchi di valori/objects per mezzo dei caratteri []
SDL Type System
GraphQL &
Angular

Query
Le Query sono usate dal client per richiedere i dati necessari al
server.
A differenza di REST, grazie al document la richiesta dei dati è
esattamente quella necessaria al client!
Uno dei maggiori vantaggi di GraphQL, ad esempio, è quello di recuperare
informazioni nidiﬁcate in modo naturale e semplice.
GraphQL &
Angular

Mutation
La maggior parte delle applicazioni necessita di un modo per
cambiare i dati memorizzati nel server.
In GraphQL, questi cambiamenti sono effettuati tramite le cosiddette
Mutations.
Le Mutations seguono la medesima sintassi delle Queries, ma iniziano con la keyword mutation. Inoltre hanno anche dei valori di ritorno!
Utilizzate per fare CUD:
● Create new data
● Update existing data
● Delete existing data
GraphQL &
Angular

Subscription
La speciﬁca GraphQL contempla le cosiddette subscriptions che
sono una sorta di queries che restituiscono i dati man mano che
questi diventano disponibili.
Sono quindi la modalità per la comunicazione RT col server!
Diversamente da queries e mutations che seguono il tipico ciclo "richiesta-risposta",
le subscriptions rappresentano un ﬂusso di dati mandato verso il client.
GraphQL &
Angular

● Using input object type for mutations
It is extremely important to use just one variable for your mutations and use the
input object type to simplify the structure of your GraphQL documents
We can see that we only have one argument input - this is typed as an input
object type. We are applying a non-null modiﬁer to ensure that the input
payload cannot be null.
● Returning affected objects as a result of mutations
When working with mutations it is considered good design to return mutated
records as a result of the mutation
● Using paginated lists by default
Paginated results are really important for security reasons and for ability to limit
amount of records we would like to retrieve from the server
● Nesting your objects in queries
Best Practices for Schema
Design
GraphQL &
Angular

GraphQL &
Angular
Diamo uno sguardo allo Schema!

● Operation
● Selection Set
● Fields
● Arguments
● Variables
● Aliases
● Fragments
● Directives
● Introspection Queries
Document
Una stringa scritta in GraphQL language che deﬁnisce una o più
operazioni (o fragments).
GraphQL &
Angular

Document
GraphQL &
Angular

Diamo uno sguardo allo Schema!
GraphQL &
Angular

Un resolver è una funzione
che sarà eseguita per ogni
campo del document
GraphQL.
Ogni ﬁeld è quindi supportato da un resolver che viene
eseguito per produrre il valore del ﬁeld, creando così
una catena di resolvers che produce quindi l’intera
risposta al document.
Resolvers
GraphQL &
Angular

● Parsing
Il server parsa la stringa e converte il tutto in un AST (abstract syntax tree). Se la sintassi presenta degli errori,
l’esecuzione viene interrotta e viene ritornato un errore al client.
● Validation
La validazione è il processo di verifica nel quale il document viene validato con lo schema, prima di passare
all’esecuzione. Il server esegue questa parte automaticamente, così che il client sarà sicuro che tutto sia
formalmente corretto.
● Execution
Se la validazione viene passata il server GraphQL esegue la query o la mutation.
L’esecuzione inizia dalla radice dell’albero e vengono chiamati le resolve functions per ogni fields del livello
superiore (passando eventuali parametri). Una volta risolte tutte le funzioni viene ritornato il valore e si procede
con l’esecuzione delle parti inferiori dell’albero.
Firma di un resolver: fieldName(parent, args, context, info) { result }
N.B. Il result può essere: null, un Array, una Promise, uno Scalare o un Object Value.
Query/Mutation execution — step by step
GraphQL &
Angular

● Nuove logiche da digerire
● Performance nel caso di query
complesse
● Overkill piccole applicazioni
● Web caching complexity
● File Uploading
● Verbosità
C’è qualcosa che non va?
GraphQL &
Angular

Apollo è la piattaforma per costruire applicazioni basate su GraphQL, creando un
layer di comunicazione tra i clients (Angular, React, Mobile, etc…)
ed i backend services..
GraphQL &
Angular

L’ecosistema
● Apollo Client
Libreria open-source per la gestione della comunicazione
e dello stato per le client applications.
● Apollo Server
Open-source framework per implementare un server
GraphQL.
● Apollo Engine
Servizio Cloud utile per schema management, monitoring,
validazione, etc...
● Developer Tools
CLI, Extensions for Chrome e VS Code
Apollo Platform
GraphQL &
Angular

Apollo Server
“Apollo Server is the best way to quickly build a
production-ready, self-documenting API for
GraphQL clients, using data from any source”
Apollo Server è il framework JavaScript per GraphQL server, utile per deﬁnire lo
schema ed i resolvers per implementare tutte le root types.
È estendibile con plugins, i quali sono ancorabili ad ogni fase
della pipeline request o al server lifecycle.
GraphQL &
Angular

Analizziamo rapidamente un’applicazione server!
GraphQL &
Angular

Apollo Client
“Apollo Client is a complete state management library
forJavaScript apps. Simply write a GraphQL query, and
Apollo Client will take care of requesting and caching
your data, as well as updating your UI”
Consente uno stile di programmazione dichiarativa che consente agli
sviluppatori di deﬁnire le query come parte dei componenti dell'interfaccia
utente.
Supporta anche un approccio elegante alla gestione dello stato, caching,
gestione delle request, etc…
Include integrazioni per React, React Native,
Vue, Angular, etc....
GraphQL &
Angular

Francesco Sciuti @ FullStackConf 2019
Apollo Client in breve
In generale
● Adozione Incrementale
● Universale
● Semplice
● Ottimi Tools
Code Generation, Apollo CLI, ...
● Piccolo e ﬂessibile
● Community Driven
● Upload Ready
In pratica
● Schematics
ng add apollo-angular
● Apollo Module/Service
apollo-angular-link-http e HttpLink
● In Memory Cache
InMemoryCache
● Apollo Links
apollo-link-http, apollo-link-state,
apollo-link-rest, ...
● Apollo Queries
watchQuery, query
● Apollo Mutations
mutate
● Apollo Subscriptions
● Optimistic UI
optimisticResponse param
● Local State Management
readQuery, readFragment,
writeQuery, writeFragment,
writeData, @client, update,
refetchQueries, fetchMore, ...
● APQ Advanced Persisted Query
● Query Batching

Apollo Client
● Adozione Incrementale
Puoi integrarlo in un'app JavaScript esistente ed iniziare ad utilizzare GraphQL solo una parte
dell'interfaccia di applicazione.
● Universale
Apollo funziona con qualsiasi builder, qualsiasi server GraphQL e qualsiasi schema GraphQL!
● Semplice
Inizia a lavorare da subito con i dati, per poi conoscere le funzionalità avanzate in un secondo
momento.
● Ottimi Tools
Hai a disposizione strumenti di sviluppo per capire esattamente cosa sta succedendo nella tua app.
● Piccolo e ﬂessibile
Il core è sotto i 12kb compressi.
● Community Driven
Apollo è open source ed è sviluppato dalla community.
GraphQL &
Angular

Angular + Apollo
GraphQL &
Angular

Apollo Client - Angular
● Angular Schematics
Apollo Angular supporta ng-add and ng-update.
● NativeScript e Ionic
Puoi lavorare out of the box in NativeScript e lavora benissimo con Ionic.
● Angular Router
Apollo Client è completamente router-independent.
● SSR
Ottimo supporto al Server Side Rendering.
● Altamente Customizzabile
The 2.0 version of ApolloClient provides a more customizable experience with GraphQL. It prioritizes
features like custom execution chains (using Apollo Link) and custom stores while providing powerful
defaults. It is an overall minor change to the API so you shouldn't have to change very much code in your
current app at all!
GraphQL &
Angular

Come installare Apollo Client
● ng add apollo-angular
oppure
● npm install ...
○ apollo-client: Libreria Apollo Client
○ apollo-angular: Bridge tra Angular ed Apollo Client
○ apollo-cache-inmemory: Apollo Cache
○ apollo-angular-link-http: Apollo Link per il remote data fetching
○ graphql: Implementazione JavaScript per GraphQL
○ graphql-tag: Parser di stringhe in GraphQL documents
GraphQL &
Angular

Istanziare Apollo Client
Apollo è l’Angular service esportato
da apollo-angular per gestire
GraphQL data nella tua UI.
● apollo-angular-link-http e HttpLink
Connettono via http ad un GraphQL server
● InMemoryCache
Gestore della cache e dello state manager
● APOLLO_OPTIONS
Token per le opzioni di Apollo Client
N.B. Apollo HttpLink richiede HttpClient
GraphQL &
Angular

Apollo Link
● Apollo Client consente una conﬁgurazione custom per l’invio delle queries via
HTTP per mezzo di un pluggable network interface layer (Apollo Link).
È possibile anche effettuare operazioni particolari come splittare le chiamate via websocket
transport, utilizzare mocked server data e tantissimo altro.
● Il Link più comune è apollo-angular-link-http che usa HTTP per inviare le
queries.
Apollo Link è la libreria che consente la gestione del network layer.
GraphQL &
Angular

● apollo-link-http
● apollo-link-state
● apollo-link-rest
● apollo-link-error
● apollo-link-context
● apollo-link-retry
● apollo-link-ws
● apollo-link-batch-http
● apollo-link-dedup
● apollo-link-schema
Apollo Link
GraphQL &
Angular

Apollo Queries
Utilizzare le queries è semplicissimo...basta un metodo
del servizio Apollo e la libreria graphql-tag
watchQuery
Restituisce un oggetto QueryRef che ha la
proprietà valueChanges che è un osservabile.
Sarà sufficiente parsare la query usando la Tag
Function gql, e passarla come opzione al metodo
con chiave query.
È presente anche il metodo Query per una risposta one-shot.
GraphQL &
Angular

Apollo Mutation
Le Mutations sono identiche alle queries come sintassi ma varia il
metodo da utilizzare!
mutate
GraphQL mutations sono composte da due parti:
● la mutation name che rappresenta
l’operazione da far compiere al server;
● i ﬁelds di ritorno, e cioè la query che verrà
tornata come risposta alla mutation
(comunemente utilizzata per l’update del
client).
GraphQL &
Angular

Optmistic UI
A volte il codice client può
facilmente prevedere il risultato
della mutazione, ancor prima che il
server risponda con il risultato
optimisticResponse
Viene utilizzato per aggiornare immediatamente le
query attive, allo stesso modo della risposta di
mutation del server.
Una volta che l'effettiva risposta della mutation
ritorna, la risposta ottimistica verrà eliminata e
sostituita con il risultato reale.
GraphQL &
Angular

Apollo Cache - Optimistic UI
● optimistic UI is a pattern
that you can use to simulate
the results of a mutation
and update the UI even
before receiving a response
from the server
Optimistic UI provides an
easy way to make your UI
respond much faster, while
ensuring that the data
becomes consistent with the
GraphQL &
Angular

Query, Mutation, Subscription services
L’unica cosa da fareThe only thing you need to do is to set the
document property
The best part about the new API is that
you don't have to create those services,
there's a tool that does it for you
GraphQL &
Angular

Apollo Client Cache
È possibile pensare alla Apollo Cache come l'unica fonte di verità
per tutti i dati nella nostra applicazione client.
apollo-cache-inmemory è
l’implementazione di default
di Apollo Client 2.x e InMemoryCache è
uno normalized data store privo di ogni
dipendenza da Redux e per interagire con
esso sono sufficienti pochi metodi.
readQuery, readFragment, writeQuery, writeFragment
GraphQL &
Angular

Apollo Client memorizza in cache il query result trees.
Per farlo utilizza due assunzioni:
○ “Same path, same object”
Lo stesso query path di solito porta allo stesso dato.
○ “Object identiﬁers when the path is not enough”
Se due risultati hanno lo stesso identiﬁcatore saranno lo stesso dato.
Apollo Client aggiornerà automaticamente le query con un nuovo
risultato se viene aggiornato il nodo della cache coinvolto nei risultati
di una query.
Apollo Client Cache
GraphQL &
Angular

Apollo Client Cache
Metodi di Lettura/Scrittura
● readQuery
Il metodo è molto simile al funzionamento del metodo query ma non eseguirà mai una
chiamata al GraphQL server (interrogherà quindi solo e soltanto la cache).
● readFragment
A differenza di readQuery che permette di leggere i dati dalle root query type,
readFragment ti permette di leggere i dati da qualsiasi nodo che hai interrogato.
● writeQuery / writeFragment
Analoghi ai metodi di lettura relativi ma è importante ricordare che non cambieranno
alcun dato sul tuo server. Al reload dell’applicazione, le modiﬁche apportate verranno
perse..
● writeData
Scritture dirette alla cache non relative a mutation presenti.
GraphQL &
Angular

Apollo Client Cache - Local State
Management
● La direttiva @client dice ad Apollo Client
di recuperare la query dalla cache
piuttosto di inviarla al nostro GraphQL
server.
● È possibile utilizzare la direttiva @client
per speciﬁcare i campi client side così da
combinare dati locali e remoti in una
query.
GraphQL &
Angular

● Update
Con l’opzione update del metodo mutate è
possibile aggiornare la cache dopo una
mutation, grazia alla combinazione con i
metodi di lettura/scrittura della cache.
Management
GraphQL &
Angular

Management
● refetchQueries
È possibile speciﬁcare una o più
query che si desidera eseguire dopo
il completamento di una mutazione
al ﬁne di recuperare le parti dello
store che potrebbero essere state
interessate dalla mutazione.
GraphQL &
Angular

Apollo Client Cache
● fetchMore - Incremental loading
Il modo più semplice per eseguire la paginazione di risultati che consente
sostanzialmente di eseguire una nuova query GraphQL e unire il risultato al risultato
originale.
È possibile speciﬁcare quale query e variabili utilizzare per la nuova query e come unire il
risultato della nuova query con i dati esistenti sul client.
● Cache redirects con cacheRedirects
A volte una query richiede dati già esistenti nello store ma con una chiave diversa (ad
esempio Lista / Dettaglio).
Se sappiamo che i dati si trovano già nella cache del client, possiamo dire ad Apollo
Client dove cercare i dati deﬁnendo dei custom resolvers per l’opzione cacheRedirects di
InMemoryCache.
GraphQL &
Angular

Angular + Apollo
Analizziamo il progetto!
GraphQL &
Angular

● Advanced Persisted Query
● Query Batching
● SSR
● Code Generation
● Apollo CLI
Non dimentichiamo anche...
GraphQL &
Angular

Qualche Links
Docs
● GraphQL.org
● GraphQL.com
● GraphQL Spec Draft
● Apollo Docs
● How to GraphQL
● How to GraphQL (Angular)
Tools
● GraphQL-network
● GraphQL-CLI
● GraphQL-conﬁg
● GraphQL Voyager
CheatSheet
● https://devhints.io
●
Server / Client
● Apollo
● GraphQL-Yoga
● Relay
● GraphQL Request
IDEs
● GraphQL Playground
● GraphiQL
● GraphQL IDE
Other
● DataLoader
● Awesome
GraphQL &
Angular

Grazie a tutti!
Se avete voglia di dare
un’opinione, di contattarmi
o di vincere un premio…
(scherzo...non c’è alcun premio
ma faceva molto ﬁgo! :D)
GraphQL &
Angular
https://bit.ly/32bf5nk

Acadevmy - GraphQL & Angular: Tutto il REST è noia!

Recommended

Recommended

More Related Content

Similar to Acadevmy - GraphQL & Angular: Tutto il REST è noia!

Similar to Acadevmy - GraphQL & Angular: Tutto il REST è noia! (20)

More from Francesco Sciuti

More from Francesco Sciuti (10)

Acadevmy - GraphQL & Angular: Tutto il REST è noia!