Récupération de données dans ReactJS/NextJS avec useSWR

« Steve Jobs a dit un jour : « L’innovation fait la distinction entre un leader et un suiveur. » La même chose s’applique au développement Web.

Alors allons au-delà utiliserEffet et apprenez une nouvelle façon de récupérer des données en utilisant utiliserSWR. Avant de plonger profondément dans le fonctionnement de useSWR, vous devez d’abord comprendre ce qu’est useSWR et pourquoi vous devez l’utiliser sur useEffect.

Qu’est-ce qu’utiliserSWR ?

utiliserSWR est une bibliothèque de hooks React tierce (par Vercel) conçue pour simplifier la récupération de données en fournissant des fonctionnalités intégrées telles que la mise en cache, la revalidation, la récupération du focus et la gestion des erreurs prêtes à l’emploi.

SWR signifie Stale-While-Revalidate. Le concept Stale-While-Revalidate signifie que pendant que SWR revalide les données, il traite les données obsolètes du cache, garantissant ainsi que vos données sont toujours à jour.

Pourquoi choisir useSWR plutôt que useEffect ?

Gestion des états de chargement, revalidation des données, prélecture, gestion des erreurs et gestion de plusieurs appels d’API avec utiliserEffet peut être fastidieux. Cela nécessite souvent d’écrire du code passe-partout pour gérer les états de chargement, la mise en cache et la gestion des erreurs.

useSWR élimine une grande partie de cette complexité, vous permettant de vous concentrer sur la logique spécifique à votre application. Vous allez maintenant comprendre comment fonctionne le hook useSWR et comment vous pouvez l’implémenter dans votre projet ReactJS/NextJS.

Les essentiels d’utilisationSWR

useSWR accepte trois paramètres, le troisième paramètre est facultatif et détermine la manière dont les données sont traitées et les deux premiers paramètres déterminent ce qui va être récupéré et comment il sera récupéré. De plus, le hook useSWR renvoie cinq valeurs. Nous discuterons brièvement de ces paramètres et valeurs dans la section suivante.

Paramètres

• clé: key param est généralement une chaîne (souvent une URL) ou un tableau ou un objet. La raison du clé name est dû au fait qu’il s’agit en fait d’un identifiant unique pour les données récupérées. Lors des mutations globales, la clé d’un hook useSWR est utilisée pour apporter des modifications spécifiques à ce hook. Ainsi, si vous utilisez la même clé dans différents composants, ils partageront le même cache.
• récupérateur: fetcher param est une fonction chargée de récupérer les données et renvoie une promesse.

Vous pouvez également utiliser ‘axios‘ au lieu de récupérer l’API. L’argumentation URL transmis à la fonction fetcher est le paramètre clé de useSWR.

Par défaut, la clé est le seul argument du récupérateur, mais que se passe-t-il si vous avez besoin de plus d’arguments pour la fonction de récupération ? Dans ce cas, vous avez besoin d’un tableau comme clé qui vous permet de transmettre plusieurs arguments à la fonction de récupération. Prenons un exemple pour mieux comprendre cela. Supposons que vous disposiez d’un point de terminaison d’API qui nécessite à la fois un ID utilisateur et un jeton pour récupérer les données utilisateur.

Ce n’est pas la bonne méthode car l’url ‘/api/utilisateur‘ n’inclut pas ID de l’utilisateur ou jetonet si l’un de ces éléments est modifié, useSWR utilisera toujours la même clé mise en cache et renverra les données précédentes, car les données mises en cache sont mappées avec une clé unique et doivent être uniques.

Pour résoudre ce problème, vous devrez transmettre ces arguments sous forme de tableau ou d’objet.

Le URL, ID de l’utilisateuret jeton sont désormais tous inclus dans le paramètre key, donc toute modification apportée à userId ou au token entraînera useSWR à utiliser une clé mise en cache différente, garantissant ainsi que les données correctes sont fournies.

• choix: Le troisième paramètre facultatif, options, est un objet qui vous permet de personnaliser la façon dont vos données récupérées sont gérées. Cela inclut le contrôle du moment où les données doivent être revalidées, le moment où réessayer de les récupérer et la spécification d’actions pour les demandes réussies et échouées. Vous trouverez ci-dessous quelques-unes des propriétés des options :

• • actualiserIntervalle: Prend un nombre et récupère automatiquement les données après l’intervalle spécifié (en millisecondes). Par défaut désactivé (refreshInterval = 0).

• • revaliderOnFocus: Prend une valeur booléenne et récupère les données lorsque la fenêtre retrouve le focus. Par défaut vrai.

• • erreurRetryInterval: prend un nombre et attend l’intervalle spécifié (en millisecondes) avant de réessayer une requête après son échec. Par défaut 5000 (5 secondes).

• • errorRetryCount: Prend un nombre et contrôle le nombre de fois où useSWR réessayera une demande lorsqu’une erreur se produit. Par défaut 8.

• • surSuccès et surErreur: C’est une fonction de rappel qui s’exécute respectivement lorsque la requête réussit ou génère une erreur.

Vous trouverez ci-dessous l’exemple d’options combinées.

Vous avez couvert certaines des sections de paramètres que vous devez transmettre dans useSWR, en passant maintenant à la section de réponse que vous obtenez de useSWR.

Comme mentionné précédemment ci-dessus, useSWR renvoie un total de cinq valeurs en réponse. Comprenons ce que c’est.

Réponse

