Client GraphQL et Apollo pour la récupération de données et la gestion de l’état

Dans cet article, nous abordons les différences entre les API RESTful et GraphQL et comment nous pouvons exploiter la puissance de GraphQL et Apollo Client pour créer des applications efficaces, évolutives et modernes.

À mesure que le domaine du développement front-end évolue, la complexité des données qu’il gère évolue également. Les méthodes traditionnelles d’accès aux API, telles que les API RESTful, ne suffisent plus en raison de leurs limitations inhérentes. L’un des problèmes majeurs des API RESTful est la récupération excessive. Cela se produit lorsque nous demandons des données et que le serveur renvoie trop de données par rapport à ce dont nous avons besoin, ce qui entraîne un gaspillage de ressources et une augmentation des temps de réponse.

Un autre inconvénient est la sous-récupération, qui se produit lorsqu’une requête renvoie moins de données que nécessaire. Cela conduit souvent à envoyer plusieurs requêtes à différents points de terminaison, ce qui peut avoir un impact négatif sur les performances d’une application. Ces problèmes des API traditionnelles peuvent être facilement résolus avec GraphQL.

GraphQL et Client Apollon sont des outils puissants pour améliorer les performances et gérer efficacement les données des applications. Dans cet article, nous verrons comment utiliser GraphQL et Apollo Client pour une récupération efficace des données et une gestion de l’état dans les applications basées sur des API.

Comprendre GraphQL

GraphQL est un langage de requête, comme l’indique le « QL » dans son nom. Sa syntaxe nous permet d’interroger ou de muter des données sur un serveur. GraphQL peut améliorer les performances et l’évolutivité d’une application en nous aidant à récupérer les données exactes dont nous avons besoin du serveur.

La principale caractéristique de GraphQL est qu’il fournit au client exactement les données qu’il a demandées, contrairement aux API RESTful traditionnelles. Par conséquent, il fournit un moyen plus efficace, puissant et flexible de récupération de données dans les applications pilotées par API.

Différences entre les API GraphQL et RESTful

Prenons un exemple simple pour comprendre la différence entre les API GraphQL et RESTful. Imaginez que vous créez une application de blog simple avec le modèle de données suivant :

1. Utilisateur

2. Poste

• IDENTIFIANT
• Titre
• Contenu
• Auteur (utilisateur)

API RESTful

Pour une API RESTful, vous pouvez avoir des points de terminaison tels que :

• /users (GET) : obtenez une liste de tous les utilisateurs.
• /users/{id} (GET) : obtenez les détails d’un utilisateur spécifique.
• /posts (GET) : obtenez une liste de tous les messages.
• /posts/{id} (GET) : obtenez les détails d’une publication spécifique.

Pour obtenir une liste de publications avec le nom d’utilisateur de l’auteur, vous devrez faire plusieurs demandes. Par exemple:

Obtenez une liste de messages :

# Request 1: Get list of posts
GET /posts

# Response 1:
[
  {
    "id": 1,
    "title": "Introduction to GraphQL",
    "content": "GraphQL is awesome!",
    "authorId": 123
  },
  
]

Pour chaque article, obtenez les détails de l’auteur à l’aide de l’identifiant utilisateur.

# Request 2: Get details of the author for post with ID
GET /users/123

# Response 2:
{
  "id": 123,
  "username": "john_doe",
  "email": "john@example.com"
}

GraphQL

Avec GraphQL, vous pouvez demander les données spécifiques dont vous avez besoin via une seule requête, comme le montre l’exemple ci-dessous :

# GraphQL Query
query {
  posts {
    id
    title
    content
    author {
      id
      username
    }
  }
}


{
  "data": {
    "posts": [
      {
        "id": 1,
        "title": "Introduction to GraphQL",
        "content": "GraphQL is awesome!",
        "author": {
          "id": 123,
          "username": "john_doe"
        }
      },
      
    ]
  }
}

