Configurer Apollo Client dans React

Installez @apollo/client et graphql. Le paquet graphql est une dépendance homologue requise par Apollo Client pour analyser les documents de requête avec la balise de modèle gql.

Pour les projets TypeScript, les deux paquets fournissent leurs propres définitions de types ; aucun paquet @types n'est nécessaire.

Instanciez ApolloClient avec un cache et un lien. La configuration la plus simple est la suivante : new ApolloClient({ cache: new InMemoryCache(), uri: '/graphql' }). L'abréviation uri crée un HttpLink en interne.

Pour davantage de contrôle, construisez manuellement la chaîne de liens et transmettez-la à l'option link au lieu de uri.

Entourez votre application React d'un ApolloProvider avec la propriété client : ApolloProvider client={client}. Cela rend l'instance Apollo Client accessible à tous les composants descendants via le contexte React.

Chaque appel à useQuery et useMutation dans l'arbre des composants utilise automatiquement ce client, sans transmission de propriétés de composant en composant.

InMemoryCache est le cache par défaut d'Apollo Client. Il normalise les données récupérées par type et ID, en stockant chaque entité sous une clé de cache unique (par exemple, User:1). Lorsqu'une requête récupère User:1, toutes les lectures ultérieures de cette entité reçoivent les données mises à jour.

Cette normalisation signifie que la mise à jour d'un utilisateur dans une mutation met automatiquement à jour chaque résultat de requête qui inclut cet utilisateur, sans code supplémentaire.

HttpLink gère le transport HTTP entre Apollo Client et votre serveur GraphQL. Configurez-le avec uri et, éventuellement, fetch, headers et credentials.

Dans les cas avancés, des liens répartiteurs dirigent différentes opérations vers différents points de terminaison : les abonnements passent par WebSocket (WebSocketLink), tandis que les requêtes et les mutations passent par HTTP (HttpLink).

Importez setContext depuis @apollo/client/link/context. Créez un lien d'authentification : const authLink = setContext((_, { headers }) => ({ headers: { ...headers, authorization: 'Bearer ' + getToken() } })). Enchaînez-le avant HttpLink : authLink.concat(httpLink).

Le lien setContext s'exécute avant chaque requête et ajoute dynamiquement des en-têtes d'authentification à chaque opération.

Composez les liens avec ApolloLink.from([authLink, errorLink, httpLink]) ou authLink.concat(httpLink). Les liens sont des intergiciels : chaque lien traite l'opération et la transmet à next(). Le dernier lien de la chaîne envoie la requête HTTP proprement dite.

Chaînes courantes : lien d'authentification (ajout d'en-têtes) + lien d'erreurs (gestion des erreurs) + lien HTTP (envoi de la requête).

Importez onError depuis @apollo/client/link/error. Le lien d'erreurs intercepte globalement les erreurs GraphQL et les erreurs réseau. Utilisez-le pour rediriger vers une page de connexion en cas d'erreurs UNAUTHENTICATED ou pour afficher une notification d'erreur globale en cas de défaillances réseau.

Le lien d'erreurs doit apparaître avant le lien HTTP dans la chaîne, mais il peut appeler forward(operation) pour réessayer la requête.

cache-first (par défaut) : renvoyer immédiatement les données mises en cache ; effectuer une nouvelle récupération en arrière-plan si elles sont obsolètes. network-only : toujours récupérer les données depuis le serveur et mettre à jour le cache. cache-and-network : renvoyer immédiatement le cache ET effectuer une récupération, puis mettre à jour l'interface à l'arrivée de la réponse. cache-only : lire uniquement dans le cache et lever une exception si les données n'y sont pas mises en cache. no-cache : toujours récupérer les données sans jamais les écrire dans le cache.

Choisissez en fonction des exigences de fraîcheur des données : les tableaux de bord utilisent souvent cache-and-network ; les formulaires de profil utilisateur utilisent network-only.

Définissez la fetchPolicy par défaut dans les defaultOptions d'InMemoryCache : new ApolloClient({ defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } } }). Les appels individuels à useQuery peuvent remplacer ce réglage pour chaque requête.

La définition d'une valeur par défaut globale pertinente réduit le code répétitif nécessaire pour spécifier fetchPolicy à chaque appel.

L'extension de navigateur Apollo Client DevTools ajoute un panneau Apollo aux Chrome DevTools. Elle affiche toutes les requêtes mises en cache et leurs données actuelles, permet d'explorer le cache normalisé et de réexécuter les requêtes depuis le panneau DevTools.

Installez-la depuis le Chrome Web Store et initialisez le client avec devtools: { enabled: true } (activé par défaut en mode développement).

Dans la chaîne de liens d'Apollo Client, où errorLink doit-il être placé par rapport à httpLink ?

Installez @apollo/client et graphql, créez un ApolloClient avec InMemoryCache et une chaîne de liens, puis entourez l'application d'un ApolloProvider. La chaîne de liens combine authLink (ajout de jetons), errorLink (gestion globale des erreurs) et httpLink (transport HTTP). La politique de récupération contrôle la priorité entre le cache et le réseau ; InMemoryCache normalise les entités par type et identifiant.

L'extension de navigateur Apollo DevTools facilite l'inspection du cache et le débogage.