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

Cos'è GraphQL?

GraphQL è una tecnologia lato server a livello applicativo sviluppata da Facebook, ora Meta, per eseguire query con dati esistenti. È stata rilasciata pubblicamente nel 2015 ed è stata governata da GraphQL. Foundation Dal 2018, GraphQL è in grado di ottimizzare le chiamate API RESTful. Offre un modo dichiarativo per recuperare e aggiornare i dati. GraphQL consente di caricare i dati dal server al client e permette ai programmatori di scegliere i tipi di richieste che desiderano effettuare.

Cosa bisogna imparare prima di imparare GraphQL?

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

Perché utilizzare GraphQL?

Di seguito sono riportati i motivi per cui utilizzare GraphQL:

• Fornisce una query leggibile dall'uomo.
• In GraphQL è molto semplice gestire numerosi 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 si verificano problemi di sovraccarico o insufficiente recupero dei dati.
• 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 applicazioniping.

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.
• È possibile utilizzare GraphQL come un assolutotraczione su un'API esistente per specificare la struttura della risposta in base alle esigenze dell'utente.

Tutti questi vantaggi si basano su tre componenti mobili che lavorano in sinergia.

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

1. Settore:

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

query {
    team {
        id
        name
    }
}

Il server risponde con un documento JSON la cui struttura rispecchia la query:

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

Nell'esempio GraphQL sopra riportato, chiediamo al server il campo chiamato "team" e i suoi sottocampi come "id" e "name". Il server GraphQL restituisce esattamente i dati richiesti.

2. argomenti

In REST, possiamo passare solo un singolo set di argomenti come URL segmenti e parametri di query. Per ottenere un profilo specifico, 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 implementazioni lato server della specifica GraphQL. Rappresentano i tuoi dati come API GraphQL, che il tuo programma client può interrogare per ottenere banca dati.

Gateway GraphQL

Gateway è un modello di microservizi che permette di creare servizi separati per gestire altri servizi di backend. Offre una documentazione completa e un modo pratico per raccogliere dati da più fonti con una singola richiesta.

GraphQL offre un ottimo modo per separare i valori dinamici dalla query: passarli come un dizionario a parte. Questi valori sono noti come variabili. Quando lavoriamo con le variabili, dobbiamo fare le seguenti tre cose:

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

Ecco come appare il tutto nel suo insieme. Innanzitutto la query, che dichiara la variabile:

query HeroNameAndFriends($episode: Episode) {
    hero(episode: $episode) {
        name
        friends {
            name
        }
    }
}

Quindi, insieme ad esso, viene inviato il dizionario separato dei valori delle variabili:

{
    "episode": "JEDI"
}

E questa è la risposta restituita dal server:

{
    "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.

Le query leggono e le mutazioni scrivono. Un terzo tipo di operazione riguarda i dati che cambiano mentre il client è ancora connesso.

Che cos'è un abbonamento in GraphQL?

A sottoscrizione È il terzo tipo di operazione nella specifica GraphQL, insieme a query e mutazione. Una query e una mutazione si completano ciascuna con una singola richiesta e risposta. Una sottoscrizione, invece, mantiene una connessione aperta a lungo termine, solitamente tramite WebSockets, in modo che il server invii un nuovo risultato al client ogni volta che si verifica un evento specificato.

La sintassi rispecchia una query, con la parola chiave subscription che sostituisce query:

subscription OnCommentAdded($postId: ID!) {
    commentAdded(postId: $postId) {
        id
        content
        author {
            name
        }
    }
}

Nella pratica, gli abbonamenti si distinguono per tre aspetti principali.

• Basato sugli eventi, non sui sondaggi: Il client manifesta il proprio interesse una sola volta. Non viene inviato altro fino a quando il server non pubblica un evento corrispondente, il che è molto più economico rispetto al polling ripetuto.
• Un campo radice per ogni abbonamento: La specifica consente un solo campo di primo livello, a differenza di una query che può richiederne diversi contemporaneamente.
• piatti mantenuti in piccolo: Invia solo i campi che l'interfaccia deve aggiornare. Chat in tempo reale, notifiche e ticker dei prezzi sono gli utilizzi tipici.

Differenza tra GraphQL e REST

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

App e strumenti open source utilizzati da GraphQL

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

• GatsbyGatsby è un'applicazione basata su GraphQL che può utilizzare dati provenienti da più di una sorgente API GraphQL. Puoi usarlo per sviluppare un'applicazione React statica e lato client.
• GraphiQL: Si tratta di un IDE che si integra con il browser e interagisce anche con l'API di GraphQL. Alcune delle funzioni incluse in GraphiQL sono le mutazioni, l'interrogazione dei dati e il completamento automatico delle query.
• Parco giochi GraphQL: Si tratta di un IDE potente con un editor integrato per la gestione di mutazioni, validazioni, query GraphQL, sottoscrizioni, ecc. Lo sviluppatore può utilizzare questo IDE per visualizzare la struttura dello schema. Il progetto è ora abbandonato e le sue funzionalità sono state integrate in GraphiQL.
• Prisma: Prisma è un database astrattotraclivello di interazione, ora fornito come ORM con tipizzazione sicura, che viene ampiamente abbinato a un server GraphQL per esporre operazioni CRUD (Create, Read, Update e Delete).
• 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.

DOMANDE FREQUENTI