如何使用 TanStack（反应查询）

php中文网 2024-10-15 11:16:59

在当今的现代web开发中，http请求对于应用程序来说非常关键，因此高效的数据管理的需求变得越来越重要。本文将向您介绍 tanstack、它的主要功能以及如何开始使用。

坦斯塔克

tanstack 是一个令人惊叹的应用程序数据管理库，它解决了异步数据操作的数据管理问题。它可以帮助开发者轻松地进行http请求。

什么是http请求？

http 请求（超文本传输协议）通常是浏览器向服务器发送的消息，用于发起通信并请求数据或操作。 http 对于万维网非常重要，它是网络的基本组成部分。没有它，我们可能就没有应用程序。

http 请求允许前端应用程序通过端点在服务器上执行 get、post、put、delete、patch 等操作。

使用 tanstack 的好处

缓存和数据同步：借助内置的缓存机制，tanstack 通过在本地存储数据来优化应用程序的性能。这减少了请求的数量，这将使您的应用程序速度更快。

乐观更新：tanstack 促进乐观更新，这使得开发人员能够相应地更新 ui。它有令人惊奇的状态，例如错误、isloading。您可以使用它们在数据加载时有条件地渲染加载状态。

自动分页和无限加载：借助 tanstack 对自动分页和无限加载的支持，处理大型数据集变得毫不费力。开发人员可以无缝地分块获取和显示数据，从而增强应用程序性能和用户体验。
如何使用 tanstack

首先，我们必须通过在终端上运行 npm i react-query 来安装 tanstack。

我们必须在应用程序中注入 queryclientprovider 以便我们能够使用 tanstack。我们还将为其提供 queryclient 作为道具。您可以在应用程序的index.js 文件中创建它。

从“反应”导入反应；
从“react-dom/client”导入 reactdom；
导入“./index.css”；
从“./app”导入应用程序；
从“./reportwebvitals”导入reportwebvitals；
从“./nav”导入导航；
从“react-router-dom”导入{browserrouter}；
从“react-query”导入 { queryclientprovider, queryclient };

const root = reactdom.createroot(document.getelementbyid("root"));
const queryclient = new queryclient();
root.render(

);

reportwebvitals();

如何使用 tanstack 获取数据

现在，我们将使用 tanstack 从端点获取一些数据。我们需要从react-query（tanstack）导入usequery。

从“react-query”导入{ usequery }；

然后我们将对其进行解构并从中获取 isloading、数据和错误状态。这些状态将使我们能够进行乐观的 ui 更新。这将使我们能够根据数据的状态有条件地渲染不同的 ui。

const id = useparams()
const { isloading, data, error } = usequery(["post", id.id], () =>
getsignlequeryfunc(id.id)
)

然后我们必须传递一个查询，查询是对绑定到唯一键的异步数据源的声明性依赖。这个查询将帮助我们获取数据。在我们的例子中，我们有一个字符串（帖子）数组和每个帖子的 id。这并不重要，只要确保它是唯一的即可。

这是来自 tanstack 文档的示例。

import { usequery } from 'react-query'

function app() {
  const info = usequery('todos', fetchtodolist)
}

接下来，我们必须包含查询函数，该查询函数使我们能够从端点获取数据。在我们的例子中，我们在一个单独的文件中创建了函数并导入它。这是我们的查询功能

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

这就是最终结果

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], () =&gt;
    getsignlequeryfunc(id.id)
  );

  if (error &amp;&amp; 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>
  );
}

您可以清楚地看到使用 tanstack（反应查询）获取数据是多么容易。您不再需要使用 usestates 来确定数据的状态。在此示例中，我们获取了单个帖子。

突变

突变使您能够创建、删除和更新数据。 tanstack 有 usemutation，您将使用它来创建、删除和更新数据。

我们必须将变异函数传递给 usemutation，然后为该函数提供您想要执行的特定变异操作所需的参数。就我们而言，我们将更新帖子。

这是如何完成的
`
import { editpostfunc } from "./editpost";
从“react-query”导入 { usequery, usemutation };
从“react-router-dom”导入 { useparams };
从“react”导入 { usestate, useeffect };
import { getsignlequeryfunc } from "./getsignlepost";

导出默认函数updatepost() {
const id = useparams();
const { data } = usequery(["post", id.id], () => getsignlequeryfunc(id.id));
const [title, settitle] = usestate("");
const [body, setbody] = usestate("");

useeffect(() => {
如果（数据）{
settitle(data.title || "");
setbody(data.body || "");
}
}, [数据]);

const itemupdate = usemutation(editpostfunc, {
onsuccess: () => {

  console.log("post updated successfully");
},
onerror: (error) =&gt; {

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

});

const handlesubmit = (e) => {
e.preventdefault();
常量更新数据 = {
id: id.id,
标题：标题，
身体：身体，
userid: data.userid,
};
itemupdate.mutate(updateddata);
};

返回（

大家好

类型=“文本”
placeholder=“第一个输入”
名称=“标题”
值={标题}
onchange={(e) => settitle(e.target.value)}
/>
类型=“文本”
placeholder=“第二个输入”
名称=“身体”
值={body}
onchange={(e) => setbody(e.target.value)}
/>
点击

）；
}`

这是我们的 editpostfunc 的样子

导出异步函数 editpostfunc(updateddata) {
const res = 等待获取(
https://jsonplaceholder.typicode.com/posts/${updateddata.id}`,
{
方法：“put”，
正文：json.stringify({
id: 更新数据.id,
标题：更新数据.标题，
正文：updateddata.body，
userid：updateddata.userid，
}),
标题：{
"content-type": "application/json; charset=utf-8",
},
}
);
返回 res.json();
}
`