Variables reactivas en el cliente GraphQL Apollo

¡Registro!

SmashingConf Nueva York 2024

Índice

Una introducción rápida a GraphQL
¿Qué es el cliente Apollo en GraphQL?
Configuración
Modificar una variable reactiva
Conclusión
1. Recursos Relacionados

Las variables reactivas funcionan con GraphQL Apollo y le ofrecen la misma funcionalidad con Redux o Context API sin la complejidad o las capas adicionales que vienen con estas otras herramientas. Una variable reactiva en GraphQL Apollo es fácil de usar y no tiene tanto proceso de configuración en comparación con Redux.

En este artículo, veremos cómo configurar variables reactivas, cómo se implementan las políticas de caché GraphQL al definir lecturas y escrituras en el caché y brindaremos a los desarrolladores la capacidad de agregar tipos que existen solo en el lado del cliente para que que podemos estructurar consultas para variables del lado del cliente de la misma manera que lo hacemos para datos GraphQL remotos. Después de aprender más sobre los fundamentos de las variables reactivas, crearemos una aplicación simple que cambia el tema de nuestra aplicación al modo oscuro o al modo claro según el valor de nuestra variable reactiva. Veremos cómo consultar una variable reactiva, cómo actualizar el valor almacenado en una variable reactiva y cómo el cambio en el valor desencadena actualizaciones en los componentes que dependen de la variable reactiva para que ocurran ciertas acciones.

El público objetivo de este artículo incluiría desarrolladores de software que ya usan GraphqQL con herramientas de administración de estado como Context API o Redux y que estén dispuestos a explorar un nuevo patrón de manejo de la administración de estado en GraphQL, o principiantes de GraphQL que estén buscando formas efectivas de manejar datos compartidos globalmente. Estado local dentro de GraphQL sin complicar demasiado las cosas con herramientas externas. Para seguir esto, también debe tener conocimientos de ReactJS y CSS.

Una introducción rápida a GraphQL

Con GraphQL, obtienes exactamente lo que necesitas y también obtienes los datos devueltos y estructurados como los necesitas.

“GraphQL es un lenguaje de consulta para API y un tiempo de ejecución para completar esas consultas con sus datos existentes. GraphQL proporciona una descripción completa y comprensible de los datos de su API, brinda a los clientes el poder de solicitar exactamente lo que necesitan y nada más, facilita la evolución de las API con el tiempo y habilita potentes herramientas de desarrollo”.

- Sitio web GraphQL

¿Qué es el cliente Apollo en GraphQL?

Apollo Client le ayuda a evitar el seguimiento manual de los estados de carga y error. También brinda la posibilidad de usar GraphQL con patrones modernos de React como ganchos, etc.

“Apollo Client es una biblioteca de administración de estado integral para JavaScript que le permite administrar datos locales y remotos con GraphQL. Úselo para buscar, almacenar en caché y modificar datos de aplicaciones, todo mientras actualiza automáticamente su interfaz de usuario”.

— “ Introducción al cliente Apollo ”, Apollo Docs

Definamos aquí algunos términos que deberá comprender para seguir adelante:

Variable
Una variable es un nombre que se le da a una ubicación de memoria asignada donde se almacena un valor. El nombre de la variable se utiliza como referencia al valor almacenado en ella cuando necesita utilizarla.
Reactividad
Explicaremos la reactividad como algo que desencadena cambios en sus dependientes cuando se le pasa una actualización. Al igual que el estado local en React activa actualizaciones de componentes, las variables reactivas en Apollo GraphQL también activan automáticamente actualizaciones de componentes basadas en cambios.

La gestión del estado es una parte realmente importante de la creación de una aplicación moderna. Tener un estado global es importante cuando diferentes componentes o pantallas requieren acceso al mismo valor de estado y posiblemente desencadenan cambios cuando se cambia ese estado en particular.

En la siguiente sección, veremos cómo configurar una variable reactiva.

Escribiendo nuestra primera variable reactiva

Así es como se ve una variable reactiva:

import { makeVar } from '@apollo/client';const myReactiveVariable = makeVar(/** An initial value can be passed in here.**/)

Se makeVarimporta desde Apollo Client y se utiliza para declarar nuestra variable reactiva. Toma makeVarun valor inicial que mantendría la variable reactiva. La facilidad de construir una variable reactiva es asombrosa.

Hay dos formas de leer datos de nuestra variable reactiva creada. La forma más sencilla es llamar a nuestra variable reactiva declarada que hemos creado anteriormente, como una función sin argumento:

const variable = myReactiveVariable();