• données: ce sont les données renvoyées par la requête vers la clé donnée. Si les données ne sont pas encore disponibles, elles ne sont pas définies.
• erreur: C’est un objet d’erreur si la requête a échoué, ou indéfini s’il n’y a pas d’erreur.
• est en cours de chargement: Il s’agit d’une valeur booléenne renvoyée qui indique que les données sont en cours de récupération.
• estValidating: Il s’agit d’une valeur booléenne renvoyée qui indique qu’il y a une demande en cours ou qu’une revalidation est en cours de chargement.
• subir une mutation: C’est une fonction permettant d’apporter des modifications aux données mises en cache spécifiques à une clé mise en cache donnée uniquement.

Vous avez terminé les bases de useSWR, vous trouverez ci-dessous l’exemple à grande échelle.

Sujets avancés liés à useSWR

Dans cette section, vous verrez quelques sujets avancés liés à useSWR qui peuvent vous aider à libérer tout son potentiel dans vos applications ReactJS ou NextJS.

Récupération conditionnelle

Parfois, vous devez récupérer des données qui dépendent du résultat d’une autre requête. useSWR vous permet de récupérer des données de manière conditionnelle en fonction de la disponibilité d’une clé ou d’un autre élément de données.

Ici, nous récupérons les messages d’un utilisateur uniquement après que les données de l’utilisateur ont été récupérées avec succès.

Mises à jour optimistes de l’interface utilisateur

Les mises à jour optimistes de l’interface utilisateur vous permettent de mettre à jour l’interface utilisateur immédiatement après une action, avant même que le serveur ne confirme la modification. utiliserSWR subir une mutation La fonction peut être utilisée à cette fin.

Stratégies de mise en cache

Vous pouvez apporter des modifications au cache par défaut à l’aide du hook useSWRConfig.

Comme vu ci-dessus, vous pouvez mettre à jour le cache par défaut de deux manières : la première est directement en cache.set() méthode (ligne de code commentée 16) et la seconde est par fonction de mutation donnée par le hook useSWRConfig.

Mais vous ne devez jamais mettre à jour le cache directement. Lorsque vous mettez à jour le cache directement (par exemple, en utilisant cache.set), d’autres composants ou hooks qui dépendent de ce cache peuvent ne pas être au courant de la mise à jour car elle contourne le mécanisme de revalidation intégré de SWR. Cela peut entraîner des incohérences dans votre interface utilisateur, car ces composants ne restitueront pas ou ne récupéreront pas automatiquement les données en fonction de la nouvelle valeur de cache, ce qui résulte du fait que votre application continue d’afficher des données obsolètes.

Donc, pour surmonter tout cela, vous devez toujours utiliser la fonction mutate pour mettre en cache les mises à jour. La fonction mutate met non seulement à jour le cache, mais déclenche également la revalidation ou le nouveau rendu des composants qui utilisent les données affectées. Cela garantit que toutes les parties de votre application restent synchronisées avec les données mises à jour.

Pagination

La mise en œuvre de la pagination à l’aide de useSWR peut être réalisée en gérant l’état de la page et en récupérant les données pour chaque page.

Ci-dessus est un exemple de chargement infini et cliquer sur le bouton « Charger plus » incrémente le page état, déclenchant une nouvelle récupération pour le prochain ensemble de données. Lorsque les données sont récupérées avec succès (surSuccès), il ajoute les nouvelles données au messages tableau.

Cependant, cela peut également être réalisé en utiliserSWRInfinite hook, spécialement conçu pour gérer la récupération de données paginées, telles que le défilement infini. useSWRInfinite simplifie le processus en gérant automatiquement la logique de pagination.

useSWRInfinite vous permet de récupérer des données dans des pages, chaque page étant chargée séquentiellement. La fonctionnalité clé de useSWRInfinite est la obtenir la clé fonction, qui définit la clé pour chaque page en fonction de l’index de la page.

Vous vous demandez peut-être pageIndex et donnéesPageprécédente. Comprenons cela.

PageIndex est un paramètre fourni automatiquement par le hook useSWRInfinite. Il s’agit d’un nombre représentant la page en cours de récupération. Cela commence à 0 pour la première page, à 1 pour la deuxième page, et ainsi de suite. Le hook useSWRInfinite gère en interne la logique de pagination et garde une trace du nombre de pages demandées jusqu’à présent. Chaque fois que tu appelles setSize(taille + 1)indiquant que vous souhaitez récupérer la page suivante, useSWRInfinite incrémente le pageIndex puis appelle la fonction getKey avec le pageIndex mis à jour.

En outre, le paramètre previousPageData joue un rôle important pour déterminer s’il faut continuer à récupérer davantage de données et comment construire la clé pour la page suivante. Ce paramètre représente les données renvoyées par la récupération de page précédente. Il vous permet d’inspecter le résultat de la dernière requête pour décider de récupérer ou non plus de données.

Lors de la récupération de la première page, previousPageData est nul et pour les pages suivantes, previousPageData contient les données qui ont été récupérées pour le pageIndex précédent.

Conclusion

En maîtrisant useSWR, vous débloquez un outil puissant pour une récupération efficace des données et une gestion de l’état dans vos applications React. Que vous créiez des fonctionnalités complexes telles que la pagination ou que vous optimisiez simplement les appels d’API, useSWR offre la flexibilité et les performances dont vous avez besoin pour offrir des expériences utilisateur transparentes.

Bon codage !