Tanstack Query, AKA React Query, est une bibliothèque populaire pour 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 récupération 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 à l'aide de yarn, exécutez la commande suivante dans votre terminal :

fil ajouter @tanstack/react-query

Après avoir installé la bibliothèque React Query, vous encapsulez l'ensemble de l'application dans le QueryClientProvider composant. Le QueryClientProvider encapsule l'ensemble de votre application et fournit une instance du RequêteClient à tous ses composants enfants.

Le RequêteClient est la pièce maîtresse de React Query. Le RequêteClient gère toute la logique de récupération et de mise en cache des données. Le QueryClientProvider le composant prend le RequêteClient comme accessoire et le rend disponible pour le reste de votre application.

Pour faire usage de la QueryClientProvider et le RequêteClient dans votre application, vous devez les importer depuis le @tanstack/react-query bibliothèque:

importer Réagir depuis'réagir';
importer RéagirDOM depuis'réagir-dom/client';
importer Application depuis'./Application';
importer { QueryClientProvider, QueryClient } depuis'@tanstack/react-query';
constante requêteClient = nouveau RequêteClient();
ReactDOM.createRoot(document.getEementd('racine')).rendre(



 </QueryClientProvider>
 </React.StrictMode>
)

Comprendre le hook useQuery

Le 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. Il 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; il doit être unique pour chaque requête de votre application. La clé peut être n'importe quelle valeur, telle qu'une chaîne, un objet ou un tableau.

Pour récupérer des données à l'aide de useQuery crochet, vous devez l'importer depuis le @tanstack/react-query bibliothèque, passer un queryKey et utiliser le queryFn pour récupérer les données d'une API.

Par exemple:

importer Réagir depuis'réagir';
importer axios depuis'axios';
importer { useQuery } depuis'@tanstack/react-query';
fonctionMaison() {
constante postQuery = useQuery({
 clé de requête: ['des postes'],
 requêteFn: asynchrone () => {
constante réponse = attendre axios.get(' https://jsonplaceholder.typicode.com/posts');
constante données = attendre réponse.données ;
retour données;
 }
 })
si( postQuery.isLoading ) retour ( <h1>Chargement...h1>)
si( postQuery.isError ) retour (<h1>Erreur lors du chargement des données !!!h1>)

retour (



Accueil</h1>
 { postQuery.data.map( (article) => ( <pclé={ID de l'article}>{élément.titre}p>)) }
 </div>
 )
}
exporterdéfaut Maison;

Le useQuery hook renvoie un objet qui contient des informations sur la requête. Le postQuery l'objet contient le est en cours de chargement, estErreur, et est un succès États. Le est en cours de chargement, estErreur, et est un succès les états gèrent le cycle de vie du processus de récupération des données. Le postQuery.data La propriété contient les données extraites de l'API.

Le est en cours de chargement state est une valeur booléenne qui indique si la requête est en train de charger des données. Quand le est en cours de chargement state est true, la requête est en cours et les données demandées ne sont pas disponibles.

Le estErreur state est également une valeur booléenne indiquant si une erreur s'est produite lors de la récupération des données. Quand estErreur est vrai, la requête n'a pas réussi à récupérer les données.

Le est un succès state est une valeur booléenne qui indique si la requête a réussi à récupérer les données. Quand est un succès est vrai, vous pouvez afficher les données récupérées dans votre application.

Notez que vous pouvez accéder au queryKey en utilisant le queryFn. Le queryFn prend un seul argument. Cet argument est un objet contenant les paramètres requis pour la requête API. L'un de ces paramètres est le queryKey.

Par exemple:

useQuery({
 clé de requête: ['des postes'],
 requêteFn: asynchrone (obj) => {
console.log( obj.queryKey );
 }
 })

Gérer les données obsolètes

La requête React offre de nombreuses façons de traiter les données obsolètes. La bibliothèque React Query garantit de faire automatiquement une nouvelle demande de récupération à votre API lorsque les données récupérées deviennent obsolètes. Cela garantit que vous restituez en permanence les données les plus à jour.

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

Le refetchInterval L'option 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({
 clé de requête: ['...'],
 requêteFn: () => {...},
 staleTime: 1000;
})

Dans cet exemple, le staleTime est de 1000 millisecondes (1 seconde). Les données récupérées deviendront obsolètes après 1 seconde, puis la bibliothèque React Query fera une autre requête de récupération à l'API.

Ici, vous utilisez le refetchInterval option pour contrôler l'intervalle de temps entre chaque requête de récupération automatique :

useQuery({
 clé de requête: ['...'],
 requêteFn: () => {...},
 refetchInterval: 6000;
})

Le 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 hook useMutation

Le useMutation hook est un outil puissant de la bibliothèque React Query. Il effectue une opération asynchrone mutations, telles que la création ou la mise à jour de données sur un serveur. En utilisant le useMutation hook, 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 Ajouter un message composant qui rend un formulaire avec un champ de saisie et un bouton d'envoi. Ce composant de formulaire utilisera le hook useMutation pour mettre à jour l'état :

importer Réagir depuis'réagir'
fonctionAjouter un message() {
constante[post, setPost] = React.useState({
 titre: ""
 })
fonctionhandleChange(événement) {
 setPost( (étatpréc) => ({
 ...prevState,
 [event.target.name]: événement.target.value
 }) )
 }
retour (



 taper="texte"
 espace réservé='Ajouter un titre'
 nom='titre'
 onChange={handleChange} 
 valeur={post.title}
 />
Ajouter un article</button>
 </form>
 )
}
exporterdéfaut AddPost ;

À l'intérieur de Ajouter un message le composant est un état poste qui sert d'objet avec une propriété, titre.

Le handleChange la fonction met à jour l'état poste chaque fois que les utilisateurs saisissent dans les champs de saisie. Après avoir créé le Ajouter un message composant, nous importons le useMutation hook et utilisez-le pour mettre à jour l'API.

Par exemple:

importer { useMutation } depuis'@tanstack/react-query'
importer axios depuis'axios';
constante newPostMutation = useMutation({
 mutationFn: asynchrone () => {
constante réponse = attendre axios.post('', {
 titre: poste.titre,
 });
constante données = réponse.données ;
retour données;
 }
 })

Le useMutation hook gère la requête HTTP pour créer un nouveau message. Le newPostMutation constante représente la fonction de mutation et ses options de configuration.

Le 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 valeur de la poste objet.

Pour exécuter le mutationFn, vous devrez appeler le newPostMutation.mutate() méthode:

constante handleSubmit = asynchrone (événement) => { 
 event.preventDefault();
 newPostMutation.mutate();
}
retour (


 taper="texte"
 espace réservé='Ajouter un titre'
 nom='titre'
 onChange={handleChange} 
 valeur={post.title}
 />
Ajouter un article</button>
 </form>
 )
}

La soumission du formulaire lancera le gérerSoumettre fonction. Le gérerSoumettre la fonction 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 explique comment gérer la récupération de données dans une application React à l'aide de 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. Il est facile à utiliser et ses capacités de mise en cache le rendent efficace et réactif.

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 les 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 de données.