React Query 3：获取和管理数据指南

热门技术勘探工
63 阅读5分钟

构建前端CRUD应用程序往往开始时很容易，但随着你不断增加功能，就会变得复杂。对于每个API端点，你都需要处理状态管理、同步、缓存和错误处理。在这篇文章中，你将了解到一个叫做React Query的库，以及它如何帮助解决所有这些问题。该库将自己描述为 "缺失的数据获取库"，为React提供 "服务器状态管理"。

我们将使用一个完整的React Query演示项目来学习该库提供的主要功能。然后你将能够把这些知识应用到你自己的项目中。首先，在开始项目设置之前，让我们熟悉一下一些项目。

关于React Query 3

React Query是一个开源项目，由Tanner Linsey创建。最新的主要版本，即React Query 3，于2020年12月正式发布。通过这个新版本，增加了新的功能，并改进了现有的功能。

你应该知道，从React Query 2.x开始有一些突破性的变化，在新版本出来之前，它是相当受欢迎的。有一个迁移指南，清楚地解释了这些变化，因为你可能会遇到很多过时的教程，这些教程是为旧版本编写的。

新版本提供了巨大的改进，先前报告的许多错误已经得到解决。第3版，虽然已经准备好用于生产，但仍在开发中，因为新的错误会定期被消除。

前提条件

这篇文章是为已经掌握了基本技能和知识的中高级前端开发人员编写的。

在你的开发者的机器环境中，你需要设置好以下内容。

说完了这些，让我们开始设置演示项目。

关于该项目

我们将分析的演示项目是一个React前端应用程序，显示由REST JSON API服务器提供的数据。该应用仅由五个页面组成，展示了我们将要学习的React查询功能。这些功能包括。

  • 基本查询
  • 分页查询
  • 无限查询
  • 创建突变
  • 更新突变
  • 删除突变

React Query确实提供了更多的功能，但遗憾的是这些功能不在本文的讨论范围之内。下面是我们将要使用的应用程序的预览。

react query preview

项目设置

在我们开始设置之前，我认为最好先简单地熟悉一下项目中使用的其他依赖关系。这些包括。

  • Vite：一个非常快速的构建工具
  • WindiCSS：一个非常快速的Tailwind CSS编译器
  • React Hook Form：一个使用React钩子的表单生成器和验证库
  • React Modal：一个可访问的模态组件
  • Axios：一个基于承诺的浏览器HTTP客户端
  • JSON服务器：一个完整的、假的REST API服务器

要在你的机器上设置React Query Demo应用程序，请执行以下指令。

# Clone the project
git clone git@github.com:sitepoint-editors/react-query-demo.git

# Navigate to project directory
cd react-query-demo

# Install package dependencies
npm install

# Setup database file for `json-server`
cp api/sample.db.json api/db.json

# Start the `json-server`
npm run json-server

json-server 所用的数据库文件包含一个用户数组。当你执行npm run json-server ，一个假的API服务器会在端口3004 。你可以通过http:/localhost:3004/users访问用户的数据。执行一个GET请求将产生以下的JSON响应样本。

[
  {
    "id": 1,
    "first_name": "Siffre",
    "last_name": "Timm",
    "email": "stimmes0@nasa.govz",
    "gender": "Male"
  },
  {
    "id": 2,
    "first_name": "Fonzie",
    "last_name": "Coggen",
    "email": "fcoggen1@weather.com",
    "gender": "Female"
  },
  {
    "id": 3,
    "first_name": "Shell",
    "last_name": "Kos",
    "email": "skos2@prweb.com",
    "gender": "Female"
  }
]

接下来，启动将运行前端代码的开发服务器。

# In another terminal, start the React dev server
npm run dev

前往你的浏览器，打开http://localhost:3000，访问该应用程序。你应该有一个与上面的预览相同的体验。确保你执行以下任务，以便彻底探索该应用程序的功能。

  • 查看基本查询页面（主页）。
  • 访问分页页面并与上一页和下一页按钮互动
  • 访问 "无限 "页面，与 "加载更多"按钮互动。
  • 回到基本查询页面，点击创建用户按钮。你会被引导到创建用户页面。填写表格并点击保存按钮。
  • 在用户表上，找到编辑图标。点击它。这将带你到编辑用户页面。做任何你喜欢的改变，然后点击保存按钮。
  • 在用户表上，找到删除图标。点击它。这将启动一个模态对话框，要求你确认你的删除操作。点击 "删除"按钮来确认。

一旦我们完成了上述所有的任务，我们就可以开始对项目进行分解了。请回顾项目结构，以便你知道每个组件和视图的位置。我将在整个文章中提供这些剥离的版本，以便你能理解在你的项目中使用React Query的基本原理。

注意：剥离的版本有classNames 、本地状态和其他UI组件，这些都不是本文讨论的重点。

安装React Query

React Query可以通过以下命令安装在一个空白或现有的React项目中。

npm install react-query

该软件包包含了你所需要的一切--包括Devtools工具功能，我们将在后面的章节中探讨。安装该包后，你需要更新你最上面的组件--App.jsx --如下。

import { QueryClient, QueryClientProvider } from "react-query";

function App() {
  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      /* place application containers/views here */
    </QueryClientProvider>
  );
}

export default App;

QueryClientProvider 的任何子组件将能够访问 React 查询库提供的钩子。我们将在本文中使用的钩子是。

这里有一个更新的（简化的）App.jsx ，包含了我们要使用的子视图。

import { QueryClient, QueryClientProvider } from "react-query";

import BasicQuery from "./views/BasicQuery";
import InfiniteQuery from "./views/InfiniteQuery";
import PaginatedQuery from "./views/PaginatedQuery";
import CreateUser from "./views/CreateUser";
import EditUser from "./views/EditUser";

function App() {
  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      <Switch>
        <Route path="/" exact>
          <BasicQuery />
        </Route>
        <Route path="/paginated">
          <PaginatedQuery />
        </Route>
        <Route path="/infinite">
          <InfiniteQuery />
        </Route>
        <Route path="/user/create">
          <CreateUser />
        </Route>
        <Route path="/user/edit/:id">
          <EditUser />
        </Route>
      </Switch>
    </QueryClientProvider>
  );
}

export default App;

继续阅读React Query 3: A Guide to Fetching and Managing DataonSitePoint.

avatar
文章
阅读
粉丝