Configuration du client Apollo pour les requêtes graphQL dans React

Introduction

Cet article montrera comment configurer une application React pour les requêtes graphQL, pour cela la lib APollClient sera utilisée. L'idée est de présenter comment configurer l'application et un exemple de comment faire des requêtes.

bibliothèques

• @apollo/client : lib qui permet de gérer l'état et de faire des requêtes avec GraphQL
• graphql : lib qui permet d'analyser les requêtes GraphQL

Pour ajouter les libs au projet :

yarn add @apollo/client graphql --dev

Paramètres

Ensuite, je montrerai 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, l'APolloClient est initialisé en transmettant les informations sur l'endroit où il frappera à partir du lien défini et le cache d'une instance d'InMemoryCache, que l'APolloClient utilise pour mettre en cache les résultats des requêtes.
Dans httpLink, l'URI de l'API graphQL est transmis et les en-têtes nécessaires pour les requêtes sont définis, dans ce cas, celui qui utilise le jeton Bearer est illustré.
Enfin, le retour et l'export sont définis pour permettre une utilisation au sein de l'application.

Considérant qu'il s'agit d'une application qui, après la connexion, enregistre le jeton dans localStorage et que vous souhaitez autoriser les requêtes graphQL pour l'ensemble de l'application en général, l'ApolloProvider défini dans le fichier ci-dessus est utilisé :

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

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

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

Dans ce cas de l'exemple, le jeton est extrait de localStorage (dans cet exemple, comme s'il y était enregistré avec la clé @tokenId) et l'uri est défini dans le fichier lui-même, étant transmis à ApolloProvider. L'AppContent est transmis en tant qu'enfant d'ApolloProvider, donc tout ce qu'il contient, qui serait l'application dans son ensemble, pourra effectuer des requêtes graphQL.
En pratique, ayant des environnements de test et de production différents, le graphqlURI pourrait provenir d'un env défini avec l'uri de chaque environnement.

À partir d'une requête appelée user que possède l'API, qui renvoie le nom et la profession de l'utilisateur, le fichier avec la requête à appeler sera défini :

import { gql } from '@apollo/client'

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

export default GET_USER

GET_USER correspond à la manière dont la requête sera appelée par l'application React et l'utilisateur indique le nom de la requête recherchée dans l'API.

Dans le fichier qui définit l'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 vrai lorsque la requête n'est pas terminée, renvoyant une erreur si la requête échoue et renvoyant des données lorsque la requête est terminée avec succès. Tant que la date n'a pas été renvoyée, le message Chargement... apparaîtra à l'écran. Si la demande se termine par une erreur, le message Échec de la demande s'affichera. Si la demande est complétée avec succès, 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 présenter comment configurer APolloClient pour permettre aux applications React de faire des appels graphQL, en montrant la définition du contexte, l'utilisation de ce contexte et un exemple de comment exécuter une requête.
Suivez le lien vers la documentation ApolloClient pour 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!