GraphQL - Apollo Client

Abbiamo utilizzato Apollo Server per creare le specifiche graphql sul lato server. È facile e veloce costruire un server GraphQL pronto per la produzione. Ora capiamo il lato client.

Apollo Client è il modo migliore per utilizzare GraphQL per creare applicazioni client. Il client è progettato per aiutare lo sviluppatore a creare rapidamente un'interfaccia utente che recupera i dati con GraphQL e può essere utilizzata con qualsiasi front-end JavaScript.

Apollo Client supporta le seguenti piattaforme:

La memorizzazione nella cache è una delle caratteristiche principali di Apollo Client. apollo-boost è un comodo pacchetto che include un sacco di altre dipendenze.

Illustrazione

Vediamo come utilizzare Apollo Client per creare applicazioni client utilizzando i seguenti passaggi:

Configurazione del server

Dobbiamo seguire i passaggi seguenti per configurare un server:

Passaggio 1: scaricare e installare le dipendenze richieste per il progetto

Crea una cartella apollo-server-app. Cambia la tua directory in apollo-server-app dal terminale. Quindi, seguire i passaggi da 3 a 5 spiegati nel capitolo Configurazione dell'ambiente.

Passaggio 2: creare uno schema

Inserisci schema.graphql file nella cartella del progetto apollo-server-app e aggiungi il seguente codice -

type Query
{
   students:[Student]
}

type Student {
   id:ID!
   firstName:String
   lastName:String
   college:College
}

type College {
   id:ID!
   name:String
   location:String
   rating:Float
}

Passaggio 3: aggiungere i resolver

Crea un file resolvers.js nella cartella del progetto e aggiungi il seguente codice -

const db = require('./db')

const Query = {
   //resolver function for students returns list
   students:() => db.students.list(),
}

const Student = {
   college:(root) => {
      return db.colleges.get(root.collegeId);
   }
}
module.exports = {Query,Student}

Passaggio 4: eseguire l'applicazione

Creare un server.jsfile. Fare riferimento al passaggio 8 nel capitolo Configurazione dell'ambiente. Esegui il comando  npm start  nel terminale. Il server sarà attivo e funzionante sulla porta 9000. Qui useremo GraphiQL come client per testare l'applicazione.

Apri il browser e digita l'URL http://localhost:9000/graphiql. Digita la seguente query nell'editor.

{
   students{
      id
      firstName
      college{
         name
      }
   }
}

La risposta per la query è la seguente:

{
   "data": {
      "students": [
         {
            "id": "S1001",
            "firstName": "Mohtashim",
            "college": {
               "name": "CUSAT"
            }
         },
         
         {
            "id": "S1002",
            "firstName": "Kannan",
            "college": {
               "name": "AMU"
            }
         },
         
         {
            "id": "S1003",
            "firstName": "Kiran",
            "college": {
               "name": "AMU"
            }
         }
      ]
   }
}

Configurazione del client

Apri un nuovo terminale per il cliente. Il terminale del server deve essere mantenuto in esecuzione prima di eseguire l'applicazione client. L'applicazione React verrà eseguita sulla porta numero 3000 e l'applicazione server sulla porta numero 9000.

Passaggio 1: creare un'applicazione React

Nel terminale del client, digita il seguente comando:

npx create-react-app hello-world-client

Questo installerà tutto il necessario per una tipica applicazione React. L'utilità npx e lo strumento create-react-app creano un progetto con nomehello-world-client. Una volta completata l'installazione, apri il progetto in VSCode.

Passaggio 2: avvia hello-world-client

Cambia il percorso della cartella corrente nel terminale in hello-world-client. Digita npm start per avviare il progetto. Questo eseguirà un server di sviluppo sulla porta 3000 e aprirà automaticamente il browser e caricherà la pagina dell'indice.

Questo è mostrato nella schermata riportata di seguito:

Passaggio 3: installare le librerie client di Apollo

Per installare un client Apollo, aprire un nuovo terminale e trovarsi nel percorso della cartella del progetto corrente. Digita il seguente comando:

npm install apollo-boost graphql

Questo scaricherà le librerie graphql per il lato client e anche il pacchetto Apollo Boost. Possiamo effettuare un controllo incrociato digitando npm view nelle dipendenze di apollo-boost. Questo avrà molte dipendenze come mostrato di seguito -

