TanStack Query : La gestion d'état serveur simplifiée en React

Le problème de l'état serveur

La gestion des données provenant d'un serveur (fetching, caching, mise à jour) représente 80% de la complexité d'une application React. TanStack Query (anciennement React Query) résout ce problème élégamment.

Installation et configuration

npm install @tanstack/react-query

// main.tsx
const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Router />
    </QueryClientProvider>
  );
}

useQuery : Fetching de données

Le hook useQuery gère automatiquement le loading, l'erreur, le cache et la revalidation :

const { data, isLoading, error } = useQuery({
  queryKey: ['users'],
  queryFn: () => fetch('/api/users').then(r => r.json()),
});

Cache intelligent

TanStack Query met en cache les résultats et les réutilise pendant une durée configurable (staleTime). Les données sont automatiquement rafraîchies en arrière-plan quand elles deviennent périmées.

useMutation : Mutations de données

Le hook useMutation gère les opérations d'écriture avec des callbacks onSuccess, onError et l'invalidation automatique du cache associé.

Optimistic Updates

Les mises à jour optimistes améliorent la réactivité de l'interface en appliquant immédiatement le changement côté client, puis en synchronisant avec le serveur en arrière-plan.

Conclusion

TanStack Query élimine des centaines de lignes de code boilerplate liées à la gestion d'état asynchrone. C'est aujourd'hui un outil incontournable dans tout projet React professionnel qui communique avec une API.