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:
| Sr.No. | Piattaforma e framework |
|---|---|
| 1 | Javascript React, Angular, Vue, Meteor, Ember |
| 2 | WebComponents Polimero, lit-apollo |
| 3 | Native Mobile Android nativo con Java, iOS nativo con Swift |
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-clientQuesto 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 graphqlQuesto 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.jsonDi 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 -
