Librería para gestionar el estado en aplicaciones React.
A medida que una aplicación web en React crece, cada vez es más complicado gestionar los datos de una forma eficiente. Obtener los datos de una url remota, guardarlos en memoria y usarlos en múltiples componentes será mucho más fácil si usamos una librería que gestione el estado.
React Query tiene precisamente esta función, obtener, cachear y actualizar la información de una forma simple y organizada.
Podemos usar este comando para instalar la dependencia en nuestro proyecto:
npm install @tanstack/react-query
Para usar la librería debemos importar y crear una instancia de QueryClient
y luego englobar nuestra aplicación con un QueryClientProvider
:
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient();
export default function App() { return ( <QueryClientProvider client={queryClient}> <DisplayArticles /> </QueryClientProvider> );}
Para obtener información de un servidor remoto y gestionar el estado de la carga y errores podemos usar el métido useQuery
. Mientras no obtengamos respuesta del servidor estaremos en el estado ‘cargando’, si hay un error mostraremos el mensaje de error. En cualquier otro caso mostraremos el listado de artículos obtenidos como respuesta a la petición.
En el método useQuery
le pasamos el parámetro queryKey
es articlesData
que es una clave de texto que sirve identificar la respuesta en el futuro, cachearla y no tener que volver a ejecutar la petición remota en caso de reutilizarla o renderizar el componente.
import { useQuery } from '@tanstack/react-query';
function DisplayArticles() { const { error, isLoading, data } = useQuery( { queryKey: ['articlesData'], queryFn: () => fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.json() ), } );
if (isLoading) return <p>Cargando...</p>; if (error) return <p>Ha ocurrido un error: {error.message}</p>;
return ( <ul> {data.map(article => ( <li key={article.id}>{article.title}</li> ))} </ul> )}
export default DisplayArticles;
En el apartado anterior hemos leído y mostrado información, pero también nos puede interesar actualizar esta información cuando el usuario interactúa con ella. En este caso hay un hook de React Query que se llama useMutation
que como el nombre indica sirve para mutar o modificar la información del estado de la aplicación.
import { useMutation, useQueryClient } from '@tanstack/react-query'
function DisplayArticles() {
const mutation = useMutation({ mutationFn: newPost => { return fetch('https://jsonplaceholder.typicode.com/posts', { method: 'POST', body: JSON.stringify(newPost), headers: { 'Content-type': 'application/json; charset=UTF-8', }, }).then(res => res.json()) }, })
return ( <div> {mutation.isLoading ? ( 'Añadiendo artículo...' ) : ( <> {mutation.isError ? ( <div>Ha ocurrido un error: {mutation.error.message}</div> ) : null}
{mutation.isSuccess ? <div>Artículo añadido!</div> : null}
<button onClick={() => { mutation.mutate({ id: new Date(), title: 'Artículo 1' }) }} > Crear artículo </button> </> )} </div> )
Por el momento esto es todo! Hemos aprendido a instalar React Query, usar la librería para obtener información, cachearla y hacer mutaciones para actualizar o añadir información en una aplicación en React. Si quieres puedes visitar la documentación oficial https://tanstack.com/query/latest/docs/framework/react/overview para conocer más detalles.