So verwenden Sie TanStack (React Query)

In der heutigen modernen Webentwicklung sind HTTP-Anfragen für Anwendungen von entscheidender Bedeutung, sodass die Notwendigkeit einer effizienten Datenverwaltung immer wichtiger wird. Dieser Artikel stellt Ihnen Tanstack, seine wichtigsten Funktionen und die ersten Schritte vor.

Tanstack

Tanstack ist eine erstaunliche Bibliothek für die Datenverwaltung in Anwendungen. Sie befasst sich mit Datenverwaltungsproblemen für asynchrone Datenoperationen. Es hilft Entwicklern, HTTP-Anfragen einfach auszuführen.

Was ist eine HTTP-Anfrage?

HTTP-Anfrage (Hypertext Transfer Protocol) ist normalerweise eine Nachricht, die von einem Browser an den Server gesendet wird, um eine Kommunikation zu initiieren und Daten oder Aktionen anzufordern. HTTP ist für das World Wide Web sehr wichtig, es ist ein grundlegender Bestandteil des Webs. Ohne sie hätten wir möglicherweise keine Bewerbungen.

Mit der HTTP-Anfrage können Frontend-Anwendungen über einen Endpunkt GET-, POST-, PUT-, DELETE-, PATCH-Aktionen usw. auf dem Server ausführen.

Vorteile der Verwendung von Tanstack

Caching und Datensynchronisierung: Mit integrierten Caching-Mechanismen optimiert tanstack die Leistung Ihrer Anwendung, indem es Daten lokal speichert. Dadurch wird die Anzahl der Anfragen reduziert, wodurch Ihre Bewerbung viel schneller erfolgt.

Optimistische Updates: Tanstack ermöglicht optimistische Updates, dies ermöglicht Entwicklern, die Benutzeroberfläche entsprechend zu aktualisieren. Es gibt erstaunliche Zustände wie den Fehler „isLoading“. Sie können diese verwenden, um einen Ladezustand bedingt darzustellen, während die Daten geladen werden.

Automatische Paginierung und unendliches Laden: Der Umgang mit großen Datensätzen wird dank der Unterstützung von tanstack für automatische Paginierung und unendliches Laden mühelos. Entwickler können Daten nahtlos in Blöcken abrufen und anzeigen und so die Anwendungsleistung und das Benutzererlebnis verbessern.
So verwenden Sie Tanstack

Zuerst müssen wir Tanstack installieren, indem wir npm i react-query auf unserem Terminal ausführen.

Wir müssen den QueryClientProvider in unsere Anwendung einfügen, damit wir Tanstack verwenden können. Wir werden es auch mit queryClient als Requisite bereitstellen. Sie können dies in der index.js-Datei Ihrer Anwendung erstellen.

import React von „react“;
ReactDOM aus „react-dom/client“ importieren;
import "./index.css";
App aus „./App“ importieren;
importiere reportWebVitals aus „./reportWebVitals“;
Nav aus „./Nav“ importieren;
import { BrowserRouter } from „react-router-dom“;
import { QueryClientProvider, QueryClient } from „react-query“;

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








);

reportWebVitals();

So rufen Sie Daten mit Tanstack ab

Jetzt werden wir mit Tanstack einige Daten von einem Endpunkt abrufen. Wir müssen useQuery aus React-Query (Tanstack) importieren.

import { useQuery } from „react-query“;

Dann werden wir es destrukturieren und daraus das isLoading, die Daten und die Fehlerzustände abrufen. Diese Zustände werden es uns ermöglichen, die positiven UI-Updates durchzuführen. Dadurch können wir basierend auf dem Status der Daten bedingt unterschiedliche Benutzeroberflächen rendern.

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

Dann müssen wir eine Abfrage übergeben. Eine Abfrage ist eine deklarative Abhängigkeit von einer asynchronen Datenquelle, die an einen eindeutigen Schlüssel gebunden ist. Diese Abfrage hilft uns beim Abrufen von Daten. In unserem Fall haben wir ein Array aus einer Zeichenfolge (Beitrag) und der ID jedes Beitrags. Es spielt keine Rolle, achten Sie nur darauf, dass es einzigartig ist.

Hier ist ein Beispiel aus der Tanstack-Dokumentation.

import { useQuery } from 'react-query'

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

Als nächstes müssen wir die Abfragefunktion einbinden. Diese Abfragefunktion ermöglicht es uns, die Daten von einem Endpunkt abzurufen. In unserem Fall haben wir unsere Funktion in einer separaten Datei erstellt und importiert. Hier ist unsere Abfragefunktion

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

Dies ist das Endergebnis

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>
  );
}

Wie Sie deutlich sehen können, ist es einfach, Tanstack (Reagierungsabfrage) zum Abrufen von Daten zu verwenden. Sie müssen useStates nicht mehr verwenden, um den Status Ihrer Daten zu bestimmen. In diesem Beispiel haben wir einzelne Beiträge abgerufen.

Mutationen

Mutations ermöglicht Ihnen das Erstellen, Löschen und Aktualisieren von Daten. Tanstack verfügt über useMutation, mit dem Sie Daten erstellen, löschen und aktualisieren können.

Wir müssen die Mutationsfunktion an useMutation übergeben und die Funktion dann mit den notwendigen Parametern für die spezifische Mutationsoperation versorgen, die Sie ausführen möchten. In unserem Fall werden wir die Beiträge aktualisieren.

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!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie TanStack (React Query). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!