Obtener el valor de una variable reactiva es así de fácil. En el bloque de código anterior, declaramos una variable que contiene nuestra variable reactiva que fue llamada sin un argumento para leer los datos que ya contiene.

También podemos obtener el valor de una variable reactiva con la useQuerysintaxis que normalmente usaríamos para recuperar datos remotos en GraphQL. Para explicar cómo podemos hacer esto, veamos las políticas de campo y tipo de caché.

Políticas de tipo y campo

El tipo de caché y las políticas de campo lo ayudan a definir cómo se lee y escribe un campo específico en su caché de Cliente Apollo. Para ello, proporcione políticas de campo al constructor de inMemoryCache. Cada política de campo se define dentro de la typePolicyque corresponde al tipo que contiene el campo. Definamos un typePolicyllamado Queryy definamos una política de campo para acceder a un campo llamado myReactiveVariable.

import { InMemoryCache } from '@apollo/client';// Here we import our reactive variable which we declared in another// componentimport { myReactiveVariable } from './reactivities/variable.js';// The field policies hold the initial cached state of a field.export default new InMemoryCache({ typePolicies: { Query: { fields: { myReactiveVariable: { read() { return myReactiveVariable(); } } } } }})

En el fragmento de código anterior, declaramos un tipo llamado Queryy definimos un campo llamado myReactiveVariable. A continuación, agregamos una readfunción que especifica qué sucede cuando se lee el valor almacenado en caché del campo. Esto es lo que sucede cuando myReactiveVariablese lee el valor almacenado en caché del campo:

Pasamos la variable reactiva que habíamos declarado en otro componente e importado aquí como el valor que devuelve el campo.

Ahora que hemos definido nuestro typePoliciesy fieldPolicies, sigamos adelante y escribamos nuestra consulta para obtener el valor almacenado en nuestra variable reactiva. Así es como se vería la consulta:

import { gql } from "@apollo/client";export const GET_REACTIVE_VARIABLE = gql` query getReractiveVariable{ myReactiveVariable @client }`

La gqletiqueta literal de plantilla que importamos del cliente Apollo anterior se utiliza para escribir una consulta GraphQL en el cliente Apollo.

El nombre de la consulta myReactiveVariabledebe coincidir con el nombre del campo declarado en la política de campo. Si ha estado utilizando GraphQL, notará que este patrón de consulta es idéntico a la consulta normal que escribiría si lo que estuviéramos consultando fuera una API GraphQL remota. La única diferencia es que se @clientcoloca después del nombre del campo. Esto le indica a Apollo que resuelva esta consulta particular en el cliente y no en ninguna API externa.

¡Eso es todo! Hemos configurado con éxito nuestra primera variable reactiva. El proceso parece un poco largo al principio, pero posteriormente puede declarar una nueva variable reactiva simplemente declarando la variable reactiva y agregando una política de campo para ella.

Para recuperar la variable reactiva, puede usar el useQuerygancho en cualquier componente donde lo necesite. He aquí un ejemplo.

import { useQuery } from '@apollo/client';import { GET_REACTIVE_VARIABLE } from 'FILE_PATH_TO_YOUR_QUERY_FILE';const {loading, error, data} = useQeury(GET_DARK_MODE);// you can track loading, error states, and data the same way with a normal query in Apollo

En el código anterior, importamos useQuerydesde @apollo/client. A continuación, importamos la GET_REACTIVE_VARIABLEconsulta desde el archivo desde el que se exportó.

Por último, pasamos al useQuerygancho de nuestra consulta y desestructuramos loading, errory datadesde él.

Modificando una variable reactiva

El cliente Apollo proporciona una hermosa manera de modificar una variable reactiva: llamar a la función devuelta makeVary pasarle un único argumento. El argumento pasado es el nuevo valor que contendrá la variable reactiva. Veamos un ejemplo a continuación donde modificamos nuestra variable reactiva que declaramos anteriormente:

import { myReactiveVariable } from 'PATH_TO_OUR_REACTIVE_VARIABLE_FILE'myReactiveVariable("A new value is in!");

En el código anterior, lo importamos myReactiveVariabley lo actualizamos llamando a la variable y colocando el nuevo valor dentro de ella.

Es muy fácil actualizar los valores de una variable reactiva. Una vez que se actualiza el valor de una variable reactiva, se activan las acciones correspondientes en los componentes que dependen de la variable y la interfaz de usuario se ajusta automáticamente.

