如何使用 TanStack（反应查询）

在当今的现代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], () =>
    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>
  );
}

您可以清楚地看到使用 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) => {

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

如您所见，我们正在获取每个帖子并将值存储在 usestates 中，以便我们能够在输入字段中编辑它们。完成编辑后，我们调用handlesubmit 函数。在此函数中，我们正在创建一个具有必要属性值的对象，其中包括我们更新的状态。

然后我们将把对象发送到变异函数进行更新。我们还通过控制台记录每当我们尝试更新帖子时得到的结果来检查编辑是否成功。

您可以清楚地看到使用 tanstack 执行 http 请求是多么容易。

usequery 和 usemutation 的区别

用例：usequery 用于获取数据，usemutation 用于修改数据。

结论

http 请求是现代 web 开发中非常重要的一部分，它允许浏览器发起与服务器的通信以执行一些操作，例如 get、post、put、delete、patch 等。另一方面，tanstack 有助于使事情变得更容易对于开发人员来说，它有很多好处，例如乐观的 ui 更新、简化的数据获取等。

相信您已经看到使用 tanstack 处理 http 请求和数据管理是多么容易。请查看此处的 tanstack 文档，以了解更多信息并探索 tanstack 的其他功能。

快乐编码！