Tanstack Query, alias React Query, est une bibliothèque populaire qui permet de récupérer des 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 traite de l’utilisation de React Query pour gérer la collecte de données dans une application React.
Installation et configuration de React Query
Vous pouvez installer React Query en utilisant npm ou yarn. Pour l’installer à l’aide de npm, exécutez la commande suivante dans votre terminal :
npm i @tanstack/react-query
Pour l’installer en utilisant yarn, exécutez la commande suivante dans votre terminal :
yarn add @tanstack/react-query
Après avoir installé la bibliothèque React Query, vous enveloppez l’ensemble de l’application dans le fichier QueryClientProvider composant. 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 Le composant QueryClientProvider prend la valeur QueryClient en tant qu’accessoire et le met à la disposition du reste de l’application.
Pour utiliser la fonction QueryClientProvider et l’option QueryClient dans votre application, vous devez les importer à partir du fichier @tanstack/react-query bibliothèque :
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
const queryClient = new QueryClient();
ReactDOM.createRoot(document.getEementd('root')).render(
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>
</React.StrictMode>
)
Comprendre le crochet useQuery
L’hameçon useQuery hook est une fonction fournie par la bibliothèque React Query, qui récupère les données 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).
Le 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 du fichier @tanstack/react-query passer un mot de passe à la bibliothèque queryKey et utiliser l’option queryFn pour récupérer les données d’une API.
Par exemple :
import React from 'react';
import axios from 'axios';
import { useQuery } from '@tanstack/react-query';
function Home() {
const postQuery = useQuery({
queryKey: ['posts'],
queryFn: async () => {
const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
const data = await response.data;
return data;
}
})
if( postQuery.isLoading ) return ( <h1>Loading....</h1>)
if( postQuery.isError ) return (<h1>Error loading data!!!</h1>)
return (
<div>
<h1>Home</h1>
{ postQuery.data.map( (item) => ( <p key={item.id}>{item.title}</p>)) }
</div>
)
}
export default Home;
Le useQuery renvoie un objet contenant des informations sur la requête. Le crochet postQuery contient l’objet isLoading, isErroret isSuccess états. L’état isLoading, isErroret isSuccess Les États membres de l’UE gèrent le cycle de vie du processus d’extraction des données. Les états postQuery.data contient les données extraites de l’API.
La propriété isLoading state est une valeur booléenne qui indique si la requête est en train de charger des données. Lorsque la valeur isLoading est vrai, la requête est en cours et les données demandées ne sont pas disponibles.
Le isError est également une valeur booléenne indiquant si une erreur s’est produite lors de l’extraction des données. Lorsque isError est vrai, la requête n’a pas réussi à récupérer les données.
Le estSuccès state est une valeur booléenne qui indique si la requête a permis de récupérer des données. Lorsque 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 l’outil 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 :
useQuery({
queryKey: ['posts'],
queryFn: async (obj) => {
console.log( obj.queryKey );
}
})
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 permet d’effectuer automatiquement une nouvelle requête 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 requête de récupération automatique en utilisant la fonction staleTime et refetchInterval options. 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 requête de récupération automatique de la bibliothèque React Query.
Par exemple :
useQuery({
queryKey: ['...'],
queryFn: () => {...},
staleTime: 1000;
})
Dans cet exemple, le staleTime est de 1000 millisecondes (1 seconde). Les données récupérées seront 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 option permettant de contrôler l’intervalle de temps entre chaque demande de récupération automatique :
useQuery({
queryKey: ['...'],
queryFn: () => {...},
refetchInterval: 6000;
})
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
Le useMutation hook 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 hook 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 AddPost qui rend un formulaire avec un champ de saisie et un bouton d’envoi. Ce composant de formulaire utilisera le crochet useMutation pour mettre à jour l’état :
import React from 'react'
function AddPost() {
const[post, setPost] = React.useState({
title: ""
})
function handleChange(event) {
setPost( (prevState) => ({
...prevState,
[event.target.name]: event.target.value
}) )
}
return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder='Add Title'
name='title'
onChange={handleChange}
value={post.title}
/>
<button>Add Post</button>
</form>
)
}
export default AddPost;
A l’intérieur du composant AddPost le composant est un état poste qui sert d’objet avec une propriété, titre.
Les handleChange la fonction met à jour l’état poste à chaque fois que les utilisateurs saisissent des données dans les champs de saisie. Après avoir créé le AddPost nous importons le composant useMutation et l’utiliser pour mettre à jour l’API.
Par exemple :
import { useMutation } from '@tanstack/react-query'
import axios from 'axios';
const newPostMutation = useMutation({
mutationFn: async () => {
const response = await axios.post('<https://jsonplaceholder.typicode.com/posts>', {
title: post.title,
});
const data = response.data;
return data;
}
})
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 comprend un objet contenant le code titre valeur de la poste objet.
Pour exécuter le programme mutationFnvous devrez appeler la fonction newPostMutation.mutate() méthode :
const handleSubmit = async (event) => {
event.preventDefault();
newPostMutation.mutate();
}
return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder='Add Title'
name='title'
onChange={handleChange}
value={post.title}
/>
<button>Add Post</button>
</form>
)
}
La soumission du formulaire exécutera la méthode handleSubmit fonction. La fonction handleSubmit est une fonction asynchrone qui déclenche la fonction de mutation newPostMutation.mutate().
La recherche de données efficace 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 des bibliothèques tierces pour gérer la récupération des données.
