React Query （useQuery）用法

什么是React Query？React Query是一个库，可为任何类型的异步数据提供ReactJS状态管理功能。根据他们的官方文件，

React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze.

React Query为我们提供了诸如“ useQuery”之类的自定义钩子来获取数据。在后台，这些挂钩管理许多事情，例如在初始获取后缓存数据，在后台重新获取数据等。

React Query

在本文中，我将向您展示如何使用useQuery挂钩获取数据。为此，我使用JSON占位符作为API端点来获取数据。

我要重新开始摹与创建使用create反应的应用程序内一个新的阵营JS工程和安装反应查询，

npm i --save react-query

然后，我清理App.js并编写fetchUsers函数以从API中获取数据。该函数看起来像这样。我正在使用fetch（）。但是我们也可以使用Axios或其他方法。

const fetchUsers = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  return res.json();
};

现在从react-query导入useQuery。

import { useQuery } from "react-query";

现在我们可以使用“ useQuery”钩子来管理数据提取，如下所示，

const response = uesQuery("users", fetchUsers);

useQuery挂钩需要两个参数，第一个是此查询的键。我为此使用字符串“ users”。另外，我们可以将数组作为第一个参数。如果传递数组，则每个项目都将序列化为稳定的查询键。第二个是获取数据的功能。我放了我之前创建的fetchUsers异步函数。此外，我们可以将对象作为不同选项的第三个参数传递，并且它是可选的。

现在，useQuery的响应返回非常重要。它具有以下属性。

data,
error,
failureCount,
isError,
isFetchedAfterMount,
isFetching,
isIdle,
isLoading,
isPreviousData,
isStale,
isSuccess,
refetch,
remove,
status,

data是我们获取的实际数据。根据响应，“状态”将为 “loading”, “error”, “success” , “idle” 。所有这些属性都有不同的用途。有关useQuery挂钩的更多信息，请参考官方文档。

在我的示例中，我将仅使用data和status状态”属性。因此，我j结构了useQuery结果，如下所示：

const {data，status} = uesQuery（“ users”，fetchUsers）;

现在我们可以在浏览器中显示它们。

import React from "react";
import './app.css';
import { useQuery } from "react-query";
const fetchUsers = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  return res.json();
};
const App = () => {
  const { data, status } = useQuery("users", fetchUsers);
  return (
    <div className="App">
      {status === "error" && <p>Error fetching data</p>}
      {status === "loading" && <p>Fetching data...</p>}
      {status === "success" && (
        <div>
          {data.map((user) => (
            <p key={user.id}>{user.name}</p>
          ))}
        </div>
      )}
    </div>
  );
};
export default App;

我在这里所做的是，检查status并显示数据。这是我们如何使用React Query useQuery钩子的简单说明。还有很多其他的钩子。

大多数时候，我在React JS项目中使用Redux或Context API进行状态管理。现在，我认为React Query更强大，并且会在社区中更加流行，我推荐所有React开发人员尝试一下。

补充信息

在这一部分中，我将介绍React Query Dev Tools，它为我们提供了一个开发控制台，以了解幕后的React Query发生了什么。
为此，首先安装react-query-devtools，

npm i --save react-query-devtools

现在我们可以将其导入App.js并添加到项目中，如下所示：

import React from "react";
import './app.css';
import { useQuery } from "react-query";
import { ReactQueryDevtools } from "react-query-devtools";
const fetchUsers = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  return res.json();
};
const App = () => {
  const { data, status } = useQuery("users", fetchUsers);
  return (
    <>    
      <div className="App">
        {status === "error" && <p>Error fetching data</p>}
        {status === "loading" && <p>Fetching data...</p>}
        {status === "success" && (
          <div>
            {data.map((user) => (
              <p key={user.id}>{user.name}</p>
            ))}
          </div>
        )}
      </div>
      <ReactQueryDevtools initialIsOpen={false} />
    </>
  );
};
export default App;

现在，在浏览器窗口的底部，您将看到React Query徽标（或任何图标）。我们可以通过单击打开开发者控制台。了解更多。

React Query Dev Tools控制台

希望大家都学到了一些有趣的新东西。请随时回复。

参考

Getting started with useQuery (React Query)