React Query en React Native: gestión de estado del servidor

El problema del estado del servidor

El 80% del "estado" en apps React Native son datos del servidor: usuarios, productos, pedidos, mensajes. Manejarlos con useState y useEffect es tedioso y propenso a bugs. React Query (TanStack Query) fue diseñado específicamente para este problema. En Deepyze es parte de nuestro stack estándar.

Instalación

npm install @tanstack/react-query

Setup inicial

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5,  // 5 minutos
      gcTime: 1000 * 60 * 10,    // 10 minutos
    },
  },
});

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* tu app */}
    </QueryClientProvider>
  );
}

Fetching de datos con useQuery

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

function Productos() {
  const { data, isLoading, error, refetch } = useQuery({
    queryKey: ['productos'],
    queryFn: () => api.get('/productos').then(r => r.data),
  });

  if (isLoading) return <Skeleton />;
  if (error) return <ErrorView onRetry={refetch} />;

  return <FlatList data={data} />;
}

Mutaciones

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

function CrearProducto() {
  const queryClient = useQueryClient();
  const mutation = useMutation({
    mutationFn: (producto) => api.post('/productos', producto),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['productos'] });
    },
  });
}

Beneficios automáticos

• Caché inteligente: no re-fetcha si los datos son frescos
• Re-fetch al volver al foco de la app
• Re-fetch cuando vuelve la conectividad
• Retry automático en errores de red
• Deduplicación de requests

¿Querés que implementemos una arquitectura de datos limpia? Hablá con Deepyze.