En la siguiente sección, crearemos una sencilla aplicación de cambio de temas que cambia los temas del modo oscuro al modo claro con solo hacer clic en un botón. El botón cambia según el valor del tema actual. Esto nos ayudará a reunir todo lo que hemos aprendido al crear algo que ilustre completa y simplemente el concepto de variables reactivas y muestre cómo la interfaz de usuario se activa automáticamente cuando se actualiza la variable reactiva.

Así es como se verá nuestro resultado:

Vamos a empezar.

Configuración

Primero, creamos una nueva aplicación React.

npx create-react-app theme_toggle

A continuación, instalemos las bibliotecas necesarias para Apollo y GraphQL, incluida la react-featherbiblioteca para obtener nuestros íconos y react-router-domconfigurar el enrutamiento.

npm install @apollo/client graphql react-feather react-router-dom

Una vez que hayamos terminado con todas las instalaciones, sigamos adelante y configuremos nuestro GraphQL, incluida la definición de nuestra darkModevariable reactiva.

Cree una carpeta llamada Graphql dentro de la carpeta src y luego cree una subcarpeta llamada reactividades para albergar todas las variables reactivas. Así es como se vería el árbol de carpetas: src graphql reactivities themeVariable.js

Decidí organizar nuestra estructura de archivos y carpetas simulando un caso de uso del mundo real, así que síganos. Sigamos adelante para declarar nuestra variable reactiva en el archivo themeVariable.js que acabamos de crear:

import { makeVar, gql } from "@apollo/client";export const darkMode = makeVar(false);

A continuación, dentro del mismo archivo, construyamos nuestra consulta para obtener nuestra variable reactiva y especifiquemos que la consulta debe resolverse en el lado del cliente. Podemos decidir crear una carpeta separada para albergar todas nuestras consultas, especialmente cuando tenemos muchas consultas en nuestra aplicación, pero por el bien de este tutorial, escribiremos la consulta dentro del mismo archivo que la variable reactiva y las exportaremos individualmente: Tostadora de pan

import { makeVar, gql } from "@apollo/client";export const darkMode = makeVar(false);// This is the query to get the darkMode reactive variable.export const GET_DARK_MODE = gql` query getDarkMode{ darkMode @client }`

En el código anterior, vemos lo sencillo que fue declarar una variable reactiva con y makeVar()pasar un valor inicial de falsepara nuestra nueva variable. A continuación, importamos gqldesde el cliente Apollo y lo usamos para escribir nuestra consulta.

A continuación, creemos nuestro archivo cache.js y definamos nuestras políticas de tipo y campo para controlar cómo se consultarán y estructurarán las variables:

Cree un archivo llamado cache.js dentro de la carpeta graphql . Dentro de cache.js así es como declaramos nuestras políticas:

import { InMemoryCache } from '@apollo/client';import { darkMode } from './reactivities/themeVariable';export default new InMemoryCache({ typePolicies: { Query: { fields: { darkMode: { read() { return darkMode(); } } } } }})

En el código anterior, primero, importamos inMemoryCachedesde el cliente Apollo e importamos nuestra variable reactiva desde la ruta del archivo donde la almacenamos. A continuación, creamos una nueva instancia inMemoryCachey nuestra política de campo se define dentro del typePolicyobjeto. El código anterior define una política de campo para el darkModecampo del Querytipo.

Hay un último paso para completar nuestra configuración de Apollo para nuestra aplicación React: necesitamos crear un archivo client.js . El archivo client.js es un archivo con el que ya está familiarizado si usa GraphQL antes. Contiene el ApolloClientconstructor que finalmente se pasaría a un ApolloProviderarchivo de nivel superior (generalmente el archivo index.js). Nuestro archivo client.js debe estar ubicado directamente dentro de la carpeta src .

src cliente.js

import { ApolloClient } from '@apollo/client';import cache from './graphql/cache';const client = new ApolloClient({ cache, connectToDevTools: true,});export default client;

Esto es lo que hicimos arriba. Importamos ApolloClient. A continuación, importamos nuestro cachedesde donde fue declarado previamente. Dentro de nuestro ApolloClientconstructor, pasamos nuestro caché que importamos y configuramos connectToDevToolspara truepermitirnos usar Apollo Dev Tools en nuestro navegador.

Finalmente, debemos pasar la nueva ApolloClientinstancia que exportamos clienta nuestro archivo index.jsApolloProvider de nivel superior dentro de la carpeta src . Abra el archivo index.js y reemplace el código allí con este.

import React from 'react';import ReactDOM from 'react-dom';import { ApolloProvider } from '@apollo/client';import './index.css';import App from './App';import client from './client';ReactDOM.render( ApolloProvider client={client} App / /ApolloProvider, document.getElementById('root'));

