W - I - React Query

Obtener datos del servidor y mantenerlos es un tema muy crucial cuando estamos desarrollando frontend.

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.

Beneficios de usar React-Query

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

• Configurar el stale, la caché y el tiempo de reintento creando un objeto queryClientConfig.
• Actualización de los datos obsoletos o stale data en segundo plano, ya que react-query hace un preajuste.
• Optimizar las peticiones al backend.
• Con la función refetchOnWindowFocus, se puede volver a buscar en segundo plano cuando el usuario cambia la pestaña del navegador o cuando vuelve a la aplicación.

Conceptos de React-query

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é.

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.

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.

React/Redux donde todo el estado está en local, React-Query ahorra mucho código boilerplate y sincroniza el estado local