Apollo Client est une bibliothèque de gestion d'état complète pour les applications JavaScript. C'est un outil puissant car il peut être utilisé à la fois côté back-end et front-end. Dans ce didacticiel, nous allons l'utiliser sur les deux en créant d'abord un serveur Apollo GraphQL avec Node JS, puis en consommant les données côté client à l'aide de React JS.

Si vous êtes nouveau sur GraphQl, ce tutoriel pourrait vous aider. Sinon, commençons.

• Construire le serveur avec Apollo, Node et GraphQl

  • Schéma GraphQl
  • Résolveurs GraphQl
  • Créer le serveur Apollo

• Construire le côté client avec React

  • Connexion de React à Apollo
  • Récupération des données
  • Affichage des données

Construire le serveur avec Apollo, Node et GraphQl

Dans ce guide, je vais utiliser l'API Github pour avoir des données à afficher, et cette opération sera effectuée par le serveur GraphQl construit avec Apollo et Node JS. Et pour ce faire, nous devons exécuter la commande suivante sur le terminal pour configurer un nouveau projet Node JS.

  yarn init

Une fois la configuration terminée, nous pouvons maintenant installer les packages nécessaires en exécutant cette commande.

  yarn add apollo-server graphql axios

Très bien, nous avons maintenant tout ce dont nous avons besoin pour construire un serveur, créons d'abord un nouveau fichier app.js à la racine qui sera le point d'entrée de notre serveur.

Ensuite, nous devons définir un schéma Graphql qui reflète à quoi nos données devraient ressembler.

Schéma GraphQl

Un schéma décrit la forme de votre graphique de données. Il définit un ensemble de types avec des champs qui sont remplis à partir de vos bases de données principaux. Ajoutons donc un nouveau schéma dans le fichier app.js.

• app.js

const { ApolloServer, gql } = require("apollo-server")
const axios = require("axios")

const typeDefs = gql`
  type User {
    id: ID
    login: String
    avatar_url: String
  }

  type Query {
    users: [User]
  }
`

Comme vous pouvez le voir nous n'utilisons pas toutes les données fournies par l'API Github. Nous avons juste besoin de l'ID qui sera utilisé comme clé de référence sur l'application React, le login et avatar_url. Nous avons également une requête users qui renvoie un tableau d'utilisateurs.

Maintenant que nous avons un schéma GraphQL, il est temps de construire les résolveurs correspondants pour terminer l'opération de requête.

Résolveurs GraphQl

Un résolveur est une collection de fonctions qui permet de générer une réponse à partir d'une requête GraphQL. Ajoutons donc un nouveau résolveur dans le fichier app.js.

• app.js

const resolvers = {
  Query: {
    users: async () => {
      try {
        const users = await axios.get("https://api.github.com/users")
        return users.data.map(({ id, login, avatar_url }) => ({
          id,
          login,
          avatar_url,
        }))
      } catch (error) {
        throw error
      }
    },
  },
}

Un résolveur doit correspondre par son nom au schéma approprié. Par conséquent, ici users fait référence à la requête users définie dans notre schéma. C'est une fonction qui récupère les données de l'API à l'aide de axios et renvoie comme prévu l'identifiant, la connexion et l'avatar_url. Et cette opération peut prendre du temps pour terminer, c'est pourquoi async/wait est utilisé ici pour la gérer en conséquence.

Avec cela, nous pouvons maintenant créer le serveur Apollo dans la section suivante.

Créer le serveur Apollo

Si vous vous souvenez, dans le fichier app.js, nous avions importé ApolloServer du paquet apollo-server, c'est un constructeur qui reçoit un objet en argument. Et cet objet doit contenir le schéma et le résolveur pour pouvoir créer le serveur.

Donc, ajustons un peu app.js avec ApolloServer.

• app.js

const server = new ApolloServer({
  typeDefs,
  resolvers,
})
//  typeDefs: typeDefs,
//  resolvers: resolvers
server.listen().then(({ url }) => console.log(`Server ready at ${url}`))

Ici, nous passons en paramètre un objet qui contient le schéma et le résolveur à ApolloServer pour créer le serveur puis on l'écoute pour savoir s'il est lancé ou pas. Avec cela en place, nous avons maintenant un serveur fonctionnel avec lequel travailler.

Vous pouvez déjà jouer avec et envoyer des requêtes à l'aide de GraphQL Playground en exécutant cette commande:

  yarn start

Vous pouvez maintenant le prévisualiser sur http://localhost:400

• Le fichier app.js complet

const { ApolloServer, gql } = require("apollo-server")
const axios = require("axios")

const typeDefs = gql`
  type User {
    id: ID
    login: String
    avatar_url: String
  }

  type Query {
    users: [User]
  }
`

