Obtención de datos y mantenimiento de la caché con React-Query

Obtener datos del servidor y mantenerlos es un tema muy crucial cuando estamos desarrollando frontend. En este artículo nos centraremos en las aplicaciones de la librería React.js y en cómo mantenemos el estado del servidor con la librería llamada React-Query.

Dentro de React-Query

En React, hay tres tipos de estado: el estado local, que se persiste en los componentes de React; el estado global, todos los componentes pueden acceder a él; y el estado del servidor que se persiste en el servidor la mayor parte del tiempo y depende de ambos lados. Para gestionar el estado del servidor en el frontend y sincronizarlo con el backend, necesitamos actualizar, almacenar en caché o recuperar los datos de forma eficiente. A veces llamamos al backend más de lo necesario, y esto podría causar problemas de rendimiento en nuestras aplicaciones. En este caso, la librería React-query nos ayuda a resolver estos problemas de rendimiento, a gestionar la caché de forma adecuada y a darnos características útiles como la cancelación de consultas, la configuración del tiempo de caducidad, el refetching infinito de consultas, etc.

React Query es una librería que cuenta con 2 sencillos hooks que proporcionan la obtención, el almacenamiento en caché y la actualización de datos asíncronos en las aplicaciones React. Fue creado por Tanner Linsley, adepto de proyectos Open Source en 2019, y ahora se ha demostrado que es muy útil en la gestión del estado del servidor en las aplicaciones React. También hay otras librerías como SWR, Apollo Client y RTK-Query para la gestión del estado del servidor y podemos ver su comparación con React query en su página web: https://react-query.tanstack.com/comparison. Según la comparación de la página de react-query, react-query es la mejor opción desde un punto de vista objetivo.

Beneficios de usar React-Query

Algunas de las ventajas que nos aporta React-Query son:

• Configurar el tiempo de retardo de stale, cache, retry creando un objeto queryClientConfig.
• Actualizar los datos obsoletos en segundo plano desde react-query prefetches.
• Optimización de las peticiones al backend.
• Con la función refetchOnWindowFocus, puede refetch en segundo plano cuando el usuario cambia la pestaña del navegador o cuando vuelve a la aplicación.

Y hay más que especificaremos más adelante. 

¿Qué son el stale y el cache time en los términos de React-query? Tal vez podamos empezar explicando los cinco estados de consulta que tiene React-query en su ciclo de desarrollo y que también encontraremos en React-Query Dev Tools. 

Fresh: Este estado es cuando tenemos los datos casi iguales en ambos lados (ya que cuando recibimos los datos, es posible que alguno se actualice al mismo tiempo) y no hay necesidad de hacer refetch.

Fetching: Cuando inicialmente recuperamos los datos con éxito o no.

Stale: Datos desfasados que tendremos que volver a obtener desde el backend.

Inactive: Este estado se utiliza para mejorar la velocidad/UX de nuestras aplicaciones. Es anterior al deleted state, el estado de borrado.

El último estado es el deleted state. Después de que los datos estén inactivos durante un tiempo (puedes configurar el tiempo) se borra de la caché.

Después de entender el estado de las consultas, podemos explicar el tiempo de stale y el tiempo de caché. El StaleTime es la duración de la transición del estado fresh al estado stale. Si estamos en el estado fresh, obtendremos los datos sólo de la caché, pero si estamos en el estado stale podemos hacer una búsqueda en segundo plano. CacheTime es la duración hasta que las consultas inactivas sean eliminadas de la caché. Podemos configurarlo pasando a un componente QueryClientProvider de la librería o pasando localmente en la llamada useQuery.

Los dos hooks que nos proporciona la librería son useQuery y useMutation. useQuery se utiliza para obtener datos y useMutation se utiliza para crear, borrar y actualizar los datos en el servidor. El useQuery toma una clave, una función para llamar a la api y un objeto para configurar esta llamada. Y todas las consultas serán almacenadas en el QueryCache.

const { data: questions = {}, isLoading}} = useQuery("questions",getQuestions,{staleTime:5000,cacheTime:10});

Además, puedes enviar parámetros dinámicos en useQuery, y se llamará al servicio cuando cambien. Por ejemplo, en el código de abajo, cuando los «vendors» cambien en el componente, se llamará al servicio de nuevo.

export const useFetchQuestions = (vendors: Array<string>,element: number) =>
 useQuery([vendors], () => FormService.getDynamicQuestions(vendors, element));

El useMutation llevará una función de mutación a un servicio como se requiere, pero la clave de mutación será opcional. Todas las mutaciones se almacenarán en el MutationCache. Y cuando necesitemos interactuar con QueryCache y MutationCache tendremos que acceder primero a QueryClient.

export const useDownloadFile = (filePath: string, fileId: number) =>
 useMutation(() => FormService.downloadFile(filePath, fileId));

Conclusión

React query es una gran herramienta para utilizar en aplicaciones React para gestionar el estado del servidor, lazy loading, paginación y el mantenimiento de la caché. Tiene un enfoque e implementación simple. Con su soporte de devtools, está claro que se puede utilizar también en aplicaciones más complejas. Después de trabajar con los proyectos que incluyen

React/Redux donde todo el estado está en local, React-Query ahorra mucho código boilerplate y sincroniza el estado local con el servidor. Espero que este artículo pueda ayudar a resumir lo que React-Query puede aportar a tus proyectos. Y para temas más avanzados, te recomiendo encarecidamente que eches un vistazo a este blog: https://tkdodo.eu/blog/practical-react-query que está escrito por uno de los mayores colaboradores de esta librería y sus artículos pueden ser de gran ayuda.

Links de interés

Data fetching in Redux is painful, get rid of it now por Davide Cantelli @Medium

Why I Stopped Using Redux por Gabriel Abud @Dev.to

React Query – An Underrated State Management Tool por Tharaka Romesh @Bits and Pieces

React state management in 2022 – Return of the Redux por Kolby Sisk @Udacity

Comparison | React Query vs SWR vs Apollo vs RTK Query @React Query

RTK Query Comparision @Redux Toolkit

RTK Query: The future of data fetching and caching for Redux por Dylan Tientcheu @LogRocket

How and Why You Should Use React Query por Nathan Sebhastian @Bits and Pieces

Getting Started with React-Query for Data Fetching and State Management por Kevin Kimani @Section

React Query and management of server state por Nicolas Santos @Dev.to