Tutorial GraphQL per principianti: cos'è, caratteristiche ed esempio

Cos'è GraphQL?

GraphQL è una tecnologia lato server del livello applicativo sviluppata da Facebook per l'esecuzione di query con dati esistenti. GraphQL può ottimizzare le chiamate API RESTful. Fornisce un modo dichiarativo per recuperare e aggiornare i dati. GraphQL ti aiuta a caricare i dati dal server al client. Consente ai programmatori di scegliere i tipi di richieste che desiderano effettuare.

Perché utilizzare GraphQL?

Di seguito sono riportati i motivi per cui utilizzare GraphQL:

Fornisce una query leggibile dall'uomo.
In GraphQL è molto semplice gestire molti database.
È adatto per microservizi e sistemi complessi.
Puoi recuperare i dati con una singola chiamata API.
Ti aiuta con l'invio in batch e la memorizzazione nella cache delle query.
Non devi affrontare problemi di recupero, sopra e sotto.
Personalizzare le richieste in base alle vostre esigenze.
Ti aiuta a scoprire lo schema nel formato appropriato.
GraphQL mantiene automaticamente la documentazione sincronizzata con le modifiche dell'API.
L'evoluzione dell'API è possibile senza controllo delle versioni.
I campi GraphQL vengono utilizzati in più query che possono essere condivise a un livello di componente superiore per il riutilizzo.
Puoi scegliere quali funzioni esporre e come funzionano.
Può essere utilizzato per la prototipazione rapida di applicazioni.

Applicazioni di GraphQL

Ecco le importanti applicazioni di GraphQL:

Fornisce Relay e altri framework client
GraphQL ti aiuta a migliorare le prestazioni dell'app mobile.
Può ridurre il problema del recupero eccessivo riducendo il servizio cloud lato server e riducendo l'utilizzo della rete lato client.
Può essere utilizzato quando l'applicazione client deve specificare quali campi sono necessari nel formato di query lungo.
GraphQL può essere pienamente utilizzato quando devi aggiungere funzionalità alla tua API vecchia o esistente.
Viene utilizzato quando è necessario semplificare API complesse.
Mescola e mescola il modello della facciata, comunemente usato nella programmazione orientata agli oggetti.
Quando devi aggregare dati da più di un luogo in un'unica comoda API.
Puoi utilizzare GraphQL come astrazione su un'API esistente per specificare la struttura della risposta in base alle esigenze dell'utente.

Cosa devi imparare prima di imparare GraphQl?

Questo tutorial GraphQL è basato su Express e NodeJs. Pertanto, puoi imparare GraphQL molto facilmente con una conoscenza di base di NodeJS.

Componenti chiave di GraphQL

Ora in questo tutorial di GraphQL, impariamo i componenti chiave di GraphQL:

Come mostrato nella figura sopra, ci sono tre componenti chiave di GraphQL: 1) Query, 2) Resolver e 3) Schema.

domanda

La query è una richiesta API effettuata dall'applicazione della macchina client. Supporta aumenti e punta ad array. La query viene utilizzata per leggere o recuperare valori.

Parti della query:

Di seguito sono riportate le parti importanti della query

Settore:

Un campo indica semplicemente che stiamo chiedendo al server informazioni particolari. Di seguito è riportato un esempio GraphQL di un campo in una query graphQL.

query {
    team {
        id name
    }
}

"data": {
    "team":[ {
        "id": 1, 
        "name": "Avengers"
    }
    ,
    …
]
}
}

Nell'esempio GraphQL sopra, chiediamo al server il campo chiamato team e i suoi sottocampi come id e nome. Il server GraphQL restituisce i dati che abbiamo richiesto.

argomenti

In REST, possiamo passare solo un singolo set di argomenti come segmenti URL e parametri di query. Per ottenere un profilo particolare, una tipica chiamata REST sarà simile alla seguente:

GET /api'team?id=2 Content-Type: application JSON
 {
    "id": 2, 
    "name": "Justice League."
}

risolvere

I risolutori forniscono le indicazioni per convertire le operazioni GraphQL in dati. Risolvono la query sui dati definendo funzioni di risoluzione.

Visualizza al server il processo e la posizione per recuperare i dati in base a un campo specifico. Il risolutore separa anche lo schema del database e lo schema API. Le informazioni separate aiutano a modificare il contenuto ottenuto dal database.

