Hola, en este post te voy a contar sobre la librería de React Query, una librería que te permite gestionar el estado de tu aplicación de una forma más sencilla y eficiente, aprovechando las ventajas de las consultas, las mutaciones y el fetching.

¿Qué son estas cosas? ¿Por qué usar React Query para hacerlo? Te lo explico a continuación.

Las consultas son operaciones que leen datos de una fuente externa, como una API o una base de datos. Por ejemplo, cuando queremos mostrar una lista de los posts en un blog, haces una consulta para obtener esos datos. Las consultas tienen varias características que las hacen especiales:

• Son asíncronas, es decir, no sabes cuándo van a terminar ni si van a tener éxito o no. Por eso, necesitas manejar diferentes estados: cargando, error y éxito.
• Son cacheables, podes guardar los datos que obtienes en una memoria temporal para no tener que repetir la consulta cada vez que necesites esos datos de esta forma ahorras tiempo y recursos.
• Son refetchables, es decir, puedes actualizar los datos cuando haya algún cambio en la fuente externa o cuando el usuario lo solicite. Así, mantenes los datos sincronizados.
• Son paralelizables, podes hacer varias consultas al mismo tiempo sin que se bloqueen entre sí. Así, aprovechas mejor el rendimiento de tu aplicación.

Las mutaciones son operaciones que modifican datos de una fuente externa, como una API o una base de datos. Por ejemplo, cuando queres hacer un posteo en un blog, haces una mutación para enviar ese dato. Las mutaciones también tienen varias características que las hacen especiales:

• Son asíncronas, no sabes cuándo van a terminar ni si van a tener éxito o no. Por eso, necesitas manejar diferentes estados: cargando, error y éxito.
• Son optimistas, puedes asumir que la mutación va a tener éxito y actualizar la interfaz de usuario antes de recibir la confirmación. Así, mejoras la experiencia de usuario y reduces el tiempo de espera.
• Son rollbackables, es decir, puedes deshacer la mutación si ocurre algún error o si el usuario lo solicita. Así, evitas inconsistencias y problemas en los datos.

El fetching es el proceso de obtener datos de una fuente externa mediante consultas y mutaciones, ¿Cómo lo resuelve React Query?

 

React Query nos ofrece una solución integral para este proceso ya que te permite hacer consultas y mutaciones de forma fácil y declarativa, usando hooks personalizados que se integran con tu componente de React. Estos hooks se encargan de gestionar el estado de las consultas y las mutaciones, cachear los datos de las consultas, refrescar los datos cuando sea necesario, hacer consultas paralelas sin problemas y hacer mutaciones optimistas y rollbackables.

 

Veamos algunos ejemplos cortos de cómo usar react query para hacer consultas y mutaciones.

Consultas:

Para hacer una consulta con React query, usamos el hook ‘useQuery’, al que le pasamos un identificador único y una función que devuelve una promesa con los datos. Por ejemplo, si queremos obtener una lista de posteos de una API:

 

import { useQuery } from 'react-query';

function Post() {

// Realizamos la consulta con useQuery 
const { data, isLoading, isError } =useQuery('post', () =>
    fetch('https://api.ejamplo.com/posts').then((res) => res.json())
);

// En caso de ser necesario podemos mostrar el estado de la consulta
if (isLoading) return <div>Cargando...</div>;
if (isError) return <div>Error</div>;

return (
    <ul>
        {data.map((post) => (
            <li key={post.id}>{post.name}</li>
        ))}
    </ul>);
}

React query se encarga de hacer la petición, guardar los datos en el caché, manejar los estados de carga, error y éxito, y devolvernos los datos en una variable “data”. También podemos acceder a otras variables como ‘isLoading’ e ‘isError’ para mostrar el estado de la consulta.

 

Mutaciones

Para hacer una mutación con react query, usamos el hook ‘useMutation’, al que le pasamos una función que devuelve una promesa con los datos. Por ejemplo, si queremos realizar un post en un blog:

import { useMutation } from 'react-query';

function AgregarPost({ post }) {

// Hacemos la mutación con useMutation
const { mutate, isLoading, isError } = useMutation((post) =>
    fetch('https://api.ejamplo.com/posts', {
        method : 'POST',
        body : JSON.stringify(post),
    }).then((res) => res.json())   
);

if (isLoading) return <div>Agregando...</div>;
if (isError) return <div>Error</div>;

return ( <button onClick= {() => mutate(post)}>+ Post</button>;
}

Cache:
Como vemos react query nos facilita mucho el trabajo a la hora de hacer consultas y mutaciones en aplicación con react. Pero eso no es todo, también nos ofrece otras ventajas como cachear los datos de las consultas para evitar peticiones innecesarias. Por ejemplo, si hacemos la misma consulta en varios componentes, react query solo hará una petición y usará los datos del caché para el resto. Además, nos permite configurar el tiempo que queremos que los datos permanezcan en el caché, y si queremos que se borren cuando el componente se desmonte o cuando la aplicación pierda el foco.

En el siguiente código invalidamos a mano la cache, utilizando invalidateQueries, lo que provoca que se realice nuevamente la petición.  

import { useQuery, useQueryClient } from 'react-query';

const Posts = () => {
  const queryClient = useQueryClient();

  const refetchData = () => {
    queryClient.invalidateQueries('posts');
  };

  return (
    <div>
      <button onClick={refetchData}>Recargar posts</button>
      <MisPosts/>
    </div>
  );
};

Auto-refresh
Otra ventaja de es que nos permite refrescar los datos de las consultas cuando haya cambios en la fuente externa o cuando el usuario lo solicite. Por ejemplo, si hacemos una mutación que afecta a los datos de una consulta, react query invalidará el caché de esa consulta y hará una nueva petición para obtener los datos actualizados, también nos permite configurar si queremos que las consultas se refresquen automáticamente cuando el componente se monte, cuando la aplicación recupere el foco o cada cierto tiempo.

import { useQuery } from 'react-query';

const Posts = () => {
  const { posts } = useQuery('miConsulta', fetchDataFunction, {
    refetchInterval: 10000,  // Refresca cada 10 segundos (10000 ms)
  });

  return (
    <div>
      {posts && (
        // Renderiza los posts
      )}
    </div>
  );
};

React Query nos permite hacer consultas paralelas sin que se bloqueen entre sí. Por ejemplo, si hacemos varias consultas en un mismo componente, estas se ejecutarán al mismo tiempo y nos devolverá los datos cuando todas hayan terminado. Además, nos permite configurar si queremos que las consultas dependan unas de otras o si queremos que se ejecuten en serie.

También permite hacer mutaciones optimistas y rollbackables. Por ejemplo, si hacemos una mutación que modifica un dato en la interfaz de usuario, react query actualizará ese dato antes de recibir la confirmación de la fuente externa, dando una sensación de rapidez al usuario, además, de permitirnos deshacer la mutación si ocurre algún error o si el usuario lo solicita, restaurando el dato original.

Espero que te haya gustado este post y que te animes a probar React Query en tus proyectos. Si quieres saber más sobre esta librería, te recomiendo que visites su página web oficial, donde encontrarás mucha más información y ejemplos.

TanStack Query | React Query, Solid Query, Svelte Query, Vue Query