Mejores Prácticas y Patrones para Administrar Solicitudes de API y Estados

React Query es una biblioteca robusta y completa para obtener y actualizar datos. Ofrece funciones como almacenamiento en caché, sincronización de datos, deduplicación de solicitudes y mucho más. Facilita la vida en proyectos de tamaño medio a grande, mejorando la eficiencia del código, facilitando la mantenibilidad y extensión del código, y proporcionando un manejo automático de estados y lógica de cancelación.

El gancho useQuery en React Query se utiliza para realizar operaciones de obtención de datos. Acepta un identificador único y una función fetcher que retorna los datos a ser cargados. useQuery gestiona automáticamente el almacenamiento en caché, la actualización y la sincronización de los datos, así como el estado de carga y error.

Los cargadores y acciones son funciones en React Router que permiten manejar la carga de datos y las acciones (como envíos de formularios) antes de que se renderice un componente. Estas funciones mejoran el rendimiento al evitar renderizados innecesarios y aseguran que los componentes tienen acceso a los datos necesarios tan pronto como están disponibles.

En React Query, la cancelación de solicitudes se maneja automáticamente. Puedes proporcionar una 'señal de aborto' a las funciones fetcher dentro de useQuery o useMutation, que React Query utilizará para cancelar las solicidades de red cuando un componente se desmonte o cuando una nueva solicitud de datos sea necesaria.

useMutation es un gancho utilizado para realizar modificaciones en los datos (como POST, PUT, PATCH, DELETE). Gestiona el estado de la operación, incluyendo el estado de carga y error, y proporciona callbacks para actualizar el estado global de la aplicación cuando la mutación es exitosa o cuando ocurre un error.

Puedes integrar React Query con React Router utilizando los cargadores de React Router para disparar las queries. Esto se hace pasando la función de React Query directamente en el cargador de una ruta, lo que permite que los datos se carguen antes de que el componente se renderice, asegurando que el componente tenga acceso inmediato a los datos necesarios.