GraphQL - Client Apollo
Nous avons utilisé Apollo Server pour créer une spécification graphql côté serveur. Il est rapide et facile de créer un serveur GraphQL prêt pour la production. Maintenant, comprenons le côté client.
Apollo Client est le meilleur moyen d'utiliser GraphQL pour créer des applications clientes. Le client est conçu pour aider les développeurs à créer rapidement une interface utilisateur qui récupère les données avec GraphQL et peut être utilisée avec n'importe quel frontal JavaScript.
Apollo Client prend en charge les plates-formes suivantes -
| N ° Sr. | Plateforme et cadre |
|---|---|
| 1 | Javascript Réagir, angulaire, vue, météore, braise |
| 2 | WebComponents Polymère, lit-apollo |
| 3 | Native Mobile Android natif avec Java, iOS natif avec Swift |
La mise en cache est l'une des principales fonctionnalités d'Apollo Client. apollo-boost est un package pratique qui apporte un tas d'autres dépendances.
Illustration
Voyons comment utiliser Apollo Client pour créer des applications clientes en suivant les étapes suivantes -
Configuration du serveur
Nous devons suivre les étapes ci-dessous pour configurer un serveur -
Étape 1 - Téléchargez et installez les dépendances requises pour le projet
Créez un dossier apollo-server-app. Changez votre répertoire en apollo-server-app depuis le terminal. Ensuite, suivez les étapes 3 à 5 expliquées dans le chapitre Configuration de l'environnement.
Étape 2 - Créer un schéma
Ajouter schema.graphql fichier dans le dossier du projet apollo-server-app et ajoutez le code suivant -
type Query
{
students:[Student]
}
type Student {
id:ID!
firstName:String
lastName:String
college:College
}
type College {
id:ID!
name:String
location:String
rating:Float
}Étape 3 - Ajouter des résolveurs
Créer un fichier resolvers.js dans le dossier du projet et ajoutez le code suivant -
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}Étape 4 - Exécutez l'application
Créer un server.jsfichier. Reportez-vous à l'étape 8 du chapitre Configuration de l'environnement. Exécutez la commande npm start dans le terminal. Le serveur sera opérationnel sur le port 9000. Ici, nous utiliserons GraphiQL comme client pour tester l'application.
Ouvrez le navigateur et saisissez l'URL http://localhost:9000/graphiql. Tapez la requête suivante dans l'éditeur.
{
students{
id
firstName
college{
name
}
}
}La réponse à la requête est la suivante -
{
"data": {
"students": [
{
"id": "S1001",
"firstName": "Mohtashim",
"college": {
"name": "CUSAT"
}
},
{
"id": "S1002",
"firstName": "Kannan",
"college": {
"name": "AMU"
}
},
{
"id": "S1003",
"firstName": "Kiran",
"college": {
"name": "AMU"
}
}
]
}
}Configuration du client
Ouvrez un nouveau terminal pour le client. Le terminal serveur doit continuer à fonctionner avant d'exécuter l'application client. L'application React fonctionnera sur le port numéro 3000 et l'application serveur sur le port numéro 9000.
Étape 1 - Créer une application React
Dans le terminal client, tapez la commande suivante -
npx create-react-app hello-world-clientCela installera tout le nécessaire pour une application de réaction typique. L'utilitaire npx et l'outil create-react-app créent un projet avec un nomhello-world-client. Une fois l'installation terminée, ouvrez le projet dans VSCode.
Étape 2 - Démarrez hello-world-client
Modifiez le chemin du dossier actuel dans le terminal en hello-world-client. Tapez npm start pour lancer le projet. Cela exécutera un serveur de développement sur le port 3000 et ouvrira automatiquement le navigateur et chargera la page d'index.
Ceci est montré dans la capture d'écran ci-dessous -
Étape 3 - Installer les bibliothèques clientes Apollo
Pour installer un client Apollo, ouvrez un nouveau terminal et soyez dans le chemin du dossier du projet actuel. Tapez la commande suivante -
npm install apollo-boost graphqlCela téléchargera les bibliothèques graphql côté client ainsi que le package Apollo Boost. Nous pouvons vérifier cela en tapant npm view dans les dépendances apollo-boost. Cela aura de nombreuses dépendances comme indiqué ci-dessous -
{
'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'
}Nous pouvons clairement voir que la bibliothèque Apollo-Client est installée.
Étape 4 - Modifier le composant d'application dans le fichier index.js
Avec Apollo Client, nous pouvons appeler directement le serveur sans utiliser Fetch API. En outre, les requêtes et les mutations ne doivent pas être incorporées dans une chaîne faite avec une notation de graduation arrière. C'est parce que, legqlLa fonction analyse directement les requêtes. Cela signifie qu'un programmeur peut directement écrire des requêtes de la même manière lors de l'écriture de requêtes dans l'outil GraphiQL. gql est une fonction de balise qui analysera la chaîne de modèle écrite en notation rétrograde dans l'objet de requête graphql. La méthode de requête Apollo Client renvoie une promesse.
L'extrait de code suivant montre comment importer Apollo Client -
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()
});Dans le chapitre précédent, nous avons expliqué comment utiliser Fetch API pour les requêtes HTTP. Le code suivant montre comment utilisergqlfonction. leloadStudentsAsync La fonction utilise le client graphql pour interroger le serveur.
async function loadStudentsAsync() {
const query = gql`
{
students{
id
firstName
lastName
college{
name
}
}
}`
const {data} = await client.query({query}) ;
return data.students;
}Il vous suffit de garder le index.js dans srcdossier et index.html dans le dossier public; tous les autres fichiers générés automatiquement peuvent être supprimés.
La structure des répertoires est donnée ci-dessous -
hello-world-client /
-->node_modules
-->public
index.html
-->src
index.js
-->package.jsonVoici le index.js dans l'application 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'application react chargera les étudiants à partir du serveur GraphQL, une fois que nous cliquons sur le bouton loadStudents comme indiqué ci-dessous -