En el bloque de código anterior, empaquetamos nuestro Appcomponente con ApolloProvidery lo pasamos client ( que importamos) al proveedor de Apollo. Hicimos esto en el ámbito de nivel superior para que toda nuestra aplicación pueda acceder a ApolloProvidery client.

Hemos terminado con éxito todo en la configuración de Apollo y la variable reactiva. Notarás que muchas de las cosas que hicimos aquí estaban relacionadas con la configuración de Apollo, lo cual aún habrías hecho incluso si estuvieras usando Apollo con otra API externa para administrar el contexto.

Ya que hemos terminado con todo lo que necesitamos para configurar Apollo y crear nuestra variable reactiva, sigamos adelante y configuremos nuestra página y enrutamiento.

Solo tendríamos una ruta a una página llamada landingPage.jsx . Dentro de la carpeta src , cree una carpeta llamada páginas para albergar todas las páginas (en nuestro caso, solo tenemos una página) y cree un archivo llamado landingPage.jsx en ella.

src páginas landingPage.jsx

Dentro de nuestra página recién creada, creemos un componente funcional con una h1etiqueta que contenga un encabezado. Esto es lo que habrá en él.

import React from 'react';const LandingPage = () = { return ( div style={{ height: '100vh', backgroundColor: 'white', }} h1Welcome to Theme Toggle Appliation!/h1 /div )}export default LandingPage

A continuación, creemos nuestro componente de botón. Dentro de src , cree una carpeta llamada componentes y cree un archivo button.jsx . src componentes botón.jsx

Dentro de nuestro componente de botón, aquí están las cosas desde las que debemos importar los iconos react-feather, el useQuerygancho apollo/client, nuestra consulta y la variable reactiva del archivo desde el que se exportó.

import React from 'react'import { Moon, Sun } from 'react-feather';import { useQuery } from '@apollo/client';import { GET_DARK_MODE, darkMode as reactiveDarkMode } from '../graphql/reactivities/themeVariable';

Dentro del componente del botón, consultemos a nuestro cliente GraphQL con la GET_DARK_MODEconsulta como normalmente consultaríamos en GraphQL con Apollo.

...const ButtonComponent = () = { {loading, error, data} = useQuery(GET_DARK_MODE); return (...)}export default ButtonComponent;

A continuación, queremos cambiar los botones según el valor booleano de nuestra variable reactiva que se devolverá a partir de los datos. Para hacer esto, crearemos dos botones y usaremos un operador ternario para mostrarlos condicionalmente según el valor booleano de nuestra variable reactiva:

...const ButtonComponent = () = { const {loading, error, data} = useQuery(GET_DARK_MODE); return ( div { data.darkMode ? ( button style={{ backgroundColor: '#00008B', border: 'none', padding: '2%', height: '120px', borderRadius: '15px', color: 'white', fontSize: '18px', marginTop: '5%', cursor: 'pointer' }} onClick={toggleMode} Sun / pSwitch To Light Mood/p /button ) :( button style={{ backgroundColor: '#00008B', border: 'none', padding: '2%', height: '120px', borderRadius: '15px', color: 'white', fontSize: '18px', marginTop: '5%', cursor: 'pointer' }} onClick={toggleMode} Moon / pSwitch To Dark Mood/p /button ) } /div )}export default ButtonComponent;

En el código anterior, mostramos ambos botones condicionalmente con el operador ternario para mostrar cuando el valor de data.darkModees trueo false. Nuestro valor inicial declarado en nuestro themeVariable.js es false.

Nota: Recuerde que podemos extraer darkMode de los datos porque lo declaramos de esta manera en nuestra política de campo cache.js.

Agregamos algo de CSS a los botones para que se vean mejor y también agregamos los íconos que importamos desde reaccionar-feather a cada botón.

Si notó que pasamos una onClickpropiedad a cada botón que llamaba toggleMode. Declaremos la función anterior pero aún dentro del ButtonComponent :

...const ButtonComponent = () = { const toggleMode = () = { console.log("Clicked toggle mode!") }return (...)}export default ButtonComponent;

Actualmente, tenemos una función console.log()interna toggleMode. En una parte posterior de este artículo, volveremos a escribir correctamente esta función para actualizar el valor de la variable reactiva.

Ahora volvamos al archivo ladingPage.jsx que creamos antes y agreguemos el botón que acabamos de crear:

import React from 'react';import ButtonComponent from '../components/button';const LandingPage = () = { return ( div style={{ height: '100vh', backgroundColor: 'white', }} h1Welcome to Theme Toggle Appliation!/h1 ButtonComponent / /div )}export default LandingPage

