Le ap­pli­ca­zio­ni sul web uti­liz­za­no le API (Ap­pli­ca­tion Pro­gram­ming In­ter­fa­ces) per poter scambiare e rie­la­bo­ra­re dati. Quindi affinché altri servizi possano accedere al proprio progetto web, bisogna svi­lup­pa­re e im­ple­men­ta­re un’in­ter­fac­cia. A tal fine esistono alcuni standard con­so­li­da­ti, come SOAP e REST (Repre­sen­ta­tio­nal State Transfer), che sta­bi­li­sco­no una struttura di base per l’API fa­cil­men­te gestibile con qualsiasi lin­guag­gio di pro­gram­ma­zio­ne attuale. In par­ti­co­la­re l’ar­chi­tet­tu­ra suddetta è diventata la soluzione più uti­liz­za­ta in assoluto negli ultimi anni grazie alla sua sem­pli­ci­tà.

Anche se il successo dell’ar­chi­tet­tu­ra REST è stato sor­pren­den­te, esistono valide al­ter­na­ti­ve al­tret­tan­to con­vin­cen­ti come GraphQL. Il lin­guag­gio di query e il runtime system di Facebook regge il confronto con SOAP e REST e i suoi vantaggi sono ri­scon­tra­bi­li anche in caso di in­ter­ro­ga­zio­ni più complesse.

API IONOS per svi­lup­pa­to­ri
Gestisci i tuoi prodotti di hosting tramite la nostra potente API
  • Gestione record DNS
  • Am­mi­ni­stra­zio­ne SSL
  • Do­cu­men­ta­zio­ne API

Cos’è GraphQL?

GraphQL è un lin­guag­gio di query svi­lup­pa­to nel 2012 da Facebook simile a SQL che comprende il runtime system e il sistema dei tipi. Ini­zial­men­te fu ideato esclu­si­va­men­te per un utilizzo aziendale interno a causa della tra­sfor­ma­zio­ne delle nuove app mobili di Facebook per iOS e Android, che mo­stra­va­no pre­sta­zio­ni sempre più deboli e una com­ples­si­tà crescente. Il colosso ha dovuto trovare una soluzione adeguata in par­ti­co­la­re per la di­stri­bu­zio­ne dei dati News Feed e per l’ot­ti­miz­za­zio­ne della relazione tra le in­for­ma­zio­ni richieste e le query di server. Nel 2015 Facebook rese di­spo­ni­bi­le il codice sorgente di GraphQL: in quel momento re­go­la­men­tò quasi tutti gli accessi ai dati delle app mobili. Dal 2017 il progetto va avanti sotto la licenza gratuita OWFa-1.0 (Open Web Foundation).

Come funziona GraphQL?

Per com­pren­de­re le modalità di fun­zio­na­men­to di GraphQL è im­por­tan­te occuparsi delle tre com­po­nen­ti basilari che ca­rat­te­riz­za­no il progetto open source:

  • Lin­guag­gio query: in­nan­zi­tut­to il GraphQL utilizza un lin­guag­gio query (query language) che permette ai programmi un facile accesso a un’API. Mentre altre ar­chi­tet­tu­re di in­ter­fac­cia accettano solo query molto rigorose che spesso for­ni­sco­no l’accesso solo a una singola risorsa, le query di GraphQL sono ca­rat­te­riz­za­te da un elevato grado di fles­si­bi­li­tà. Ciò dimostra con­cre­ta­men­te che non esiste un limite per il numero di risorse in­ter­ro­ga­te e che è possibile definire quali campi di dati devono essere in­ter­ro­ga­ti. GraphQL consente di leggere, scrivere e mo­di­fi­ca­re le query.
  • Sistema dei tipi: GraphQL lavora inoltre con un proprio sistema dei tipi che permette di de­scri­ve­re la propria API at­tra­ver­so tipi di dati. Le strutture dei dati così definite for­ni­sco­no quindi la struttura reale per le query. Ogni tipo è co­sti­tui­to da uno o più campi che con­ten­go­no proprie spe­ci­fi­che di tipo. Il singolo sistema così creato serve a GraphQL come punto d’orien­ta­men­to per validare le richieste e poter re­spin­ge­re le query errate.
  • Runtime system: GraphQL fornisce anche diversi runtime system di server per l’ese­cu­zio­ne delle query GraphQL. A tale scopo mette a di­spo­si­zio­ne librerie per diversi linguaggi di pro­gram­ma­zio­ne, come Go, Java, Ja­va­Script, PHP, Python o Ruby. Si ha dunque libera scelta per quanto riguarda il lin­guag­gio della propria API GraphQL. Il runtime system è tuttavia re­spon­sa­bi­le per la con­ver­sio­ne e la va­li­da­zio­ne delle query, come anche per la se­ria­liz­za­zio­ne delle risposte (tra­sfor­ma­zio­ne degli oggetti in una sequenza di byte cor­ri­spon­den­te). Tra i compiti dell’ap­pli­ca­zio­ne web rientrano anche il sal­va­tag­gio e il re­pe­ri­men­to di dati (ad es. in una banca dati).