GraphQL élimine les problèmes de sur-récupération et de sous-récupération de données en vous aidant à obtenir exactement ce que vous avez demandé. Si vous regardez attentivement notre exemple d’API REST ci-dessus, vous remarquerez plusieurs points de terminaison. Chaque point de terminaison renvoie sa structure de données, incluant potentiellement des informations dont l’application n’a pas besoin.

Pour obtenir une liste de publications avec le nom d’utilisateur de l’auteur, vous devez faire au moins deux demandes distinctes. Cela peut conduire à une redondance du réseau dans des applications plus complexes. Cependant, GraphQL offre une approche plus efficace et flexible de la récupération de données avec un seul point de terminaison et des requêtes de données précises pour améliorer les performances et l’efficacité du réseau.

Concepts de base de GraphQL

Langage de définition de schéma (SDL)

Le schéma est essentiellement le modèle de l’API GraphQL. Cela peut être considéré comme un contrat entre le client et le serveur. Le schéma précise comment les données peuvent être demandées et quels types de réponses doivent être attendues.

Un schéma décrit la structure et la relation de vos données. Cela peut être vu comme une carte de tout ce que votre API expose. Avec le schéma, les clients voient exactement quelles données sont disponibles et peuvent demander des sous-ensembles spécifiques avec des requêtes optimisées. Il fournit un moyen concis et lisible par l’homme d’exprimer les types, requêtes et mutations qui composent l’API, protégeant ainsi le client des complexités du backend. Vous pouvez en savoir plus sur schémas ici.

Requêtes

Dans GraphQL, les requêtes sont utilisées pour demander des données spécifiques à un serveur GraphQL. Contrairement aux API REST traditionnelles, qui reçoivent souvent un ensemble fixe de données, GraphQL permet aux clients de définir la structure de la réponse et de demander uniquement les informations dont ils ont besoin. Les requêtes dans GraphQL sont écrites en utilisant une syntaxe qui ressemble à la forme des données que vous souhaitez récupérer.

Regardons un exemple de requête pour récupérer une liste d’utilisateurs et leurs noms :

query GetUsers {
  users {
    id
    name
  }
}
The response to the query:
{
  "data": {
    "users": [
      {
        "id": "123",
        "name": "John Doe"
      },
      {
        "id": "456",
        "name": "Jane Doe"
      }
    ]
  }
}

Modifier les données avec des mutations

En plus de récupérer des données à partir de notre API GraphQL, nous pouvons également muter les données. Autrement dit, nous pouvons créer, mettre à jour et supprimer des données de notre API. Les mutations sont des opérations permettant de modifier les données sur le serveur. Voici un exemple simple de mutations pour créer et mettre à jour des données :

mutation CreateUser($name: String!, $email: String!) {
  createUser(name: $name, email: $email) {
    id
    name
  }
}

L’extrait de code ci-dessus crée un nouvel utilisateur.

mutation UpdatePost($id: ID!, $title: String!) {
  updatePost(id: $id, title: $title) {
    id
    title
  }
}

Cette mutation met à jour le titre d’un article de blog spécifique.

Abonnements

Les abonnements permettent aux clients et aux serveurs de communiquer en temps réel. Alors que les requêtes sont utilisées pour récupérer des données et les mutations pour modifier les données, les abonnements permettent aux clients de recevoir des mises à jour en temps réel lorsque certains événements se produisent sur le serveur. Ceci est utile pour créer des applications nécessitant des données en direct, telles que des applications de chat, des notifications en direct ou tout scénario dans lequel vous souhaitez envoyer des mises à jour aux clients dès qu’elles sont disponibles.

Présentation du client Apollo

Client Apollon est une puissante bibliothèque JavaScript utilisée pour gérer l’état et interagir avec les API GraphQL dans les applications côté client. Il s’agit d’un élément clé de l’écosystème Apollo, qui comprend également des composants côté serveur tels que Serveur Apollo. Apollo Client simplifie le processus de travail avec GraphQL en fournissant des outils pour gérer l’état des applications, effectuer des requêtes sur un serveur GraphQL et gérer les mises à jour en temps réel via des abonnements.