{
   'apollo-cache': '^1.1.15',
   'apollo-cache-inmemory': '^1.2.8',
   'apollo-client': '^2.4.0',
   'apollo-link': '^1.0.6',
   'apollo-link-error': '^1.0.3',
   'apollo-link-http': '^1.3.1',
   'apollo-link-state': '^0.4.0',
   'graphql-tag': '^2.4.2'
}

Possiamo vedere chiaramente che la libreria Apollo-Client è installata.

Passaggio 4: modificare il componente dell'app nel file index.js

Con Apollo Client, possiamo chiamare direttamente il server senza utilizzare l'API di recupero. Inoltre, le query e le mutazioni non devono essere incorporate in una stringa creata con la notazione back tick. Questo perché, ilgqlla funzione analizza direttamente le query. Ciò significa che un programmatore può scrivere direttamente query nello stesso modo quando scrive query nello strumento GraphiQL. gql è una funzione tag che analizzerà la stringa del modello scritta in notazione back tick nell'oggetto query graphql. Il metodo di query di Apollo Client restituisce una promessa.

Il seguente frammento di codice mostra come importare il client Apollo:

import {ApolloClient, HttpLink, InMemoryCache} from 'apollo-boost'

const endPointUrl = 'http://localhost:9000/graphql'
const client = new ApolloClient({
   link: new HttpLink({uri:endPointUrl}),
   cache:new InMemoryCache()
});

Nel capitolo precedente, abbiamo discusso come utilizzare l'API di recupero per le richieste HTTP. Il codice seguente mostra come usaregqlfunzione. IlloadStudentsAsync la funzione utilizza il client graphql per interrogare il server.

async function loadStudentsAsync() {
   const query = gql`
   {
      students{
         id
         firstName
         lastName
         college{
            name
         }
      }
   }`
   const {data} = await client.query({query}) ;
   return data.students;
}

Hai solo bisogno di mantenere il file index.js in srccartella e index.html nella cartella pubblica; tutti gli altri file generati automaticamente possono essere rimossi.

Di seguito viene fornita la struttura delle directory:

hello-world-client /
   -->node_modules
   -->public
         index.html
   -->src
         index.js
   -->package.json

Di seguito è riportato il file index.js nell'applicazione React -

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

// apollo client

import {ApolloClient, HttpLink, InMemoryCache} from 'apollo-boost'
import gql from 'graphql-tag'

const endPointUrl = 'http://localhost:9000/graphql'
const client = new ApolloClient({
   link: new HttpLink({uri:endPointUrl}),
   cache:new InMemoryCache()
});

async function loadStudentsAsync() {
   const query = gql`
   {
      students{
         id
         firstName
         lastName
         college{
            name
         }
      }
   }
   `
   const {data} = await client.query({query}) ;
   return data.students;
}
class  App  extends Component {
   constructor(props) {
      super(props);
      this.state = {
         students:[]
      }
      this.studentTemplate =  [];
   }
   async loadStudents() {
      const studentData =  await loadStudentsAsync();
      this.setState({
         students: studentData
      })
      console.log("loadStudents")
   }
   render() {
      return(
         <div>
            <input type = "button"  value = "loadStudents" onClick = {this.loadStudents.bind(this)}/>
            <div>
               <br/>
               <hr/>
               <table border = "3">
                  <thead>
                     <tr>
                        <td>First Name</td>
                        <td>Last Name</td>
                        <td>college Name</td>
                     </tr>
                  </thead>
                  
                  <tbody>
                     {
                        this.state.students.map(s => {
                           return (
                              <tr key = {s.id}>
                                 <td>
                                    {s.firstName}
                                 </td>
                                 <td>
                                    {s.lastName}
                                 </td>
                                 <td>
                                    {s.college.name}
                                 </td>
                              </tr>
                           )
                        })
                     }
                  </tbody>
               </table>
            </div>
         </div>
      )
   }
}
ReactDOM.render(<App/>, document.getElementById('root'));

L'applicazione React caricherà gli studenti dal server GraphQL, dopo aver fatto clic sul pulsante loadStudents come mostrato di seguito -