SWR et React Query pour la mise en cache des données
Utilisez SWR ou TanStack Query pour récupérer, mettre en cache, dédupliquer et revalider les données du serveur, en remplaçant les schémas manuels de récupération avec useEffect.
SWR et React Query pour la mise en cache des données est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
L’état du serveur est différent
Les données réseau ne sont pas un simple état ordinaire. Elles nécessitent : mise en cache, déduplication, actualisation en arrière-plan, suivi du chargement et des erreurs, et nouvelles tentatives. Les modèles de récupération manuelle avec useEffect + useState réimplémentent mal ces fonctionnalités.
SWR ou TanStack Query
SWR (Vercel) : léger, simple et uniquement fondé sur des hooks. TanStack Query (anciennement React Query) : plus volumineux, avec davantage de fonctionnalités (mutations, défilement infini, préchargement, outils de développement). Les deux sont excellents.
SWR — utilisation de base
useSWR(key, fetcher) renvoie les données, l’erreur et l’état de chargement. Les données sont mises en cache par clé et dédupliquées entre les composants.
import useSWR from 'swr';
const fetcher = (url) => fetch(url).then(r => r.json());
function Profile() {
const { data, error, isLoading } = useSWR('/api/me', fetcher);
if (error) return <ErrorMessage error={error} />;
if (isLoading) return <Spinner />;
return <h1>{data.name}</h1>;
}SWR — comportement de la revalidation
Par défaut, SWR effectue une revalidation lors du focus (lorsque l’onglet reprend le focus) et lors de la reconnexion. Il renvoie immédiatement la valeur mise en cache (« périmée »), puis la met à jour en arrière-plan (« pendant la revalidation »).
SWR — mutation
mutate(key) revalide une requête mise en cache. Passez de nouvelles données comme deuxième argument pour effectuer une mise à jour optimiste.
import useSWR, { mutate } from 'swr';
async function updateProfile(updates) {
// Optimistic update — UI reflects change immediately
mutate('/api/me', { ...currentData, ...updates }, false);
await fetch('/api/me', { method: 'PUT', body: JSON.stringify(updates) });
// Revalidate to get the server's canonical state
mutate('/api/me');
}TanStack Query — configuration
Entourez votre application d’un QueryClientProvider utilisant un QueryClient configuré.
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const client = new QueryClient({
defaultOptions: {
queries: { staleTime: 30000, retry: 2 }
}
});
function App() {
return (
<QueryClientProvider client={client}>
<Routes />
</QueryClientProvider>
);
}useQuery
useQuery({ queryKey, queryFn }) récupère les données et les met en cache.
import { useQuery } from '@tanstack/react-query';
function UserList() {
const { data, isLoading, error } = useQuery({
queryKey: ['users'],
queryFn: () => fetch('/api/users').then(r => r.json()),
staleTime: 60_000 // fresh for 1 minute
});
if (isLoading) return <Spinner />;
if (error) return <ErrorMessage error={error} />;
return <ul>{data.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}useMutation pour les écritures
useMutation gère les opérations POST/PUT/DELETE avec un état intégré d’attente et d’erreur, ainsi qu’un hook onSuccess pour invalider les caches.
import { useMutation, useQueryClient } from '@tanstack/react-query';
function CreateUserForm() {
const qc = useQueryClient();
const m = useMutation({
mutationFn: (user) => fetch('/api/users', { method: 'POST', body: JSON.stringify(user) }),
onSuccess: () => qc.invalidateQueries({ queryKey: ['users'] })
});
return <button onClick={() => m.mutate({ name: 'Alice' })} disabled={m.isPending}>Create</button>;
}Invalidation des requêtes
Après une mutation, invalidez les requêtes associées pour déclencher une nouvelle récupération. queryClient.invalidateQueries({ queryKey: ['users'] }) les marque comme périmées et les récupère à nouveau si elles sont montées.
Mises à jour optimistes
TanStack Query offre une prise en charge native des mises à jour optimistes via onMutate, onError et onSettled.
useMutation({
mutationFn: updateUser,
onMutate: async (newUser) => {
await qc.cancelQueries({ queryKey: ['user', newUser.id] });
const previous = qc.getQueryData(['user', newUser.id]);
qc.setQueryData(['user', newUser.id], newUser);
return { previous };
},
onError: (_, newUser, ctx) => {
qc.setQueryData(['user', newUser.id], ctx.previous); // rollback
},
onSettled: (_, __, newUser) => {
qc.invalidateQueries({ queryKey: ['user', newUser.id] });
}
});Requêtes infinies
useInfiniteQuery gère les listes paginées ou à défilement infini : il expose fetchNextPage et suit toutes les pages chargées.
Outils de développement de React Query
Ajoutez @tanstack/react-query-devtools pour afficher un panneau flottant qui présente toutes les requêtes mises en cache et leur état, et permet de les invalider manuellement.
Vérification rapide
Quel est le principal avantage de SWR ou de TanStack Query par rapport à l’utilisation manuelle de useEffect et de fetch ?
Récapitulatif : SWR et React Query
L’état du serveur nécessite une mise en cache, une déduplication et une revalidation. SWR est léger et simple. TanStack Query offre davantage de fonctionnalités (mutations, requêtes infinies, outils de développement). Utilisez useQuery pour les lectures et useMutation pour les écritures. Appelez invalidateQueries après les mutations. Effectuez des mises à jour optimistes avec onMutate/onError. Les deux rendent les modèles manuels useEffect+fetch inadaptés aux applications en production.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 41
- Leçons
- 163
Questions Fréquemment Posées
La leçon « SWR et React Query pour la mise en cache des données » est-elle gratuite ?
Oui — le texte complet de « SWR et React Query pour la mise en cache des données » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « SWR et React Query pour la mise en cache des données » ?
Utilisez SWR ou TanStack Query pour récupérer, mettre en cache, dédupliquer et revalider les données du serveur, en remplaçant les schémas manuels de récupération avec useEffect. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « SWR et React Query pour la mise en cache des données » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- API Fetch : GET, POST, PUT et DELETE
- Axios : intercepteurs et URL de base
- Gestion des erreurs : codes d’état HTTP
- SWR et React Query pour la mise en cache des données