Para agregar el botón, simplemente lo importamos a nuestra página y lo agregamos debajo del h1elemento que ya teníamos en la página.

Así es como se ve nuestra aplicación web en este momento.

( Vista previa grande )

Ya casi hemos terminado de crear nuestra aplicación. A continuación, cambiemos el color de fondo y del texto de la página en el estilo landingPage.jsx para que sea condicionalmente blanco o negro según el valor booleano de nuestra variable reactiva que se alternará en el componente del botón más adelante. Para hacer esto, también usaremos el useQuerygancho para obtener el valor actual de nuestra variable reactiva.

Nuestro archivo landingPage.jsx finalmente se verá así:

import React from 'react'import { useQuery } from '@apollo/client';import ButtonComponent from '../components/button';import { darkMode, GET_DARK_MODE } from '../graphql/reactivities/themeVariable';const LandingPage = () = { const {loading, error, data} = useQuery(GET_DARK_MODE); return ( div style={{ height: '100vh', backgroundColor: data.darkMode ? 'black' : 'white', color: data.darkMode ? 'white' : 'black' }} h1Welcome to Theme Toggle Appliation!/h1 ButtonComponent / /div )}export default LandingPage

Preste atención a la forma en que cambiamos el color de fondo y el color del contenedor div condicionalmente en función del valor booleano de la variable reactiva devuelta. Usamos un operador ternario para establecer el backgroundColorvalor en blacko whitedependiendo del valor de data.darkMode. Lo mismo se debe hacer con el valor de color. Esto es todo lo que necesitamos para el componente landingPage.jsx .

Lo último que tendremos que hacer para que nuestra aplicación funcione es hacer que nuestra toggleModefunción en el componente del botón pueda modificar la variable reactiva al hacer clic en el botón. Veamos nuevamente cómo modificar una variable reactiva, esta vez en un ejemplo de aplicación real.

Modificar una variable reactiva

Como aprendimos anteriormente, para modificar una variable reactiva, todo lo que necesita hacer es llamar a la función devuelta makeVary pasar el nuevo valor dentro de ella. Así es como funcionará en nuestro caso:

Vaya al componente del botón y haga esto:

...import { GET_DARK_MODE, darkMode } from '../graphql/reactivities/themeVariable';const ButtonComponent = () = { const toggleMode = () = { darkMode(!darkMode) }return (...)}export default ButtonComponent;

Primero, importamos la GET_DARK_MODEconsulta y la darkModevariable reactiva del archivo desde el que se exportaron.

A continuación, escribimos una función de flecha toggleModey llamamos a la darkModefunción devuelta por makeVary pasamos una inversión del valor actual que contenía como el nuevo valor que llevará la variable reactiva cuando se haga clic en ella.

Tenemos toda nuestra aplicación impulsada por una variable reactiva y una vez que hay un cambio en el valor contenido en la variable reactiva, cada componente o página que depende de esa variable para que se active una acción se actualiza y la interfaz de usuario se actualiza con los cambios actuales. Evitamos todos los obstáculos de las funciones de envío y otros pasos ambiguos que debemos seguir cuando utilizamos otras bibliotecas de administración de estado como Redux o Context API.

Conclusión

Las variables reactivas en el cliente Apollo le brindan un patrón de consulta atractivo, fácil de usar, fácil de actualizar y consistente con la consulta de una API GraphQL remota normal. Aprender a utilizar variables reactivas para la gestión del estado es una ventaja para usted porque le brinda la flexibilidad de elegir entre muchas herramientas. Las variables reactivas le permitirían gestionar el estado global compartido localmente entre componentes sin el texto estándar adicional que normalmente vendría con las bibliotecas de gestión de estado dominantes que ya existen.

Consulte el código terminado en GitHub .

Recursos Relacionados

Variables reactivas , Apollo Docs
Gestión Estatal Local Con Variables Reactivas
Configurando el caché , Apollo Docs

(ks, ra, il)Explora más en

Reaccionar
redux
javascript
GrafoQL

Tal vez te puede interesar:

Variables reactivas en el cliente GraphQL Apollo

Variables reactivas en el cliente GraphQL Apollo

Una introducción rápida a GraphQL¿Qué es el cliente Apollo en GraphQL?ConfiguraciónModificar una variable reactivaConclusión¡Registro! SmashingConf Nue

programar

es

https://aprendeprogramando.es/static/images/programar-variables-reactivas-en-el-cliente-graphql-apollo-1076-0.jpg

2025-01-15

Variables reactivas en el cliente GraphQL Apollo — Variables reactivas en el cliente GraphQL Apollo

Update cookies preferences