Retour à la leçonMission
Mission : réconcilier deux useQuery qui ne se font pas confiance
Diagnostiquer un refetch réseau inutile malgré une clé de cache partagée, puis migrer une inscription vers une mutation optimiste avec rollback.
Contexte
Sur Dashboard.jsx, le widget "Cours populaires" appelle useQuery({ queryKey: ["cours"], queryFn, staleTime: 5 * 60_000 }), tandis que le menu latéral appelle useQuery({ queryKey: ["cours"], queryFn }) sans préciser staleTime. Les deux partagent pourtant la même entrée de cache. Au montage de la page, le Profiler réseau montre malgré tout une requête /api/cours qui repart, dix secondes seulement après que le widget a rempli le cache. Il faut aussi migrer BoutonInscription vers une mise à jour optimiste avec rollback propre en cas d'échec réel de l'API.