deckardger/tanstack-query-mejores-prácticas

¿Qué hace tanstack-query-mejores-prácticas?

Mejores prácticas de TanStack Query (React Query) para la obtención de datos, almacenamiento en caché, mutaciones y gestión del estado del servidor. Actívese al construir aplicaciones React impulsadas por datos con estado del servidor.

Principios Clave

• Claves de Consulta: Defina claves de consulta de manera consistente y estructurada para facilitar el almacenamiento en caché y la invalidación. Ejemplo: ['proyectos', { id: proyectoId }].
• Manejo de Errores: Proporcione un manejo de errores robusto con límites de error de React o callbacks de error personalizados.
• Actualizaciones Optimistas: Use onMutate para aplicar cambios optimistas en la interfaz de usuario, revirtiéndolos en caso de error si es necesario.
• Invalidación de Caché: Invalide la caché solo cuando sea necesario para evitar solicitudes innecesarias, usando queryClient.invalidateQueries({ queryKey: key }).

Buenas Prácticas

1. Evite consultas en línea: Mueva la lógica de obtención de datos a hooks personalizados con useQuery.
2. Use selectores: Transforme datos con el parámetro select de useQuery para evitar renderizados innecesarios.
3. Configure tiempos de espera: Ajuste staleTime y cacheTime según la frecuencia de cambio de los datos.
4. Gestión de Mutaciones: Desacople las mutaciones del estado de la consulta principal con useMutation.
5. Pruebas: Pruebe los hooks de React Query con utilidades de prueba como QueryClientProvider en un entorno de prueba.

Ejemplo

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

function useProjects() {
  return useQuery({
    queryKey: ['projects'],
    queryFn: fetchProjects,
    staleTime: 5 * 60 * 1000, // 5 minutos
  });
}

function useCreateProject() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: createProject,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['projects'] });
    },
  });
}

Recursos Adicionales

• Documentación oficial de TanStack Query
• Estrategias de Caché