L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
variables réactives dans GraphQL Apollo Client
Dans cet article, nous verrons comment configurer des variables réactives, comment les politiques de cache GraphQL entrent en place dans définir la lecture et l'écriture dans le cache et permettre aux développeurs d'ajouter des types qui existent uniquement du côté client afin que nous puissions structurer les requêtes pour les variables côté client de la même manière que nous le pouvons pour les données GraphQL distantes. Après en avoir appris plus sur les principes fondamentaux des variables réactives, nous allons créer une application simple qui bascule le thème de notre application en mode sombre ou en mode clair en fonction de la valeur de notre variable réactive. Nous verrons comment interroger une variable réactive, comment mettre à jour la valeur stockée dans une variable réactive et comment le changement de valeur déclenche des mises à jour dans les composants qui dépendent de la variable réactive pour que certaines actions se produisent.
La cible l'audience de cet article comprendrait les développeurs de logiciels qui utilisent déjà GraphqQL avec des outils de gestion d'état comme l'API contextuelle ou Redux et désireux d'explorer un nouveau modèle de gestion de la gestion d'état dans GraphQL, ou les débutants en GraphQL qui recherchent des moyens efficaces de gérer l'état local partagé au niveau mondial dans GraphQL sans rendre les choses trop compliquées avec des outils externes. Pour suivre cela, vous devez également avoir une connaissance existante de ReactJS et CSS.
Une introduction rapide à GraphQL
Avec GraphQL, vous obtenez exactement ce dont vous avez besoin, et obtenez également les données renvoyées ainsi que structuré comment vous en avez besoin.
«GraphQL est un langage de requête pour les API et un moteur d'exécution pour répondre à ces requêtes avec vos données existantes. GraphQL fournit une description complète et compréhensible des données de votre API, donne aux clients le pouvoir de demander exactement ce dont ils ont besoin et rien de plus, facilite l'évolution des API au fil du temps et active des outils de développement puissants. »
Qu'est-ce qu'Apollo Client dans GraphQL?
Apollo Client vous aide à éviter de suivre manuellement les états de chargement et d'erreur. Il offre également la possibilité d'utiliser GraphQL avec des modèles React modernes tels que des hooks, etc.
«Apollo Client est une bibliothèque complète de gestion d'état pour JavaScript qui vous permet de gérer à la fois les données locales et distantes avec GraphQL. Utilisez-le pour récupérer, mettre en cache et modifier les données d'application, tout en mettant automatiquement à jour votre interface utilisateur. »
-« Introduction to Apollo Client »Apollo Docs
Définissons ici quelques termes que vous allez besoin de comprendre pour avancer:
- Variable
Une variable est un nom que vous donnez à un emplacement mémoire assigné où une valeur est stockée. Le nom de la variable est utilisé comme référence à la valeur qui y est stockée lorsque vous devez l'utiliser. - Réactivité
Nous allons expliquer la réactivité comme quelque chose qui déclenche un changement sur ses dépendants lorsqu'une mise à jour lui est transmise. Comme l'état local de React déclenche les mises à jour des composants, les variables réactives d'Apollo GraphQL déclenchent également automatiquement les mises à jour des composants en fonction des modifications.
La gestion des états est une partie très importante de la construction d'une application moderne. Avoir un état global est important lorsque différents composants ou écrans nécessitent l'accès à la même valeur d'état et peuvent éventuellement déclencher des changements lorsque cet état particulier est changé.
Dans la section suivante, nous verrons comment configurer une variable réactive. [19659020] Ecriture de notre première variable réactive
Voici à quoi ressemble une variable réactive:
import {makeVar} de '@ apollo / client';
const myReactiveVariable = makeVar (/ ** Une valeur initiale peut être passée ici. ** /)
Le makeVar est importé d'Apollo Client et est utilisé pour déclarer notre variable réactive. makeVar prend une valeur initiale que la variable réactive tiendrait. La facilité de construction d'une variable réactive est étonnante.
Il y a deux façons de lire les données à partir de notre variable réactive créée. Le moyen le plus simple est d'appeler notre variable réactive déclarée que nous avons créée ci-dessus, comme une fonction sans argument:
const variable = myReactiveVariable ();
Obtenir la valeur d'une variable réactive est aussi simple que cela. Dans le bloc de code ci-dessus, nous avons déclaré une variable contenant notre variable réactive qui a été appelée sans argument pour lire les données qu'elle contient déjà.
Nous pouvons également obtenir la valeur d'une variable réactive avec le useQuery ] que nous utiliserions normalement pour récupérer des données distantes dans GraphQL. Pour expliquer comment nous pouvons faire cela, examinons le type de cache et les politiques de champ.
Politiques de type et de champ
Le type de cache et les politiques de champ vous aident à définir comment un champ spécifique dans votre cache Apollo Client est lu et écrit à. Pour ce faire, fournissez des politiques de champ au constructeur de inMemoryCache . Chaque politique de champ est définie dans le typePolicy qui correspond au type qui contient le champ. Définissons une typePolicy appelée Query et définissons une politique de champ pour accéder à un champ appelé myReactiveVariable .
import {InMemoryCache} depuis '@ apollo / client' ;
// Ici nous importons notre variable réactive que nous avons déclarée dans un autre
// composant
import {myReactiveVariable} depuis './reactivities/variable.js';
// Les stratégies de champ contiennent l'état initial mis en cache d'un champ.
exporter le nouveau InMemoryCache par défaut ({
typePolicies: {
Requete: {
des champs: {
myReactiveVariable: {
lis() {
return myReactiveVariable ();
}
}
}
}
}
})
Dans l'extrait de code ci-dessus, nous avons déclaré un type appelé Query et défini un champ appelé myReactiveVariable . Ensuite, nous avons ajouté une fonction read qui spécifie ce qui se passe lorsque la valeur mise en cache du champ est lue. Voici ce qui se passe lorsque la valeur en cache du champ myReactiveVariable est en cours de lecture:
Nous transmettons la variable réactive que nous avions déclarée dans un autre composant et importée ici comme valeur renvoyée par le champ.
Maintenant que nous ont défini nos typePolicies et fieldPolicies allons-y et écrivons notre requête pour obtenir la valeur stockée dans notre variable réactive. Voici à quoi ressemblerait la requête:
import {gql} de "@ apollo / client";
export const GET_REACTIVE_VARIABLE = gql`
query getReractiveVariable {
myReactiveVariable @client
}
»
La balise littérale de modèle gql que nous avons importée du client Apollo ci-dessus est utilisée pour écrire une requête GraphQL dans le client Apollo.
Le nom de la requête myReactiveVariable doit correspondre au nom de champ déclaré dans la politique de terrain. Si vous avez utilisé GraphQL, vous remarquerez que ce modèle de requête est identique à la requête normale que vous écririez s'il s'agissait d'une API GraphQL distante que nous interrogions. La seule différence est le @client placé après le nom du champ. Cela demande à Apollo de résoudre cette requête particulière sur le client et non sur une API externe.
C'est tout! Nous avons mis en place avec succès notre première variable réactive. Le processus semble un peu long au début, mais par la suite, vous pouvez déclarer une nouvelle variable réactive en déclarant simplement la variable réactive et en ajoutant une politique de champ pour celle-ci.
Pour récupérer la variable réactive, vous pouvez utiliser le useQuery accrocher n'importe quel composant là où vous en avez besoin.
Voici un exemple:
import {useQuery} de '@ apollo / client';
importer {GET_REACTIVE_VARIABLE} depuis 'FILE_PATH_TO_YOUR_QUERY_FILE';
const {chargement, erreur, données} = useQeury (GET_DARK_MODE);
// vous pouvez suivre le chargement, les états d'erreur et les données de la même manière avec une requête normale dans Apollo
Dans le code ci-dessus, nous avons importé useQuery de @ apollo / client . Ensuite, nous avons importé la requête GET_REACTIVE_VARIABLE du fichier à partir duquel elle a été exportée.
Enfin, nous passons au hook useQuery dans notre requête, et déstructure chargement error et data from it.
Modification d'une variable réactive
Le client Apollo offre une belle façon de modifier une variable réactive – en appelant la fonction renvoyée par makeVar et transmettez un seul argument à la fonction. L'argument passé est la nouvelle valeur que la variable réactive contiendra. Regardons un exemple ci-dessous où nous modifions notre variable réactive que nous avons déclarée ci-dessus:
import {myReactiveVariable} from 'PATH_TO_OUR_REACTIVE_VARIABLE_FILE'
myReactiveVariable ("Une nouvelle valeur est dans!");
Dans le code ci-dessus, nous importons myReactiveVariable et nous la mettons à jour en appelant la variable et en y plaçant la nouvelle valeur.
Il est si facile de mettre à jour les valeurs d'une variable réactive. Une fois la valeur d'une variable réactive mise à jour, les actions correspondantes sont déclenchées dans les composants qui dépendent de la variable et l'interface utilisateur est ajustée automatiquement.
Dans la section suivante, nous allons créer une simple application de changement de thème qui bascule thèmes du mode sombre au mode clair avec un clic sur un bouton. Le bouton change lui-même en fonction de la valeur du thème actuel. Cela nous aidera à rassembler tout ce que nous avons appris en construisant quelque chose qui illustre pleinement et simplement le concept de variables réactives et montre comment l'interface utilisateur est automatiquement déclenchée lorsque la variable réactive est mise à jour.
Voici à quoi ressemblera notre résultat. comme:
Commençons.
Configuration:
Tout d'abord, nous créons une nouvelle application React.
npx create-react-app theme_toggle
Ensuite, installons les bibliothèques nécessaires dont nous avons besoin pour Apollo et GraphQL, y compris la bibliothèque react-feather pour obtenir nos icônes et react-router-dom pour configurer le routage
npm install @ apollo / client graphql react-feather react-router-dom
Une fois que nous avons terminé avec toutes les installations, allons-y et configurons notre graphQL, y compris la définition de notre darkMode variable réactive.
Créez un dossier appelé graphql dans le src puis créez un sous-dossier appelé reactivities pour héberger toutes les variables réactives. Voici à quoi ressemblerait l'arborescence des dossiers:
src> graphql> réactivités> themeVariable.js
J'ai décidé d'organiser notre structure de fichiers et de dossiers en simulant un cas d'utilisation réel, alors suivez-le.
Déclarons notre variable réactive dans le fichier themeVariable.js que nous venons de créer:
import {makeVar, gql} from "@ apollo / client";
export const darkMode = makeVar (false);
Ensuite, dans le même fichier, construisons notre requête pour obtenir notre variable réactive et spécifier que la requête doit être résolue côté client. Nous pouvons décider de créer un dossier séparé pour héberger toutes nos requêtes, en particulier lorsque nous avons de nombreuses requêtes dans notre application, mais pour les besoins de ce tutoriel, nous allons écrire la requête dans le même fichier que la variable réactive et les exporter individuellement:
import {makeVar, gql} depuis "@ apollo / client";
export const darkMode = makeVar (false);
// Ceci est la requête pour obtenir la variable réactive darkMode.
export const GET_DARK_MODE = gql`
query getDarkMode {
darkMode @client
}
»
Dans le morceau de code ci-dessus, nous voyons à quel point il était simple de déclarer une variable réactive avec makeVar () et de passer une valeur initiale de false pour notre nouvelle variable . Ensuite, nous avons importé gql du client Apollo et l'avons utilisé dans l'écriture de notre requête.
Ensuite, créons notre fichier cache.js et définissons nos politiques de type et de champ pour contrôler comment les variables seront interrogées et structurées:
Créez un fichier appelé cache.js dans le dossier graphql . Dans cache.js voici comment nous déclarons nos règles:
import {InMemoryCache} from '@ apollo / client';
import {darkMode} de './reactivities/themeVariable';
exporter le nouveau InMemoryCache par défaut ({
typePolicies: {
Requete: {
des champs: {
darkMode: {
lis() {
retourne darkMode ();
}
}
}
}
}
})
Dans le code ci-dessus, tout d'abord, nous avons importé inMemoryCache du client Apollo, et nous avons importé notre variable réactive du chemin du fichier où nous l'avons stockée.
Ensuite, nous avons créé une nouvelle instance de inMemoryCache et notre politique de champ est définie à l'intérieur de l'objet typePolicy . Le code ci-dessus définit une politique de champ pour le champ darkMode du type Query .
Il y a une dernière étape pour terminer la configuration d'Apollo pour notre application React, nous devons créer un fichier client.js . Le fichier client.js est un fichier que vous connaissez déjà si vous utilisez GraphQL auparavant. Il contient le constructeur ApolloClient qui serait finalement passé dans le ApolloProvider sur un fichier de premier niveau (généralement le fichier index.js). Notre fichier client.js doit être situé directement dans le dossier src .
src> client.js
import {ApolloClient} depuis '@ apollo / client';
importer le cache depuis './graphql/cache';
client const = new ApolloClient ({
cache,
connectToDevTools: vrai,
});
exporter le client par défaut;
Voici ce que nous avons fait ci-dessus. Nous avons importé ApolloClient . Ensuite, nous avons importé notre cache d'où elle avait été précédemment déclarée. Dans notre constructeur ApolloClient nous avons passé dans notre cache que nous avons importé et défini connectToDevTools comme true pour nous permettre d'utiliser les outils de développement Apollo dans notre navigateur. [19659006] Enfin, nous devons passer la nouvelle instance ApolloClient que nous avons exportée en tant que client dans ApolloProvider dans notre index.js de premier niveau dans le dossier src . Ouvrez le fichier index.js et remplacez le code par celui-ci.
import React de 'react';
importer ReactDOM depuis 'react-dom';
import {ApolloProvider} depuis '@ apollo / client';
import './index.css';
importer l'application depuis './App';
importer le client depuis './client';
ReactDOM.render (
,
document.getElementById ('racine')
);
Dans le bloc de code ci-dessus, nous avons enveloppé notre composant App avec le ApolloProvider et passé le client ( que nous avons importé) au fournisseur Apollo . Nous l'avons fait dans la portée de niveau supérieur afin que l'ensemble de notre application puisse accéder à ApolloProvider et au client .
Nous avons terminé avec succès tout dans la configuration d'Apollo et du réactif variable. Vous remarquerez que beaucoup de choses que nous avons faites ici étaient liées à la configuration d'Apollo, ce que vous auriez toujours fait même si vous utilisiez Apollo avec une autre API externe pour gérer le contexte.
Puisque nous en avons terminé avec tout ce dont nous avons besoin pour configurer Apollo et créons notre variable réactive, allons-y maintenant et configurons notre page et notre routage.
Nous n'aurions qu'une seule route vers une page appelée landingPage.jsx . Dans le dossier src créez un dossier appelé pages pour héberger toutes les pages (dans notre cas, nous n'avons qu'une seule page) et créez un fichier appelé landingPage.jsx . [19659006] src> pages> landingPage.jsx
À l'intérieur de notre page nouvellement créée, créons un composant fonctionnel avec une balise h1 contenant ou en-tête. Voici ce qu'il y aura dedans.
import React de 'react';
const LandingPage = () => {
revenir (
Bienvenue dans l'application de bascule de thème!
)
}
exporter LandingPage par défaut
Ensuite, créons notre composant bouton. Dans src créez un dossier appelé composants et créez un fichier button.jsx .
src> components> button.jsx
Dans notre composant Button, voici les éléments à partir desquels nous devons importer des icônes react-feather le crochet useQuery de apollo / client notre requête et variable réactive du fichier à partir duquel il a été exporté.
import React de 'react'
import {Moon, Sun} de 'react-feather';
import {useQuery} depuis '@ apollo / client';
importer {GET_DARK_MODE, darkMode comme reactiveDarkMode} depuis '../graphql/reactivities/themeVariable';
Dans le composant bouton, interrogeons notre client GraphQL avec la requête GET_DARK_MODE comme nous le ferions normalement dans GraphQL avec Apollo.
...
const ButtonComponent = () => {
{chargement, erreur, données} = useQuery (GET_DARK_MODE);
revenir (...)
}
Exporter le ButtonComponent par défaut;
Ensuite, nous voulons changer les boutons en fonction de la valeur booléenne de notre variable réactive qui sera renvoyée à partir des données. Pour ce faire, nous allons créer deux boutons et utiliser un opérateur ternaire pour les afficher conditionnellement en fonction de la valeur booléenne de notre variable réactive:
...
const ButtonComponent = () => {
const {chargement, erreur, données} = useQuery (GET_DARK_MODE);
revenir (
{
data.darkMode? (
) :(
)
}
)
}
Exporter le ButtonComponent par défaut;
Dans le code ci-dessus, nous avons affiché les deux boutons conditionnellement avec l'opérateur ternaire pour afficher lorsque la valeur de data.darkMode est soit true ou false . Notre valeur initiale déclarée dans notre themeVariable.js est false .
Note: Souvenez-vous que nous pouvons extraire darkMode des données car nous l'avons déclaré de cette façon dans notre politique de champ cache.js.
Nous avons ajouté du CSS aux boutons pour les rendre plus beaux et avons également ajouté les icônes que nous avons importées de react-feather à chaque bouton.
Si vous avez remarqué que nous avait une propriété onClick passée dans chaque bouton qui a appelé toggleMode . Déclarons la fonction ci-dessus mais toujours dans le ButtonComponent :
...
const ButtonComponent = () => {
const toggleMode = () => {
console.log ("Mode bascule cliqué!")
}
revenir (...)
}
Exporter le ButtonComponent par défaut;
Actuellement, nous avons un console.log () dans la fonction toggleMode . Dans une partie ultérieure de cet article, nous reviendrons pour écrire correctement cette fonction pour mettre à jour la valeur de la variable réactive.
Revenons maintenant au fichier ladingPage.jsx que nous avons créé auparavant et ajoutez le bouton que nous venons de créer:
import React de 'react';
import ButtonComponent depuis '../components/button';
const LandingPage = () => {
revenir (
Bienvenue dans l'application de bascule de thème!
Pour ajouter le bouton, nous l'avons simplement importé dans notre page et l'avons ajouté sous l'élément h1 que nous avions déjà sur la page.
Voici à quoi ressemble notre application Web pour le moment. [19659108] ( Grand aperçu )
Nous avons presque fini de créer notre application. Ensuite, modifions l'arrière-plan et la couleur du texte de la page dans le style landingPage.jsx pour être conditionnellement noir ou blanc en fonction de la valeur booléenne de notre variable réactive qui sera basculée ultérieurement dans le composant bouton. Pour ce faire, nous utiliserons également le hook useQuery pour obtenir la valeur actuelle de notre variable réactive.
Notre fichier landingPage.jsx ressemblera finalement à ceci:
importer React depuis 'react'
import {useQuery} depuis '@ apollo / client';
import ButtonComponent depuis '../components/button';
import {darkMode, GET_DARK_MODE} depuis '../graphql/reactivities/themeVariable';
const LandingPage = () => {
const {chargement, erreur, données} = useQuery (GET_DARK_MODE);
revenir (
Bienvenue dans l'application de bascule de thème!
Faites attention à la manière dont nous modifions la couleur backgroundColor et du conteneur div conditionnellement en fonction de la valeur booléenne de la variable réactive renvoyée. Nous utilisons un opérateur ternaire pour définir backgroundColor sur black ou white selon la valeur de data.darkMode . La même chose devrait être faite pour la valeur de couleur . C'est tout ce dont nous avons besoin pour le composant landingPage.jsx .
La dernière chose que nous devrons faire pour que notre application fonctionne est de faire fonctionner notre toggleMode en le composant bouton capable de modifier la variable réactive en cliquant sur le bouton. Voyons comment modifier à nouveau une variable réactive, cette fois, dans un exemple d'application réel.
Modifier une variable réactive
Comme nous l'avons appris précédemment, pour modifier une variable réactive, il vous suffit de appelez la fonction retournée par makeVar et passez-y la nouvelle valeur. Voici comment cela fonctionnera dans notre cas:
Accédez au composant bouton et procédez comme suit:
...
import {GET_DARK_MODE, darkMode} depuis '../graphql/reactivities/themeVariable';
const ButtonComponent = () => {
const toggleMode = () => {
darkMode (! darkMode)
}
revenir (...)
}
Exporter le ButtonComponent par défaut;
Tout d'abord, nous avons importé la requête GET_DARK_MODE et la variable réactive darkMode du fichier à partir duquel elles ont été exportées.
Ensuite, nous avons écrit une fonction fléchée pour toggleMode et a appelé la fonction darkMode retournée par makeVar et a passé un inverseur de la valeur actuelle qu'elle contenait comme nouvelle valeur que la variable réactive portera quand elle sera cliquée. [19659006] Nous avons toute notre application alimentée par une variable réactive et une fois qu'il y a un changement de la valeur contenue dans la variable réactive, chaque composant ou page dépendant de cette variable pour qu'une action se déclenche est mis à jour et l'interface utilisateur est mise à jour avec les changements actuels . Nous avons échappé à tous les obstacles liés aux fonctions de répartition et aux autres étapes ambiguës que nous devons suivre lors de l'utilisation d'autres bibliothèques de gestion d'état comme Redux ou l'API de contexte.
Conclusion
Les variables réactives dans le client Apollo vous donnent un doux, facile à utiliser, facile à mettre à jour, et un modèle d'interrogation cohérent avec l'interrogation d'une API GraphQL distante régulière. Apprendre à utiliser des variables réactives pour la gestion des états est un plus pour vous car cela vous donne la flexibilité de choisir parmi de nombreux outils. les variables réactives vous permettraient de gérer l'état global partagé localement entre les composants sans le passe-partout supplémentaire qui serait généralement fourni avec les bibliothèques de gestion d'état dominantes qui existent déjà.
- Consultez le code fini sur GitHub .
] Ressources connexes
(ks, ra, il) Source link