Tutorial GraphQL Italiano (Client e Server): La Guida Completa (2018)

Il tutorial GraphQL in italiano che stavi cercando.

Tutorial GraphQL Italiano: La Guida Completa

GraphQL è senza dubbio una delle tecnologie più “calde” del momento.

L’argomento però è controverso.

In rete infuriano polemiche tra i sostenitori del caro vecchio REST e la nuova ondata di sviluppatori che stanno passando a GraphQL.

Qualcuno dice che GraphQL sostituirà completamente REST.

Qualcun altro sostiene che GraphQL sostituirà Redux.

Ma qui non voglio fare guerre di religione.

Quello che mi interessa è aiutarti nel formare la tua idea su GraphQL, così che quando sarai pronto per sviluppare:

  • saprai come usare GraphQL
  • saprai perchè usare GraphQL

L’approccio che voglio usare in questo tutorial GraphQL è semplice.

Mi metterò nei panni di una persona che sente parlare di GraphQL per la prima volta.

Ma per imparare subito dobbiamo sporcarci le mani. Insieme costruiremo una piccola applicazione!

Tutorial GraphQL: GraphQL sul server

Una tipica applicazione GraphQL fullstack è costituita da due componenti principali.

La parte backend, che fa da API per il frontend, e la parte frontend, che consumerà i dati.

All’inizio partiremo con il backend, che ci permetterà di introdurre i concetti fondamentali di GraphQL.

In seguito estenderemo l’applicazione aggiungendo un client.

Piccola premessa: GraphQL in origine era solo una specifica tecnica.

La specifica è un documento che descrive quali caratteristiche un linguaggio deve avere, come si usa, e quali funzioni mette a disposizione.

Non esisteva nessuna implementazione JavaScript, Python, o Java quando il team guidato da Lee Byron iniziò a lavorare sulla bozza di GraphQL.

Quando poi la specifica è stata rilasciata al pubblico nel 2015 le prime librerie non hanno tardato a comparire.

Tra le tante, Apollo è stata la compagnia che ha saputo sfruttare meglio la scia creando apollo-server e apollo-client.

Per creare un server GraphQL minimale ci serviranno per il momento due pacchetti NPM:

apollo-server (implementazione JavaScript lato server) e graphql (implementazione JavaScript del linguaggio).

Tutorial GraphQL: lo Schema

Il fondamento alla base di ogni server GraphQL è lo Schema.

Ma che cosa sarebbe uno Schema in GraphQL?

Nel mondo GraphQL lo Schema è un contratto che stabilisce cosa il client è autorizzato a recuperare dal server.

Vediamo un pò di codice.

Prima di tutto crea una directory per il progetto:

Poi inizializza con:

Installa apollo-server e graphql con:

Poi crea un file, che puoi chiamare index.js, importa apollo-server:

e finalmente creiamo il nostro primo Schema GraphQL, sempre all’interno dello stesso file:

Mmmm! Abbiamo fatto solo pochi passi ma abbiamo già tante cose da vedere.

Che cosa significa typeDefs?

Che cosa significa Query?

E cosa sarebbe quel punto esclamativo dopo Int?

Cominciamo con typeDefs.

Come ti ho anticipato prima, lo Schema in GraphQL è un contratto.

Questo contratto stabilisce: la mia API GraphQL espone alcuni tipi di dati ed il client può recuperare solo quelli.

In “lingua” GraphQL typeDefs è una convenzione per indicare la definizione dei tipi, ovvero lo Schema (type definitions) che la mia API deve esporre al client.

In questo caso il client può lanciare per il momento una sola query verso la mia API GraphQL.

La query si chiama totalPictures e ritornerà un numero intero (Int), che non può essere nullo: Int! significa infatti intero non annullabile (non-nullable integer).

Rivediamo il codice dello Schema:

Abbiamo una definizione dei tipi, ovvero il nostro Schema GraphQL.

Non è obbligatorio usare il nome typeDefs. In molta documentazione troverai l’equivalente schema.

All’interno del nostro Schema abbiamo una Query, totalPictures.

Query deve essere scritto con lettera maiuscola perchè si tratta di un root type.

Vedremo dopo quali sono gli altri root types, ma per ora ti basti sapere che GraphQL è un linguaggio typed, ovvero composto da tipi, proprio come TypeScript.

In questo momento la nostra API GraphQL non ritorna niente di utile: ma nella prossima sezione iniziamo a fare sul serio.

Approfondimento consigliato: Schema First design.

Tutorial GraphQL: i Resolver

coming soon!