Lin­guag­gio di query, sistema dei tipi e runtime system for­ni­sco­no insieme una struttura API altamente per­so­na­liz­za­bi­le che non è di­spon­bi­le solo per la piat­ta­for­ma e l’ap­pli­ca­zio­ne, ma può essere anche per­fet­ta­men­te adattato alle spe­ci­fi­che della propria ap­pli­ca­zio­ne web: l’in­ter­fac­cia GraphQL può essere infatti integrata senza problemi nel codice del vostro progetto, a pre­scin­de­re dal fatto che uti­liz­zia­te il framework Django in Python, quello Rails in Ruby o quello di Ja­va­Script Node.js.

UBGzsb2UkeY.jpg Per visualizzare questo video, sono necessari i cookie di terze parti. Puoi accedere e modificare le impostazioni dei cookie qui.

Quali sono le ca­rat­te­ri­sti­che di GraphQL?

Una delle ca­rat­te­ri­sti­che prin­ci­pa­li di GraphQL è la sem­pli­ci­tà del lin­guag­gio di query, che sem­pli­fi­ca no­te­vol­men­te agli svi­lup­pa­to­ri l’accesso all’in­ter­fac­cia. Chi si confronta con GraphQL con­sta­te­rà molto presto che le risposte ricevute cor­ri­spon­do una ad una alle richieste inviate. Il formato di output è snello quanto il diffuso formato Ja­va­Script JSON (Ja­va­Script Object Notation). Di con­se­guen­za l’invio di una query per­so­na­liz­za­ta non rap­pre­sen­ta una grande impresa se si conosce la struttura dei dati richiesti dalla propria ap­pli­ca­zio­ne, formulati nella query. Oltre alla semplice redazione delle query, GraphQL è ca­rat­te­riz­za­to dalle seguenti fun­zio­na­li­tà:

  • Struttura ge­rar­chi­ca: i dati ac­ces­si­bi­li at­tra­ver­so l’API di GraphQL hanno una struttura ge­rar­chi­ca. Si creano au­to­ma­ti­ca­men­te dei rapporti tra i singoli oggetti, sulla base dei quali possono essere formulate anche query complesse (e ricevere risposte) in un’unica request. Lo scambio di più messaggi tra server e client (chiamato anche “round trip”) non è ne­ces­sa­rio. Questa gerarchia dei dati è adatta so­prat­tut­to per database a grafo, come Ja­nu­sGra­ph, e per in­ter­fac­ce utente che sono strut­tu­ra­te per lo più ge­rar­chi­ca­men­te.
  • Forte ti­piz­za­zio­ne: ogni livello di query GraphQL cor­ri­spon­de a un de­ter­mi­na­to tipo e ogni tipo descrive un set di campi di­spo­ni­bi­li. Questo sistema di tipi può tuttavia stabilire in modo più che au­to­ma­ti­co se una query è formulata cor­ret­ta­men­te o no: come SQL anche GraphQL, grazie alla sua rigorosa ti­piz­za­zio­ne, può ri­spon­de­re con messaggi di errore de­scrit­ti­vi già durante lo sviluppo e prima dell’invio della query.
  • Fles­si­bi­li­tà: GraphQL permette di creare query fles­si­bi­li. Inoltre è possibile godere di una serie di libertà e vantaggi in fase di sviluppo, come anche per­so­na­liz­za­re la propria in­ter­fac­cia. Di solito sono di­spo­ni­bi­li poche per­so­na­liz­za­zio­ni lato server, mentre il team di sviluppo può agire in modo com­ple­ta­men­te in­di­pen­den­te dal team re­spon­sa­bi­le per la com­po­nen­te client. Infine si possono eseguire tutte le va­ria­zio­ni o gli am­plia­men­ti dell’API senza ver­sio­ning, dato che i campi ag­giun­ti­vi possono essere inseriti fa­cil­men­te e senza influire sui client esistenti.

