Cara Menggunakan TanStack (React Query)

Dalam pembangunan web moden hari ini, permintaan HTTP sangat penting untuk aplikasi, jadi keperluan untuk pengurusan data yang cekap menjadi semakin kritikal. Artikel ini akan mendedahkan anda kepada Tanstack, ciri utamanya dan cara untuk bermula.

Tanstack

Tanstack ialah perpustakaan yang menakjubkan untuk pengurusan data dalam aplikasi, ia menangani isu pengurusan data untuk operasi data tak segerak. Ia membantu pembangun melaksanakan permintaan HTTP dengan mudah.

Apakah permintaan HTTP?

Permintaan HTTP (Hypertext Transfer Protocol) biasanya mesej yang dihantar oleh penyemak imbas ke pelayan untuk memulakan komunikasi dan untuk meminta data atau tindakan. HTTP adalah sangat penting kepada World Wide Web, ia adalah bahagian asas web. Tanpanya, kami mungkin tidak mempunyai aplikasi.

Permintaan HTTP membenarkan aplikasi bahagian hadapan melakukan tindakan GET, POST, PUT, DELETE, PATCH dll pada pelayan melalui titik akhir.

Faedah menggunakan Tanstack

Caching dan Penyegerakan Data: Dengan mekanisme caching terbina dalam, tanstack mengoptimumkan prestasi aplikasi anda dengan menyimpan data secara setempat. Ini mengurangkan bilangan permintaan, yang akan menjadikan permohonan anda menjadi lebih pantas.

Kemas Kini Optimis: Tanstack memudahkan kemas kini optimistik, ini membolehkan pembangun mengemas kini UI dengan sewajarnya. Ia mempunyai keadaan yang menakjubkan seperti, ralat, isLoading. Anda boleh menggunakan ini untuk memberikan keadaan pemuatan secara bersyarat semasa data sedang dimuatkan.

Penomboran Automatik dan Pemuatan Tak Terhingga: Mengendalikan set data yang besar menjadi mudah dengan sokongan tanstack untuk penomboran automatik dan pemuatan tak terhingga. Pembangun boleh mengambil dan memaparkan data dalam ketulan dengan lancar, meningkatkan prestasi aplikasi dan pengalaman pengguna.
Cara menggunakan Tanstack

Mula-mula, kita perlu memasang tanstack dengan menjalankan npm i react-query pada terminal kita.

Kami perlu menyuntik QueryClientProvider dalam aplikasi kami supaya kami boleh menggunakan Tanstack. Kami juga akan menyediakannya dengan queryClient sebagai prop. Anda boleh mencipta ini dalam fail index.js aplikasi anda.

import React daripada "react";
import ReactDOM daripada "react-dom/client";
import "./index.css";
import Apl daripada "./App";
import reportWebVitals daripada "./reportWebVitals";
import Nav daripada "./Nav";
import { BrowserRouter } daripada "react-router-dom";
import { QueryClientProvider, QueryClient } daripada "react-query";

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








);

reportWebVitals();

Cara Mengambil Data Dengan Tanstack

Sekarang, kami akan mengambil beberapa data dari titik akhir menggunakan Tanstack. Kita perlu mengimport useQuery daripada react-query (Tanstack).

import { useQuery } daripada "react-query";

Kemudian kami akan memusnahkannya dan mendapatkan isLoading, data dan keadaan ralat daripadanya. Keadaan ini akan membolehkan kami melaksanakan kemas kini UI yang optimistik. Ini akan membolehkan kami memberikan UI berbeza secara bersyarat berdasarkan keadaan data.

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

Kemudian kita perlu menghantar pertanyaan, pertanyaan ialah pergantungan deklaratif pada sumber data tak segerak yang terikat pada kunci unik. Pertanyaan ini akan membantu kami mengambil data. Dalam kes kami, kami mempunyai tatasusunan rentetan (siaran) dan id setiap siaran. Ia tidak penting, cuma pastikan ia unik.

Berikut ialah contoh daripada dokumentasi Tanstack.

import { useQuery } from 'react-query'

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

Seterusnya, kita perlu memasukkan fungsi pertanyaan, fungsi pertanyaan ini membolehkan kita mengambil data dari titik akhir. Dalam kes kami, kami mencipta fungsi kami dalam fail berasingan dan mengimportnya. Berikut ialah fungsi pertanyaan kami

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

Ini adalah keputusan akhir

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

Seperti yang anda boleh lihat dengan jelas betapa mudahnya menggunakan Tanstack (pertanyaan bertindak balas) untuk mengambil data. Anda tidak perlu menggunakan useStates lagi untuk menentukan keadaan data anda. Dalam contoh ini, kami mengambil siaran tunggal.

Mutasi

Mutasi membolehkan anda mencipta, memadam dan mengemas kini data. Tanstack mempunyai useMutation yang akan anda gunakan untuk mencipta, memadam dan mengemas kini data.

Kami perlu menghantar fungsi mutasi kepada useMutation, dan kemudian membekalkan fungsi dengan parameter yang diperlukan untuk operasi mutasi khusus yang anda ingin lakukan. Dalam kes kami, kami akan mengemas kini siaran.

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!

Atas ialah kandungan terperinci Cara Menggunakan TanStack (React Query). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!