Comment gérer la récupération de données dans React.js en utilisant Tanstack Query

Tanstack Query, AKA React Query, est une bibliothèque populaire pour la récupération de données dans les applications React. React Query simplifie le processus de récupération, de mise en cache et de mise à jour des données dans les applications web. Cet article traitera de l’utilisation de React Query pour gérer la récupération de données dans une application React.

Installation et configuration de React Query

Vous pouvez installer React Query à l’aide de npm ou de yarn. Pour l’installer à l’aide de npm, exécutez la commande suivante dans votre terminal :

Pour l’installer à l’aide de yarn, exécutez la commande suivante dans votre terminal :

Après avoir installé la bibliothèque React Query, vous enveloppez l’ensemble de l’application dans le fichier QueryClientProvider . Le composant QueryClientProvider enveloppe l’ensemble de votre application et fournit une instance du composant QueryClient à tous ses composants enfants.

Le QueryClient est la pièce maîtresse de React Query. Le QueryClient gère toute la logique de récupération et de mise en cache des données. Le QueryClientProvider prend en charge le composant QueryClient et le met à la disposition du reste de l’application.

Pour utiliser le QueryClientProvider et le QueryClient dans votre application, vous devez les importer à partir du fichier @tanstack/react-query de la bibliothèque @tanstack/react-query :

Comprendre le crochet useQuery

La useQuery est une fonction fournie par la bibliothèque React Query, qui récupère des données à partir d’un serveur ou d’une API. Elle accepte un objet avec les propriétés suivantes : queryKey (la clé de la requête) et queryFn (une fonction qui renvoie une promesse qui résout les données que vous souhaitez récupérer).

Les queryKey identifie la requête ; elle doit être unique pour chaque requête de votre application. La clé peut être une valeur quelconque, telle qu’une chaîne de caractères, un objet ou un tableau.

Pour récupérer des données à l’aide de la fonction useQuery vous devez l’importer à partir de l’élément @tanstack/react-query et passer un queryKey et utilisez la bibliothèque queryFn pour extraire les données d’une API.

Par exemple :

Les useQuery renvoie un objet contenant des informations sur la requête. Le crochet postQuery contient l’objet isLoading, isError et isSuccess indique. Les états isLoading, isError et isSuccess gèrent le cycle de vie du processus de recherche de données. Les états postQuery.data contient les données extraites de l’API.

La propriété isLoading est une valeur booléenne qui indique si la requête est en train de charger des données. Lorsque l’état isLoading est vrai, la requête est en cours et les données demandées ne sont pas disponibles.

L’état isError est également une valeur booléenne indiquant si une erreur s’est produite lors de l’extraction des données. Lorsque l’état isError isError est vrai, la requête n’a pas réussi à récupérer les données.

L’erreur est vraie, la requête a échoué dans la récupération des données. isSuccess est une valeur booléenne qui indique si la requête a permis de récupérer des données. Lorsque l’état isSuccess isSuccess est vrai, vous pouvez afficher les données récupérées dans votre application.

Notez que vous pouvez accéder à l’élément queryKey à l’aide de la clé queryFn. Les queryFn prend un seul argument. Cet argument est un objet contenant les paramètres requis pour la demande d’API. L’un de ces paramètres est l’élément queryKey.

Par exemple :

Traitement des données périmées

React query propose de nombreuses façons de gérer les données périmées. La bibliothèque React Query veille à effectuer automatiquement une nouvelle demande de récupération auprès de votre API lorsque les données récupérées deviennent périmées. Cela garantit que vous rendez continuellement les données les plus récentes.

Vous pouvez contrôler la vitesse à laquelle vos données deviennent périmées et l’intervalle de temps entre chaque demande de récupération automatique en utilisant la fonction staleTime et refetchInterval . Les options staleTime est une propriété qui spécifie le nombre de millisecondes pendant lesquelles les données mises en cache sont valides avant de devenir périmées.

L’option refetchInterval est une propriété qui spécifie le nombre de millisecondes entre chaque demande de récupération automatique de la bibliothèque React Query.

Par exemple :

Dans cet exemple, l’option staleTime est de 1000 millisecondes (1 seconde). Les données récupérées deviendront périmées au bout d’une seconde, et la bibliothèque React Query effectuera alors une nouvelle demande de récupération auprès de l’API.

Ici, vous utilisez l’option refetchInterval pour contrôler l’intervalle de temps entre chaque demande de récupération automatique :

L’option refetchInterval est de 6000 millisecondes (6 secondes). La requête React déclenchera automatiquement une nouvelle demande de récupération pour mettre à jour les données mises en cache après 6 secondes.

Comprendre le crochet useMutation

Les useMutation est un outil puissant de la bibliothèque React Query. Il effectue des mutations d’opérations asynchrones, telles que la création ou la mise à jour de données sur un serveur. En utilisant le crochet useMutation vous pouvez facilement mettre à jour l’état de votre application et l’interface utilisateur en fonction de la réponse de la mutation.

Ci-dessous, nous avons créé un hook AddPost qui rend un formulaire avec un champ de saisie et un bouton de soumission. Ce composant de formulaire utilisera le hook useMutation pour mettre à jour l’état :

Dans le composant AddPost se trouve un état poste qui sert d’objet avec une propriété, le titre.

Le handleChange met à jour l’état post lorsque les utilisateurs saisissent des données dans les champs de saisie. Après avoir créé l’état AddPost nous importons le composant useMutation et l’utilisons pour mettre à jour l’API.

Par exemple :

Le useMutation gère la requête HTTP de création d’un nouveau message. Le crochet newPostMutation représente la fonction de mutation et ses options de configuration.

La mutationFn est une fonction asynchrone qui envoie une requête POST au point de terminaison de l’API. La requête inclut un objet contenant le titre de l’élément post de l’objet.

Pour exécuter l’objet mutationFn vous devez appeler la fonction newPostMutation.mutate() :

En soumettant le formulaire, la méthode handleSubmit . La fonction handleSubmit est une fonction asynchrone qui déclenche la fonction de mutation newPostMutation.mutate().

Récupération efficace des données avec Tanstack Query

Cet article explore comment gérer la récupération de données dans une application React en utilisant la bibliothèque tanstack/react-query.

La bibliothèque tanstack/react-query fournit un outil puissant et flexible pour récupérer et mettre en cache des données dans les applications React. Elle est facile à utiliser et ses capacités de mise en cache la rendent efficace et réactive.

Que vous construisiez un petit projet personnel ou une application d’entreprise étendue, la bibliothèque tanstack/react-query peut vous aider à gérer et à afficher des données de manière efficace et efficiente. Outre React, Next.js fournit également plusieurs processus intégrés et bibliothèques tierces pour gérer la récupération des données.

S’abonner à notre newsletter