GraphQL vs REST: cosa dif­fe­ren­zia i due concetti API?

All’inizio abbiamo parlato del grande successo di REST nel World Wide Web e come GraphQL sia diventato una valida al­ter­na­ti­va a questa ar­chi­tet­tu­ra su base HTTP orientata alle risorse per i servizi web. Ciò è stato possibile in par­ti­co­la­re grazie allo sviluppo che ha portato Facebook all’ideazione di GraphQL: l’im­por­tan­za e la com­ples­si­tà crescenti delle ap­pli­ca­zio­ni web mobili. La forza di GraphQL come base API si mostra in par­ti­co­la­re nelle ap­pli­ca­zio­ni per Android, iOS e simili: con una singola query si può ottenere l’accesso a tutti i dati de­si­de­ra­ti.

L’istanza del server GraphQL fornisce esat­ta­men­te le in­for­ma­zio­ni definite nella query, quindi non verranno inviati più o meno dati del ne­ces­sa­rio sull’in­ter­fac­cia. Con le com­pa­ra­bi­li API di REST è possibile in­ter­ro­ga­re solo una serie specifica di dati per query, dopodiché questa viene inviata per intero. Nel confronto tra GraphQL e REST il concetto di query di Facebook si dimostra più preciso ed ef­fi­cien­te, il che torna utile per le pre­sta­zio­ni dell’ap­pli­ca­zio­ne. Ciò vale so­prat­tut­to per gli utenti dei di­spo­si­ti­vi mobili, che non sempre hanno a di­spo­si­zio­ne con­nes­sio­ni Internet stabili e veloci.

Se da una parte la libertà delle query dei dati di GraphQL risulta essere una ca­rat­te­ri­sti­ca molto positiva, dall’altra parte potrebbe causare un serio problema di sicurezza, so­prat­tut­to se si vogliono offrire API aperte, sulle quali non si può con­trol­la­re il com­por­ta­men­to delle query da parte di client terzi. Quindi potrebbe ve­ri­fi­car­si che un alto numero di query porti il server al collasso (in­ten­zio­nal­men­te o meno). Uno scenario simile, da cui bisogna in ogni caso pro­teg­ger­si, non risulta essere così mi­nac­cio­so se si utilizza un’API di REST. Im­ple­men­ta­re GraphQL sul back-end di modo che funzioni ve­lo­ce­men­te e in sicurezza è quindi molto più difficile.

Inoltre anche l’im­ple­men­ta­zio­ne di un processo di caching per query non mutevoli è si­gni­fi­ca­ti­va­men­te più com­pli­ca­to con GraphQL in confronto alle query di un’in­ter­fac­cia REST, in quanto queste possono essere salvate (ad esempio nel browser) mediante metodi di caching della specifica HTTP.

Tutorial di GraphQL: primi passi ed esempi

GraphQL offre un ampio margine di scelta del lin­guag­gio di pro­gram­ma­zio­ne di base, grazie alla vasta gamma di librerie pronte all’uso. Ciò rap­pre­sen­ta anche uno dei grandi vantaggi nell’im­ple­men­ta­zio­ne di un’in­ter­fac­cia GraphQL nella propria app. Se siete fan di Python potete ricorrere ad esempio alla libreria Graphene o lavorare con la libreria graphql-java se il progetto è basato su Java. GraphQL.js è par­ti­co­lar­men­te adatto come base per l’im­ple­men­ta­zio­ne se l’ap­pli­ca­zio­ne web si basa sul runtime system di Ja­va­Script.

N.B.

Sul sito internet di GraphQL troverete un elenco di tutte le librerie GraphQL di­spo­ni­bi­li e delle ap­pli­ca­zio­ni client per i diversi linguaggi di pro­gram­ma­zio­ne.

Nel seguente tutorial di GraphQL spie­ghia­mo con alcuni esempi come iniziare a uti­liz­za­re il framework di API per un’ap­pli­ca­zio­ne Ja­va­Script, dove oltre alla suddetta libreria GraphQL.js viene uti­liz­za­to anche il framework web Express.

Passo n°1: In­stal­la­zio­ne della libreria

Per poter uti­liz­za­re le librerie GraphQL bisogna prima in­stal­lar­le. Per in­stal­la­re la libreria Ja­va­Script GraphQL.js, si utilizza il gestore di pacchetti Ja­va­Script npm (Node Package Manager) e il seguente comando:

