Comment utiliser TanStack (requête React)

Dans le développement Web moderne d'aujourd'hui, la requête HTTP est très cruciale pour les applications, la nécessité d'une gestion efficace des données devient donc de plus en plus critique. Cet article vous présentera Tanstack, ses principales fonctionnalités et comment démarrer.

Tanstack

Tanstack est une bibliothèque étonnante pour la gestion des données dans les applications, elle résout les problèmes de gestion des données pour les opérations de données asynchrones. Il aide les développeurs à effectuer facilement des requêtes HTTP.

Qu'est-ce qu'une requête HTTP ?

La requête HTTP (Hypertext Transfer Protocol) est généralement un message envoyé par un navigateur au serveur pour initier une communication et demander des données ou des actions. HTTP est très important pour le World Wide Web, c'est un élément fondamental du Web. Sans cela, nous n'aurions peut-être pas de candidatures.

La requête HTTP permet aux applications frontales d'effectuer des actions GET, POST, PUT, DELETE, PATCH, etc. sur le serveur via un point de terminaison.

Avantages de l'utilisation de Tanstack

Mise en cache et synchronisation des données : grâce aux mécanismes de mise en cache intégrés, tanstack optimise les performances de votre application en stockant les données localement. Cela réduit le nombre de demandes, ce qui rendra votre candidature beaucoup plus rapide.

Mises à jour optimistes : Tanstack facilite les mises à jour optimistes, cela permet aux développeurs de mettre à jour l'interface utilisateur en conséquence. Il a des états étonnants comme l'erreur isLoading. Vous pouvez les utiliser pour afficher de manière conditionnelle un état de chargement pendant le chargement des données.

Pagination automatique et chargement infini : La gestion de grands ensembles de données devient sans effort grâce à la prise en charge de tanstack pour la pagination automatique et le chargement infini. Les développeurs peuvent facilement récupérer et afficher les données par morceaux, améliorant ainsi les performances des applications et l'expérience utilisateur.
Comment utiliser Tanstack

Tout d'abord, nous devons installer tanstack en exécutant npm i react-query sur notre terminal.

Nous devons injecter le QueryClientProvider dans notre application pour pouvoir utiliser Tanstack. Nous lui fournirons également le queryClient comme accessoire. Vous pouvez le créer dans le fichier index.js de votre application.

importer React depuis "react";
importer ReactDOM depuis "react-dom/client" ;
importer "./index.css";
importer l'application depuis "./App" ;
importer reportWebVitals depuis "./reportWebVitals" ;
importer Nav depuis "./Nav";
importer { BrowserRouter } depuis "react-router-dom";
importer { QueryClientProvider, QueryClient } depuis "react-query";

const root = ReactDOM.createRoot(document.getElementById("root"));
const queryClient = new QueryClient();
root.render(








);

reportWebVitals();

Comment récupérer des données avec Tanstack

Maintenant, nous allons récupérer des données à partir d'un point de terminaison à l'aide de Tanstack. Nous devons importer useQuery depuis React-Query (Tanstack).

importer { useQuery } depuis "react-query" ;

Ensuite, nous allons le déstructurer et en extraire le isLoading, les données et les états d'erreur. Ces états nous permettront d'effectuer les mises à jour optimistes de l'interface utilisateur. Cela nous permettra de restituer de manière conditionnelle différentes interfaces utilisateur en fonction de l'état des données.

const id = useParams()
const { isLoading, data, error } = useQuery(["post", id.id], () =>
getSignleQueryFunc(id.id)
)

Ensuite, nous devons transmettre une requête, une requête est une dépendance déclarative sur une source de données asynchrone qui est liée à une clé unique. Cette requête nous aidera à récupérer des données. Dans notre cas, nous avons un tableau d'une chaîne (post) et l'identifiant de chaque publication. Cela n'a pas vraiment d'importance, assurez-vous simplement qu'il est unique.

Voici un exemple tiré de la documentation Tanstack.

import { useQuery } from 'react-query'

function App() {
  const info = useQuery('todos', fetchTodoList)
}

Ensuite, nous devons inclure la fonction de requête, cette fonction de requête nous permet de récupérer les données d'un point de terminaison. Dans notre cas, nous avons créé notre fonction dans un fichier séparé et l'avons importé. Voici notre fonction de requête

