apollographql/apollo-client

Que fait apollo-client ?

Guide pour créer des applications React avec Apollo Client 4.x. Utilisez cette compétence pour : (1) configurer Apollo Client dans un projet React, (2) écrire des requêtes ou mutations GraphQL avec des hooks, (3) configurer le cache ou les politiques de cache, (4) gérer l'état local avec des variables réactives, (5) résoudre les erreurs ou problèmes de performance liés à Apollo Client.

Introduction

Apollo Client est une bibliothèque de gestion d'état complète pour JavaScript. Elle vous permet de gérer à la fois les données locales et distantes avec GraphQL, et de les utiliser pour construire des interfaces utilisateur.

Installation

npm install @apollo/client graphql

@apollo/client inclut le client lui-même, le cache en mémoire, et les hooks React. graphql est une dépendance nécessaire pour analyser les requêtes GraphQL.

Configuration de base

Création du client

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache(),
});

Intégration avec React

import React from 'react';
import { ApolloProvider } from '@apollo/client';

function App() {
  return (
    <ApolloProvider client={client}>
      <div>
        <h2>Mon application</h2>
      </div>
    </ApolloProvider>
  );
}

Requêtes GraphQL

Utilisation du hook useQuery

import { useQuery, gql } from '@apollo/client';

const GET_DOGS = gql`
  query GetDogs {
    dogs {
      id
      breed
    }
  }
`;

function Dogs({ onDogSelected }) {
  const { loading, error, data } = useQuery(GET_DOGS);

  if (loading) return <p>Chargement...</p>;
  if (error) return <p>Erreur : {error.message}</p>;

  return (
    <select name="dog" onChange={onDogSelected}>
      {data.dogs.map((dog) => (
        <option key={dog.id} value={dog.breed}>
          {dog.breed}
        </option>
      ))}
    </select>
  );
}

Mutations GraphQL

Utilisation du hook useMutation

import { useMutation, gql } from '@apollo/client';

const ADD_TODO = gql`
  mutation AddTodo($type: String!) {
    addTodo(type: $type) {
      id
      type
    }
  }
`;

function AddTodo() {
  let input;
  const [addTodo, { data }] = useMutation(ADD_TODO);

  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault();
          addTodo({ variables: { type: input.value } });
          input.value = '';
        }}
      >
        <input
          ref={node => {
            input = node;
          }}
        />
        <button type="submit">Ajouter une tâche</button>
      </form>
    </div>
  );
}

Configuration du cache

Apollo Client utilise un cache normalisé (InMemoryCache) pour stocker les résultats des requêtes. Vous pouvez configurer les politiques de cache pour contrôler le comportement de mise en cache.

Politiques de requête

const { loading, error, data } = useQuery(GET_DOGS, {
  fetchPolicy: 'cache-and-network', // Valeur par défaut : 'cache-first'
});

Les politiques disponibles :

• cache-first : Vérifie d'abord le cache ; si les données existent, les renvoie, sinon les récupère depuis le réseau.
• cache-and-network : Renvoie toujours les données du cache (si disponibles) et récupère en arrière-plan les mises à jour.
• network-only : Ignore le cache et récupère toujours depuis le réseau.
• cache-only : Renvoie uniquement les données du cache ; ne fait jamais de requêtes réseau.
• no-cache : Récupère depuis le réseau, mais ne met pas en cache la réponse.
• standby : Utilisé pour les requêtes qui ne doivent pas être mises à jour automatiquement.

Gestion de l'état local

Apollo Client permet de gérer l'état local à l'aide de variables réactives.

Création d'une variable réactive

import { makeVar } from '@apollo/client';

export const cartItemsVar = makeVar([]);

Lecture et mise à jour d'une variable réactive

import { cartItemsVar } from './cache';

// Lecture
const cartItems = cartItemsVar();

// Mise à jour
cartItemsVar([...cartItems, { id: 1, name: 'Nouvel article' }]);

Utilisation dans les requêtes

import { useReactiveVar } from '@apollo/client';

function Cart() {
  const cartItems = useReactiveVar(cartItemsVar);

  return (
    <ul>
      {cartItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

Dépannage

Erreurs réseau

• Vérifiez que l'URL de votre API GraphQL est correcte.
• Utilisez les outils de développement (DevTools) de votre navigateur pour inspecter les requêtes réseau.
• Assurez-vous que les en-têtes d'authentification sont correctement définis.

Performances

• Utilisez la politique cache-first pour éviter des requêtes réseau inutiles.
• Évitez les re-rendus excessifs en optimisant vos composants.
• Utilisez useQuery avec des options comme skip pour éviter des requêtes inutiles.

Invalidation du cache

• Si les données du cache ne sont pas à jour, utilisez refetchQueries ou client.refetch.
• Utilisez update dans useMutation pour mettre à jour le cache localement après une mutation.

Pour plus d'informations, consultez la documentation officielle d'Apollo Client.