const resolvers = {
  Query: {
    users: async () => {
      try {
        const users = await axios.get("https://api.github.com/users")
        return users.data.map(({ id, login, avatar_url }) => ({
          id,
          login,
          avatar_url,
        }))
      } catch (error) {
        throw error
      }
    },
  },
}

const server = new ApolloServer({
  typeDefs,
  resolvers,
})

server.listen().then(({ url }) => console.log(`Server ready at ${url}`))

Un serveur seul ne fait pas grand-chose, nous devons ajouter un script de démarrage dans le fichier package.json comme vous l'avez deviné pour démarrer le serveur.

• package.json

  // first add nodemon: yarn add nodemon --dev
  "scripts": {
    "start": "nodemon src/index.js"
  }

Avec cela, nous avons maintenant un serveur pour récupérer les données de l'API Github, il est temps de passer du côté client et de consommer les données.

Faisons le

Construire le côté client avec React

La première chose que nous devons faire est de créer une nouvelle application React en exécutant dans le terminal la commande suivante.

  npx create-react-app client-react-apollo

Ensuite, nous devons installer les packages Apollo et GraphQl.

  yarn add apollo-boost @apollo/react-hooks graphql

Maintenant, nous pouvons connecter Apollo avec notre application React en mettant à jour le fichier index.js.

Connexion de React à Apollo

• index.js

import React from 'react';
import ReactDOM from 'react-dom';
import ApolloClient from 'apollo-boost'
import { ApolloProvider } from '@apollo/react-hooks';

import App from './App';
import './index.css';
import * as serviceWorker from './serviceWorker';

const client = new ApolloClient({
  uri: 'https://7sgx4.sse.codesandbox.io'
})


ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

Comme vous pouvez le voir, nous commençons par importer ApolloClient et ApolloProvider. Le premier nous aide à informer Apollo de l'URL à utiliser lors de la récupération des données. Et si aucun uri n'est passé à ApolloClient, il prendra le nom de domaine actuel plus / graphql. Le second est le fournisseur qui s'attend à recevoir l'objet client pour pouvoir connecter Apollo à React.

Cela dit, nous pouvons maintenant créer un composant qui affiche les données.

Récupération des données

• App.js

import React from "react"
import { useQuery } from "@apollo/react-hooks"
import gql from "graphql-tag"
import "./App.css"

const GET_USERS = gql`
  {
    users {
      id
      login
      avatar_url
    }
  }
`

Ici, nous avons une simple requête GraphQL qui récupère les données. Cette requête sera transmise ultérieurement à useQuery pour indiquer à Apollo quelles données extraire.

• App.js

const User = ({ user: { login, avatar_url } }) => (
  <div className="Card">
    <div>
      <img alt="avatar" className="Card--avatar" src={avatar_url} />
      <h1 className="Card--name">{login}</h1>
    </div>
    <a href={`https://github.com/${login}`} className="Card--link">
      See profile
    </a>
  </div>
)

Ce composant de présentation sera utilisé pour afficher un utilisateur. Il reçoit les données du composant App et les affiche.

Affichage des données

• App.js

function App() {
  const { loading, error, data } = useQuery(GET_USERS)

  if (error) return <h1>Something went wrong!</h1>
  if (loading) return <h1>Loading...</h1>

  return (
    <main className="App">
      <h1>Github | Users</h1>
      {data.users.map(user => (
        <User key={user.id} user={user} />
      ))}
    </main>
  )
}

export default App

Le hook useQuery fourni par Apollo reçoit la requête GraphQL et renvoie trois états: le chargement, l'erreur et les données. Si les données sont récupérées avec succès, nous les transmettons au composant User sinon nous lançons une erreur.

• Le fichier App.js complet

import React from "react"
import { useQuery } from "@apollo/react-hooks"
import gql from "graphql-tag"
import "./App.css"

const GET_USERS = gql`
  {
    users {
      id
      login
      avatar_url
    }
  }
`

const User = ({ user: { login, avatar_url } }) => (
  <div className="Card">
    <div>
      <img alt="avatar" className="Card--avatar" src={avatar_url} />
      <h1 className="Card--name">{login}</h1>
    </div>
    <a href={`https://github.com/${login}`} className="Card--link">
      See profile
    </a>
  </div>
)

function App() {
  const { loading, error, data } = useQuery(GET_USERS)

  if (error) return <h1>Something went wrong!</h1>
  if (loading) return <h1>Loading...</h1>

  return (
    <main className="App">
      <h1>Github | Users</h1>
      {data.users.map(user => (
        <User key={user.id} user={user} />
      ))}
    </main>
  )
}

export default App

Génial! avec cela, nous avons maintenant terminé la construction d'une application Apollo GraphQL Full-stack en utilisant React et Node JS.

Prévisualiser le serveur Apollo GraphQL ici

Prévisualiser l'application React ici

Trouver le code source ici

Merci d'avoir lu.

! félicitations