export async function getSignleQueryFunc(id) {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${id}`
  );
  return response.json();
}

Voici le résultat final

import { useQuery } from "react-query";

import { getSignleQueryFunc } from "./getSignlePost";
import { useParams } from "react-router-dom";

export default function Posts() {
  const id = useParams();
  const { isLoading, data, error } = useQuery(["post", id.id], () =>
    getSignleQueryFunc(id.id)
  );

  if (error && data == undefined) return <p>Error fetching post</p>;

  return (
    <main>
      <h1>post</h1>
      <div>
        {isLoading ? (
          <div>Loading...</div>
        ) : (
          <div>
            <h3>{data.title}</h3>
            <p>{data.body}</p>
            <p>the number is {data.id}</p>
          </div>
        )}
      </div>
    </main>
  );
}

Comme vous pouvez clairement voir à quel point il est facile d'utiliser Tanstack (requête de réaction) pour récupérer des données. Vous n'avez plus besoin d'utiliser useStates pour déterminer l'état de vos données. Dans cet exemple, nous avons récupéré des publications uniques.

Mutations

Mutations vous permet de créer, supprimer et mettre à jour des données. Tanstack a useMutation que vous utiliserez pour créer, supprimer et mettre à jour des données.

Nous devons transmettre la fonction de mutation à useMutation, puis fournir à la fonction les paramètres nécessaires à l'opération de mutation spécifique que vous souhaitez effectuer. Dans notre cas, nous mettrons à jour les publications.

Here is how it is done
`
import { editPostFunc } from "./editPost";
import { useQuery, useMutation } from "react-query";
import { useParams } from "react-router-dom";
import { useState, useEffect } from "react";
import { getSignleQueryFunc } from "./getSignlePost";

export default function UpdatePost() {
const id = useParams();
const { data } = useQuery(["post", id.id], () => getSignleQueryFunc(id.id));
const [title, setTitle] = useState("");
const [body, setBody] = useState("");

useEffect(() => {
if (data) {
setTitle(data.title || "");
setBody(data.body || "");
}
}, [data]);

const itemUpdate = useMutation(editPostFunc, {
onSuccess: () => {

  console.log("Post updated successfully");
},
onError: (error) => {

  console.error("Error updating post:", error);
},

});

const handleSubmit = (e) => {
e.preventDefault();
const updatedData = {
id: id.id,
title: title,
body: body,
userId: data.userId,
};
itemUpdate.mutate(updatedData);
};

return (

hello everyone

type="text"
placeholder="first input"
name="title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
type="text"
placeholder="second input"
name="body"
value={body}
onChange={(e) => setBody(e.target.value)}
/>
click

</main>

);
}`

Here is how our editPostFunc looks like

export async function editPostFunc(updatedData) {
const res = await fetch(
https://jsonplaceholder.typicode.com/posts/${updatedData.id}`,
{
method: "PUT",
body: JSON.stringify({
id: updatedData.id,
title: updatedData.title,
body: updatedData.body,
userId: updatedData.userId,
}),
headers: {
"Content-type": "application/json; charset=UTF-8",
},
}
);
return res.json();
}
`

As you can see, we are fetching each post and storing the values in the useStates so that we can be able to edit them in the input fields. Once we are done editing it, we call the handleSubmit function. In this function, we are creating an object with the necessary property values, this includes the states we updated.

We will then send the object to the mutation function for the update. We also check if the edit was successful or not by console logging the result we are getting whenever we try to update a post.

You can clearly see how easy it is to carryout HTTP requests with Tanstack.

Difference between useQuery and useMutation

Use cases: useQuery is used to fetch data while useMutation is used for modifying data.

Conclusion

HTTP request is a very essential part of modern web development, it allow browsers to initiate a communication with a server to perform some actions like GET, POST, PUT, DELETE, PATCH etc. Tanstack on the other hand helps to make things easier for developers, it has some many benefits like optimistic UI updates, simplified data fetching etc.

I believe you have seen how easy it is to use Tanstack to handle HTTP requests and data management. Check out the Tanstack documentation here for more understanding and to explore other features of Tanstack.

Happy coding!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!