Schema

Uno schema GraphQL è il centro dell'implementazione di GraphQL. Descrive le funzionalità disponibili per i client che si connettono ad esso.

Caratteristiche di GraphQL

Ecco le caratteristiche importanti di GraphQL:

Fornisce un linguaggio di query dichiarativo, che non è imperativo.
È gerarchico e incentrato sul prodotto.
GraphQL è fortemente tipizzato. Significa che le query vengono eseguite nel contesto di un particolare sistema.
Le query in GraphQL sono codificate nel client, non nel server.
Ha tutte le funzionalità del livello applicativo del modello OSI.

Client GraphQL

Il client GraphQL è un codice che effettua richieste POST a un server GraphQL pertinente. Puoi eseguire query direttamente su un'API GraphQL, ma l'approccio ottimale è sfruttare una libreria client dedicata utilizzando Relay.

Questo JavaLa libreria di script è sviluppata da Facebook per realizzare applicazioni React con GraphQL. I client GraphQL possono essere un CMS come Drupal, un'applicazione a pagina singola, un'applicazione mobile, ecc.

Server GraphQL

I server GraphQL sono un'implementazione lato server delle specifiche di GraphQL. Rappresenta i tuoi dati come API GraphQL, per la quale il tuo programma client può eseguire query banca dati.

Gateway GraphQL

Gateway è un modello di microservizio in cui è possibile creare un servizio separato per far fronte ad altri servizi backend. Offre documentazione praticabile e fornisce un modo conveniente per raccogliere dati da più di una fonte con un'unica richiesta.

Qual è la variabile in GraphQL?

A Variabile in GraphQL viene utilizzato per separare i valori dinamici dalla query del client e passare la query come dizionario univoco. La variabile in GraphQL può essere utilizzata anche per riutilizzare la query o le mutazioni scritte dal client con argomenti individuali. In graphQL, non è possibile passare argomenti dinamici direttamente nella stringa di query. Il motivo è che il codice lato client deve manipolare dinamicamente la stringa di query nel momento in cui si esegue il programma.

GraphQL ha un buon modo per fattorizzare i valori dinamici fuori dalla query. Li passa come un dizionario separato. Questi valori sono noti come variabili. Ogni volta che lavoriamo con le variabili, dobbiamo fare le seguenti tre cose:

Sostituisci il valore statico nella query con un nome di variabile.
Dichiara il nome della variabile come una delle variabili accettate dalla query GraphQL.
Passa il valore nel dizionario delle variabili specifico del trasporto.

Ecco come appare tutto insieme:

query HeroNameAndFriends($episode: Episode) {
  hero(episode: $episode) {
    name
    friends {
      name
    }
  }
}
{
  "episode": "JEDI"
}
{
  "data": {
    "hero": {
      "name": "R2-D2",
      "friends": [
        {
          "name": "Luke Skywalker"
        },
        {
          "name": "Han Solo"
        },
        {
          "name": "Leia Organa"
        }
      ]
    }
  }
}

Come puoi vedere nell'esempio GraphQL sopra, abbiamo semplicemente passato una variabile diversa oltre alla necessità di costruire una nuova query.

Cos'è la mutazione?

Una mutazione è un modo per modificare il set di dati in GraphQL. Modifica i dati nell'archivio dati e restituisce un valore. Le mutazioni ti aiutano a inserire, aggiornare o eliminare dati. Generalmente, le mutazioni sono definite come una parte dello schema.

Punti da considerare durante la progettazione delle mutazioni GraphQL

Ecco i punti importanti durante la progettazione di GraphQL:

Denominazione: Prima di tutto, devi nominare il verbo della tua mutazione. Poi il sostantivo, o “oggetto” se applicabile. Usa camelCase mentre dai un nome alle mutazioni.
Specificità: Devi renderlo il più specifico possibile per la mutazione. Le mutazioni dovrebbero rappresentare azioni semantiche intraprese dall'utente.
Oggetto di input: Utilizzare un tipo di oggetto di input univoco e obbligatorio come argomento per eseguire la mutazione sul client.
Tipo di carico utile unico: Dovresti utilizzare un tipo di carico utile univoco per ogni mutazione. Puoi anche aggiungere l'output della mutazione come campo a quel particolare tipo di payload.
Nidificazione: Usa l'annidamento per la tua mutazione ovunque abbia senso. Ti consente di utilizzare appieno l'API GraphQL.

