Fermer

janvier 4, 2019

Gestion de l'état dans GraphQL à l'aide d'Apollo Link State


Saviez-vous que vous pouvez lire et écrire à partir de votre état en utilisant GraphQL? Apollo Link State vous permet de gérer les données locales et distantes à un endroit unique

Vous n’avez pas besoin d’une API GraphQL pour utiliser GraphQL. Cela peut sembler une déclaration folle, mais avec Apollo GraphQL, vous pouvez utiliser apollo-link-state pour lire et écrire dans votre état à l'aide de requêtes et de mutations.

Dans cet article nous verrons comment utiliser apollo-link-state en tant que bibliothèque de gestion d'état pour remplacer l'état du composant, Redux ou MobX. Les sujets que nous aborderons sont les suivants:

  • Comment configurer l’état des liens et définir les résolveurs et les données par défaut
        
  • Comment exécuter des mutations qui mettent à jour l'état
        
  • Comment exécuter des requêtes pour lire l'état
        

Si à un moment quelconque vous vous perdez, la version finale de ce code peut être trouvée sur GitHub .

Apollo et Data

Apollo conserve toutes vos données dans une mémoire cache. Pensez-y comme à un magasin de données normal que vous auriez dans MobX ou Redux. Normalement, ce cache est rempli en exécutant des requêtes GraphQL, ce qui place les données renvoyées par le serveur dans le cache. Vous pouvez lire ou écrire vous-même sur ce cache en utilisant le module apollo-link-state .

Pourquoi voudriez-vous faire cela? Il vous permet d'exécuter des requêtes (ou des mutations) GraphQL dans votre code React pour accéder à votre état, sans avoir besoin d'une API GraphQL. Il vous donne également un langage commun pour faire référence à toutes les formes de données, qu’il s’agisse d’états ou de données provenant d’une API GraphQL.

Dans notre exemple, nous allons ajouter un contrôle simple qui nous permet de choisir le nombre de points marqués. référentiels que nous aimerions voir à partir de l’API GitHub GraphQL. Voyons comment cela fonctionne!

La première étape consiste à ajouter la bibliothèque: yarn add apollo-link-state . Après cela, nous définirons des résolveurs de mutation. Ces résolveurs nous permettent de rechercher des requêtes ou des mutations spéciales et de les traiter localement plutôt que de les demander à une API GraphQL externe.

Le fichier apolloClient.js ci-dessous définit le fichier Apollo. Client avec tous les différents liens qui le composent. Si vous n'êtes pas familier avec le client Apollo, veuillez vous reporter à l'article précédent de cette série, qui traite de la configuration de base du client Apollo. J'ai commenté certains liens pour éviter que ce code ne devienne trop volumineux.


  // src / apolloClient.js 
 import   { InMemoryCache }   de   "apollo-cache-inmemory" ; 
  import   { ApolloClient }   de   de "apollo-client" ; 
  import   { ApolloLink }   de   de "apollo-link" ; 
  import   { de HttpLink }   de   de   de "apollo -link-http "; 
  import   { setContext }   de   de" apollo-link-context "; 
  import   { onError }   de   de "apollo-link-error" ; 
  import   { avecClientState }   de   "apollo-link-state" ; 
 const  cache  =   new   InMemoryCache  ( ) ; 
 
  const  stateLink  =   avecClientState  ( {
   cache 
   résolveurs :   {
     Mutation :   {
       updateStarredControls :   ( _   { numRepos }   { cache
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
   
 
Source link