Hook useSWR : récupération, chargement et erreurs

useSWR(key, fetcher, options) est le hook principal. key est la clé du cache (généralement une chaîne d’URL), fetcher est la fonction asynchrone qui renvoie les données et options est un objet de configuration facultatif.

Le hook renvoie un objet contenant data, error, isLoading, isValidating et la fonction mutate.

La clé peut être une URL sous forme de chaîne, un tableau de [url, params] ou null. Les clés sous forme de chaîne correspondent à de simples requêtes GET. Les clés sous forme de tableau permettent d’intégrer des variables comme userId ou des filtres dans l’identité du cache.

Passer null désactive entièrement la requête, ce qui est utile pour la récupération conditionnelle lorsque les données nécessaires ne sont pas encore disponibles.

La fonction de récupération reçoit la clé (ou les éléments d’une clé de tableau passés comme arguments) et doit renvoyer une Promise. La valeur résolue devient data. Si la fonction de récupération lève une exception, la propriété error est définie.

Exemple : (url) => fetch(url).then(r => { if (!r.ok) throw new Error(r.status); return r.json(); }).

data vaut undefined lors du premier chargement et prend la valeur renvoyée par la fonction de récupération après une réussite. error vaut undefined, sauf si la fonction de récupération a levé une exception ; dans ce cas, error contient l’objet d’erreur généré.

Vérifiez if (error) pour afficher un message d’erreur et if (!data) pour afficher un squelette de chargement, afin de fournir des interfaces de secours claires.

isLoading vaut true uniquement lorsqu’aucune donnée n’est mise en cache et qu’une requête est en cours : il s’agit du tout premier chargement pour cette clé. isValidating vaut true dès qu’une requête est en cours, y compris lors des revalidations en arrière-plan lorsque des données en cache existent déjà.

Utilisez isLoading pour les écrans squelettes ; utilisez isValidating pour afficher un indicateur discret signalant une actualisation en arrière-plan.

SWRConfig vous permet de définir la fonction de récupération par défaut, dedupingInterval, refreshInterval, un gestionnaire onError et d’autres options pour tous les appels à useSWR dans son sous-arbre. Cela centralise la configuration au lieu de répéter les options dans chaque hook.

Imbriquez plusieurs fournisseurs SWRConfig pour disposer de valeurs par défaut différentes dans les différentes sections de votre application.

Passez null comme clé pour ignorer la requête : useSWR(isLoggedIn ? '/api/user' : null, fetcher). SWR n’effectuera aucune récupération tant que la clé ne sera pas une valeur non nulle.

C’est plus clair que l’option skip de React Query. Le passage de la clé de null à une chaîne déclenche automatiquement la première récupération.

Enchaînez les hooks SWR pour les requêtes dépendantes : const { data: user } = useSWR('/api/me', fetcher), puis const { data: orders } = useSWR(user ? '/api/orders/' + user.id : null, fetcher). Le second hook attend la résolution du premier.

Ce modèle évite les chaînes de useEffect et garde les dépendances de données déclaratives et lisibles.

Si un composant d’en-tête et un composant de barre latérale appellent tous deux useSWR('/api/user', fetcher), SWR n’envoie qu’une seule requête et partage le résultat. Les deux composants effectuent un nouveau rendu ensemble lorsque les données ou l’erreur sont mises à jour.

Cette déduplication se produit automatiquement pendant la fenêtre dedupingInterval (2000ms par défaut), sans configuration supplémentaire.

refreshInterval: 5000 lance une interrogation toutes les 5 secondes. refreshWhenHidden: false arrête les interrogations lorsque l’onglet n’est pas visible. shouldRetryOnError: false désactive les nouvelles tentatives automatiques. revalidateOnFocus: false désactive la revalidation déclenchée par le retour au premier plan.

Combinez les options pour répondre à vos exigences de fraîcheur des données : les tableaux de bord utilisent souvent refreshInterval, tandis que le contenu statique définit revalidateOnFocus: false.

Pour les données paginées, incluez le numéro de page dans la clé : useSWR(['/api/items', page], fetcher). Changer de page déclenche une nouvelle récupération pour cette page tout en mettant les pages précédentes en cache.

SWR fournit également useSWRInfinite pour les modèles fondés sur un curseur ou le défilement infini, avec une fonction getKey qui construit les clés en fonction de l’index de page et des données de la page précédente.

Que se passe-t-il lorsque vous passez null comme clé à useSWR ?

useSWR(key, fetcher) renvoie data, error, isLoading et isValidating. Les clés null désactivent la récupération pour les requêtes conditionnelles et dépendantes. isLoading indique le premier chargement ; isValidating indique toute requête en cours. SWRConfig centralise les valeurs par défaut et la déduplication des requêtes entre les composants est automatique.

Des options comme refreshInterval, revalidateOnFocus et shouldRetryOnError permettent d’affiner le comportement de fraîcheur des données pour chaque hook ou globalement.