Differenza tra GraphQL e REST

La tabella seguente mostra le differenze importanti tra GraphQL e RESTO.

GraphQL	REST
Segue un'architettura orientata al cliente.	Segue un'architettura basata sul server.
GraphQL può essere organizzato in termini di uno schema.	REST può essere organizzato in termini di endpoint.
GraphQL è una comunità in crescita.	REST è una comunità molto grande.
La velocità di sviluppo in GraphQL è elevata.	La velocità di sviluppo in REST è lenta.
La curva di apprendimento in GraphQL è difficile.	La curva di apprendimento in REST è moderata.
L'identità è separata dal modo in cui la recuperi.	L'endpoint che chiami in REST è l'identità di un particolare oggetto.
In GraphQL, il server determina le risorse disponibili.	La forma e la dimensione della risorsa sono determinate dal server in REST.
GraphQL fornisce un'elevata coerenza su tutte le piattaforme.	È difficile ottenere coerenza su tutte le piattaforme.

Svantaggi di GraphQL

Ecco gli svantaggi di GraphQL:

Ecosistema giovane
Mancanza di risorse nella parte backend.
Manca un modello di progettazione per un'app complessa.
Problemi di prestazioni con query complesse.
Eccessivo per piccole applicazioni
GraphQL non dipende dai metodi di memorizzazione nella cache HTTP che consentono di archiviare il contenuto della richiesta.
GraphQL non riconosce i file. Pertanto, non è inclusa una funzionalità di caricamento dei file.
Con GraphQL, preparati a ricevere molta formazione pre-sviluppo, come l'apprendimento dello Schema Definition Language.

App e strumenti open source utilizzati da GraphQL

Le app e gli strumenti open source importanti utilizzati da GraphQL sono i seguenti:

Gatsby: Gastby è un'applicazione basata su GraphQL che può utilizzare dati derivati da più di una fonte API GraphQL. Puoi usarlo per sviluppare un'applicazione React statica e basata su client.
GraphiQL: È un ID che si integra con il browser e interagisce anche con l'API di GraphQL. Alcune delle funzioni incluse in GraphiQL sono mutazioni, query sui dati e query con completamento automatico.
Parco giochi GraphQL: È un potente IDE che dispone di un editor integrato per la gestione di mutazioni, convalida, query GraphQl, abbonamenti, ecc. Lo sviluppatore può utilizzare questo IDE per visualizzare la struttura dello schema.
Prisma: Prisma è un livello di astrazione del database che trasforma i tuoi database in API GraphQL con operazioni CRUD (Crea, Leggi, Aggiorna ed Elimina).
Po: È uno strumento e una piattaforma open source che converte il codice riutilizzabile in componenti. Gli sviluppatori possono usarli per condividere e sviluppare vari progetti.

Sintesi

GraphQL è una tecnologia lato server a livello di applicazione sviluppata da Facebook per l'esecuzione di query con dati esistenti.
Puoi utilizzare GraphQL per recuperare i dati con una singola chiamata API.
GraphQL ti aiuta a migliorare le prestazioni dell'app mobile.
Componenti importanti della query GraphQL sono: 1) Query, 2) Resolver, 3) Schema.
GraphQL è fortemente tipizzato. Significa che le query vengono eseguite nel contesto di un particolare sistema.
Il client GraphQL è un codice che effettua richieste POST a un server GraphQL pertinente.
I server GraphQL sono un'implementazione lato server delle specifiche di GraphQL.
Gateway è un modello di microservizio in cui è possibile creare un servizio separato per far fronte ad altri servizi backend.
GraphQL ha un buon modo per fattorizzare i valori dinamici fuori dalla query.
Una mutazione è un modo per modificare il set di dati in GraphQL.
I punti importanti durante la progettazione di GraphQL sono: 1) Denominazione, 2) Specificità, 3) Oggetto di input Tipo di carico utile unico e 4) Annidamento.
GraphQL può essere organizzato in termini di schema, mentre REST può essere organizzato in termini di endpoint.
Lo svantaggio di GraphQL è che manca di risorse nella parte backend.