Intégration du client Apollo dans une application React

Nous allons créer une application simple qui utilise Apollo Client et l’API GraphQL dans une application React. Nous utiliserons le API Rick et Morty.

Configuration du projet

Pour créer un projet React, exécutez la commande suivante sur votre terminal :

npx create-react-app apollo-graphql-demo
cd apollo-graphql-demo
npm start

Installation et configuration du client Apollo

Pour configurer Apollo Client dans notre projet, nous devons installer les dépendances nécessaires. Exécutez la commande suivante dans votre terminal :

npm install @apollo/client graphql

Initialiser une instance d’ApolloClient

Pour initialiser ApolloClient, dans votre src dossier, créez un Graphql dossier. Dans le dossier, créez un fichier nommé apolloClient.jset ajoutez-y le code suivant :

import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
const client = new ApolloClient({
  link: new HttpLink({ uri: "https://rickandmortyapi.com/graphql" }),
  cache: new InMemoryCache(),
});
export default client;

Le code ci-dessus initialise une nouvelle instance d’ApolloClient avec un lien vers l’API Rick et Morty GraphQL et configure un cache en mémoire pour les résultats des requêtes.

Définir des requêtes GraphQL

Créez un fichier dans votre Grapghql dossier nommé queries.jset ajoutez-y ce qui suit :

import gql from "graphql-tag";
export const GET_CHARACTERS = gql`
  query GetCharacters {
    characters {
      results {
        id
        name
        status
        species
        image
      }
    }
  }
`;

Le code ci-dessous définit une requête GraphQL en utilisant le gql fonction. Le GET_CHARACTERS la constante se voit attribuer le résultat de l’appel de la gql \***\* fonctionner avec un modèle littéral. Ce modèle contient une requête GraphQL nommée GetCharacters. La requête est structurée pour récupérer des informations sur les personnages et inclut les champs id, name, status, species et image \*\*** pour chaque personnage.

Enveloppez votre application racine avec le fournisseur client Apollo

Maintenant que nous avons défini avec succès nos requêtes, l’étape suivante consiste à envelopper notre application React avec un ApolloProvider.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { ApolloProvider } from "@apollo/client";
import client from "./aplloClient";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
    ,
  </React.StrictMode>
);

Récupérez vos données

Nous allons utiliser le useQuery crochet pour demander nos données. Le useQuery le hook est utilisé pour exécuter des requêtes GraphQl dans un composant React. Cela simplifie le processus d’envoi de requêtes GraphQL à un serveur et de gestion de la réponse.

Pour afficher les données dans notre application, créez un dossier nommé components. Dans le dossier, créez un fichier nommé Character.jset ajoutez-y ce qui suit :

import React from "react";
import { useQuery } from "@apollo/client";
import { GET_CHARACTERS } from "../graphql/queries";
function Characters() {
  const { loading, error, data } = useQuery(GET_CHARACTERS);
  if (loading) return <p>Loading characters...</p>;
  if (error) return <p>Error fetching characters</p>;
  return (
    <div>
      <h2>Character List</h2>
      <ul className="characters-grid">
        {data.characters.results.map((character) => (
          <li key={character.id}>
            <img src={character.image} alt={character.name} />
            <div>
              <strong>{character.name}</strong>
              <p>Status: {character.status}</p>
              <p>Species: {character.species}</p>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}
export default Characters;

Appelons ensuite le Character.js composant dans le App.js déposer:

import "./App.css";
import Characters from "./components/Characters";
function App() {
  return (
    <div className="App">
      <h1>Rick and Morty Characters</h1>
      <Characters />
    </div>
  );
}
export default App;

Si vous avez atteint ce point, vous devriez voir la liste des personnages dans l’API Rick et Morty, comme indiqué ci-dessous.

Conclusion

Dans cet article, nous avons couvert les différences entre les API Restful et GraphQL et comment nous pouvons exploiter la puissance de GraphQL et Apollo Client pour créer des applications efficaces, évolutives et modernes.