Gestión del estado del servidor con React Query

Introducción

React Query es una biblioteca que facilita la gestión de datos del lado del cliente en aplicaciones React. Proporciona características potentes para gestionar el estado y el almacenamiento en caché de datos provenientes de los servidores.

Sin embargo, hay que señalar que React Query no se centra en el estado global de una aplicación (como lo hace Redux o Context API), sino principalmente en el estado vinculado a datos distantes (llamadas al servidor, almacenamiento en caché, sincronización, etc.).

Instalación

1. Instalación de dependencias

En primer lugar, cree un nuevo proyecto con Vite y, a continuación, instala los paquetes necesarios utilizando tu gestor de paquetes favorito, como npm o yarn :

npm install @tanstack/react-query

Esto instalará la última versión estable de React Query, es decir, la versión 4 en el momento de escribir esto.

También le recomendamos que instale como dependencia de desarrollo el complemento ESLint, lo que le permitirá detectar más rápidamente los posibles errores que podríamos encontrar al utilizar React Query:

npm i -D @tanstack/eslint-plugin-query

2. Configuración del proveedor

Envuelva su aplicación con el componente QueryClientProvider, que proporciona el contexto para React Query pasando el queryClient a los hijos. De esta forma, todos los componentes podrán utilizar las funciones de React Query.

import './App.css'  
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; 
  
const queryClient = new QueryClient();  
  
function App() {  
  return (  
    <QueryClientProvider client={queryClient}>  
      <p className="read-the-docs">  
        Hello React...

Consultas (queries)

1. La función fetch

Ahora que todo está instalado y configurado, tenemos que escribir el código que se encarga de llamar efectivamente a una API. Por lo tanto, escribiremos una función que deberá devolver los datos o en caso de producirse un error, lanzar una excepción. Lo ideal es crear un nuevo archivo desde el que podamos exportar la función responsable de recuperar los datos. Estas funciones a veces se llaman fetchers en el contexto de React Query.

const fetchTodo = async ({ queryKey }) => {  
  const id = queryKey[1];  
  const apiRes = await fetch(`https://jsonplaceholder. 
typicode.com/todos/${id}`);  
  
  
  if (!apiRes.ok) {  
    throw new Error(`Le fetch no ha funcionado`);  
  }  
  
  return apiRes.json();  
};  
  
export default fetchTodo;

La función fetchTodo es la que realmente hará la llamada a la API. Al separarla, puede ser probada independientemente y reutilizada en nuestra aplicación. El parámetro pasado como entrada queryKey es siempre un array que permite identificar la consulta. Este concepto de queryKey es importante, porque React Query se basa en él para almacenar en caché los datos y saber si debe o no hacer...

Mutaciones

La mutación es otro aspecto importante de React Query. Permiten realizar operaciones de modificación sobre datos del lado del cliente y del lado del servidor de forma optimista y reactiva. Es básicamente el mismo proceso que una consulta, salvo que en este caso a menudo vamos a utilizar una solicitud POST con datos.

Crear una mutación

React Query exporta un hook llamado useMutation, que se utiliza para realizar mutaciones. He aquí un ejemplo básico:

function App() {  
  const mutation = useMutation({  
    mutationFn: (newTodo) => {  
      // Aquí, la url para POST un nuevo todo  
      return fetch('/todos', {  
        method: 'POST',  
        headers: { 'Content-Type': 'application/json' },  
        body: JSON.stringify(newTodo)  
      }).then(res => res.json());  
    }  
  });  
  
  return (  
    <button onClick={() => mutation.mutate({ title:  
'Comprar detergente'...

Invalidation

La invalidación (Invalidation) de datos es un concepto clave en React Query. Es una de las formas en que React Query mantiene los datos actualizados y asegura que los usuarios siempre vean la información más actualizada. La invalidación no es la simple eliminación de datos, sino más bien una señal a React Query de que una consulta específica debe volver a ejecutarse la próxima vez que se necesite.

¿Por qué es necesario? Imagine una aplicación de gestión de listas de tareas. Cuando un usuario añade una nueva tarea, los datos del servidor se actualizan, pero los datos almacenados en caché en el cliente no reflejan este cambio. Si el usuario consulta la lista de tareas, es posible que no vea la nueva tarea porque los datos proceden de la caché. Aquí es donde entra en juego la invalidación.

1. Diferentes formas de invalidar una solicitud

Con React Query, podemos invalidar una consulta específica usando el queryClient. Cuando se invalida una consulta, significa que React Query sabe que sus datos pueden haber dejado de estar actualizados.

La próxima vez que se utilice esta solicitud (o inmediatamente si refetchOnWindowFocus u otros activadores de refetch están activados), React Query recuperará los datos de nuevo de la fuente original.

Así es como podría verse en el código:

const mutation = useMutation(newTask...

Utilizar herramientas de desarrollo específicas

React Query ofrece herramientas de desarrollo dedicadas que facilitan la supervisión y depuración del estado de la caché, las consultas y las mutaciones. Estas herramientas nos dan una mejor comprensión de lo que está pasando detrás de las escenas. El primer paso es instalar el paquete:

npm i @tanstack/react-query-devtools

A continuación, sólo tiene que importarlo y hacer que el componente aparezca en el componente principal:

import { ReactQueryDevtools } from '@tanstack/react-query-devtools' 
  
function App() {  
  return (  
    <QueryClientProvider client={queryClient}>  
      {/* El resto de nuestra aplicación */}  
      <ReactQueryDevtools initialIsOpen={false} />  
    </QueryClientProvider>  
  )  
}

El componente ReactQueryDevtools acepta muchas de las opciones listadas en la documentación de React Query. Aquí, hemos desactivado la apertura de DevTools en el lanzamiento estableciendo el initialIsOpen a false.

Utilización de herramientas de desarrollo

Una vez instalada y activada la extensión, verá un icono con el logotipo de React...