Configurer le client Apollo pour les requêtes graphQL dans React

Introduction

Cet article montrera comment configurer une application React pour les requêtes graphQL à l'aide de la bibliothèque ApolloClient. L'objectif est de montrer comment configurer l'application et de fournir un exemple de la façon de faire des demandes.

Libs

• @apollo/client : lib qui permet la gestion de l'état et effectue des requêtes graphQL
• graphql : lib qui permet d'analyser les requêtes GraphQL

Pour ajouter les libs au projet :

yarn add @apollo/client graphql --dev

Configuration

Ci-dessous, je vais montrer comment configurer ApolloClient pour activer les requêtes graphQL.
Tout d'abord, un contexte ApolloClient sera créé afin que tout ce qui est contenu comme ses enfants puisse faire des requêtes graphQL :

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

function ExampleApolloProvider({ children, token, uri }) {
  const httpLink = new HttpLink({
    uri: uri,
    headers: {
      authorization: `Bearer ${token}`,
    },
  })

  const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: httpLink,
  })

  return <ApolloProvider client={client}>{children}</ApolloProvider>
}

export { ExampleApolloProvider as ApolloProvider }

Dans le client const, ApolloClient est initialisé, en spécifiant le point de terminaison via le lien défini et le cache à l'aide d'une instance d'InMemoryCache, qu'ApolloClient utilise pour mettre en cache les résultats de la requête.
Dans httpLink, l'URI de l'API graphQL est défini, ainsi que les en-têtes nécessaires pour les requêtes. Dans cet exemple, un jeton Bearer est utilisé.
Enfin, le retour et l'export sont définis pour permettre son utilisation au sein de l'application.

Considérant qu'il s'agit d'une application où le jeton est enregistré dans localStorage après la connexion et que l'objectif est d'activer les requêtes graphQL dans toute l'application, l'ApolloProvider défini dans le fichier précédent est utilisé :

import { ApolloProvider } from './contexts/ApolloContext'
import AppContent from './components/AppContent'

const token = localStorage.getItem('@tokenId')
// endpoint of your graphQL api
const graphqlURI = 'https://www.example.com'

const App = () => {
  return (
    <ApolloProvider token={token} uri={graphqlURI}>
      <AppContent />
    </ApolloProvider>
  )
}

Dans cet exemple, le token est récupéré de localStorage (dans ce cas, comme s'il était enregistré avec la clé @tokenId), et l'uri est défini dans le même fichier, puis transmis à ApolloProvider. L'AppContent est transmis en tant qu'enfant d'ApolloProvider, ce qui signifie que tout ce qu'il contient, l'ensemble de l'application, pourra effectuer des requêtes graphQL.
En pratique, lorsque l'on dispose d'environnements différents pour les tests et la production, le graphqlURI pourrait provenir d'une variable d'environnement, l'URI de chaque environnement étant défini en conséquence.

En commençant par une requête appelée user que l'API expose, qui renvoie le nom et la profession de l'utilisateur, un fichier sera défini avec la requête à appeler :

import { gql } from '@apollo/client'

const GET_USER = gql`
  query GetUser {
    user {
      name
      occupation
    }
  }
`

export default GET_USER

GET_USER correspond à la façon dont la requête sera appelée dans l'application React, et user est le nom de la requête à utiliser depuis l'API.

Dans le fichier qui définit AppContent, la requête GET_USER sera appelée et son retour sera utilisé :

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

function ExampleApolloProvider({ children, token, uri }) {
  const httpLink = new HttpLink({
    uri: uri,
    headers: {
      authorization: `Bearer ${token}`,
    },
  })

  const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: httpLink,
  })

  return <ApolloProvider client={client}>{children}</ApolloProvider>
}

export { ExampleApolloProvider as ApolloProvider }

Le hook useQuery exécutera la requête définie dans GET_USER, renvoyant le chargement comme vrai pendant que la requête est toujours en cours, renvoyant une erreur si la requête échoue et renvoyant les données lorsque la requête se termine avec succès. Jusqu'à ce que les données soient renvoyées, le message Chargement... s'affichera à l'écran. Si la demande se termine par une erreur, le message Échec de la demande s'affichera. Si la demande aboutit, le nom et la profession de l'utilisateur (nom et profession) seront affichés à l'écran.
De cette façon, ApolloClient est configuré pour les requêtes graphQL et prêt à être utilisé.

Conclusion

L'idée était de démontrer comment configurer ApolloClient pour permettre à une application React d'effectuer des appels graphQL, en montrant la définition du contexte, l'utilisation de ce contexte et un exemple de la façon d'exécuter une requête.
Voici le lien vers la documentation ApolloClient pour tous ceux qui souhaitent approfondir.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!