npm install --save graphql

In al­ter­na­ti­va la libreria può anche ap­pog­giar­si sul package manager Yarn, svi­lup­pa­to da Facebook (pre­va­len­te­men­te) e Google.

yarn add graphql

In entrambi i casi il pre­sup­po­sto è l’in­stal­la­zio­ne di una versione attuale di Node.js (è con­si­glia­to Node v6.0.0 o superiore).

Passo n°2: Il primo schema di query

Affinché la vostra ap­pli­ca­zio­ne possa elaborare query GraphQL ha bisogno di uno schema che definisce il tipo di query e il punto d’accesso alla vostra in­ter­fac­cia (chiamato anche API root) compreso di funzione resolver. Per un esempio di in­ter­fac­cia GraphQL semplice da cui si genera il messaggio “Ciao mondo!”, il codice corretto nel file server.js è il seguente:

var { graphql, buildSchema } = require('graphql');
// Costruisci uno schema sulla base del concetto GraphQL
var schema = buildSchema(`
type Query {
hello: String
}
`);
// API root mette a disposizione una funzione resolver per ciascun end point attingente
var root = {
hello: () => {
return 'Ciao mondo!';
},
};
// Esegui la richiesta GraphQL '{ hello }' e riproduci la rispettiva risposta
graphql(schema, '{ hello }', root).then(response => {
console.log(response);
});

Se si esegue questo codice con Node.js, mentre si inserisce il comando

node server.js

sul terminale dovrebbe apparire il seguente messaggio:

{ data: { hello: Ciao mondo!' } }

Passo n°3: Server GraphQL su base Express

Non appena è stata creata una semplice query ed è stata eseguita nella riga di comando, è arrivato il momento di far fun­zio­na­re un server API di GraphQL. È ora ne­ces­sa­rio rag­giun­ge­re l’in­ter­fac­cia uti­liz­zan­do ad esempio un browser web standard. A tale scopo in­stal­la­te il framework di in­stal­la­zio­ne Express e l’al­tret­tan­to ne­ces­sa­ria libreria express-graphql con il seguente comando:

npm install express express-graphql --save

Quindi mo­di­fi­ca­te l’esempio GraphQL “Ciao mondo!” affinché diventi la base del vostro server GraphQL invece di un semplice script. A tale scopo im­ple­men­ta­te il modulo Express e uti­liz­za­te la libreria express-graphql per collegare il server API all’end point HTTP “/graphql”:

var express = require('express');
var graphqlHTTP = require('express-graphql');
var { buildSchema } = require('graphql');
// Costruisci uno schema sulla base del concetto GraphQL
var schema = buildSchema(`
type Query {
hello: String
}
`);
// API root mette a disposizione una funzione resolver per ciascun end point attingente
var root = {
hello: () => {
return Ciao mondo!';
},
};
var app = express();
app.use('/graphql', graphqlHTTP({
schema: schema,
rootValue: root,
graphiql: true
}));
app.listen(4000);
console.log('Eseguire server API GraphQL su localhost:4000/graphql');

Come nell’esempio GraphQL pre­ce­den­te, aprite il file server.js con Node.js, con la dif­fe­ren­za che questa volta non eseguite una semplice query, ma avviate il vostro server API:

node server.js

Nel codice del server Express di GraphQL non sono spe­ci­fi­ca­ti solo lo schema e l’API root, ma è rap­pre­sen­ta­to anche l’end point HTTP “/graphql”. Con l’input “graphiql: true” viene attivato l’omonimo tool che permette l’in­se­ri­men­to di query at­tra­ver­so un’in­ter­fac­cia grafica utente. Aprite sem­pli­ce­men­te il vostro browser e inserite il seguente indirizzo:

http://localhost:4000/graphql

Dopo aver in­stal­la­to i com­po­nen­ti im­por­tan­ti seguendo passo dopo passo questo tutorial GraphQL, redatto il vostro primo schema di query e avviato il vostro primo server, potete fa­mi­lia­riz­za­re con le opzioni di in­se­ri­men­to delle query.

Troverete ulteriori in­for­ma­zio­ni e spie­ga­zio­ni più det­ta­glia­te riguardo alla con­fi­gu­ra­zio­ne dei backend e frontend di GraphQL nella pagina dei tutorial sul sito web ufficiale dell’API di Facebook.

Vai al menu prin­ci­pa­le