使用 React Query 异步获取数据⚛️

查询数据并不难，对吧？没错，我们首先渲染组件。我们编写 fetch 方法。我们在组件的 onMount 中调用该方法获取数据。然后，我们将数据存储到状态中，并渲染数据。如果查询失败怎么办？我们要么重试，要么放弃，对吧？即使重试，我们也需要再次调用 refetch 方法，然后再次检查数据是否解析成功。如果我们更新了某些内容，则需要根据数据重新渲染该组件。如此多的查询和函数。

那么在本文中，我们将把所有这些步骤合并为一个步骤，并使用Tanner Linsey的名为ReactQuery的超棒反应钩子库轻松地进行数据查询。

首先，让我们设置一下 React 应用程序。本文中，我将使用这个入门套件模板。克隆模板后，我们将开始安装 React 查询。

通过 NPM

npm install react-query --save

通过 CDN

<script src="https://unpkg.com/react-query/dist/react-query.production.min.js"></script>

接下来，我们将使用ReactQueryCache包装我们的 App 组件来缓存查询数据。让我们添加它。

App.js

import React from 'react';
import * as Containers from './containers/index';
import { BrowserRouter as Router, Switch } from 'react-router-dom';
import { QueryCache, ReactQueryCacheProvider } from 'react-query';

import Layout from './layouts/Layout';

import 'bootstrap/dist/css/bootstrap.min.css';
import './stylesheets/styles.css';

const queryCache = new QueryCache()

const App = () => {
 return (
   <ReactQueryCacheProvider queryCache={queryCache}>
     <Router>
       <Switch>
         <Layout exact path="/" component={Containers.Home} header={true} footer={true}/>
         <Layout exact path="/about" component={Containers.About} header={true} footer={false}/>
         <Layout exact path="/profile" component={Containers.Profile} header={true} footer={true}/>
       </Switch>
     </Router>
   </ReactQueryCacheProvider>
 );
}

export default App;

接下来，让我们使用 useQuery 钩子在配置文件组件中显示来自 GitHub 的公共用户数据。useQuery 采用以下参数：

查询键（唯一键）。（必需）
解析数据的异步函数。（必需）
查询选项。（可选）

键通常类似于标识符，用于重新获取和缓存响应。使用此钩子时，您将收到可在组件中使用的所有析构信息。

让我们看一下我们将要使用的钩子返回的一些信息。

canFetchMore（布尔值） - 如果数据基于异步函数分页，则此值为 true。例如，如果您有超过 20 个值，而您收到的第一页包含 10 个值，则canFetchMore将为 true，因为还有 10 个值可以获取。获取完接下来的 10 个值后，它将返回 false。
data(any) - 此对象将包含来自异步函数的解析数据，这些数据将用于在我们的组件中呈现。
error(any) - 此对象的 message 键包含错误消息。如果状态为“success”或“loading”，则 error 将为null。
isError（Boolean） -如果查询失败，则设置为 true，否则设置为 false。
isFetching(Boolean) - 在当前数据获取完成之前为 true。在数据（当前页面）获取完成后变为 false。
isLoading -在查询函数被解析或拒绝之前为 true，之后为 false。
isSuccess -当查询函数被解析时为 true，当抛出错误时为 false。
status - isLoading、isSuccess 和 isError 的文本表示。将包含“success”、“loading”或“error”。

在配置文件容器中，我们将添加useQuery钩子，如下所示，

容器/Profile.js

import React, { Fragment } from 'react';
import UserProfile from '../../components/profile/UserProfile';
import { useQuery } from 'react-query'

const Profile = (props) => {
 const {
   data,
   error,
   isLoading
 } = useQuery('profileData', () =>
   fetch('https://api.github.com/users/SoorajSNBlaze333')
   .then(res => res.json())
 )

 if (isLoading) return <Fragment>Loading...</Fragment>

 if (error) return <Fragment><h1>Oops something went wrong</h1><p>{error.message}</p></Fragment>

 return (
   <div className="w-100 p-4">
     <UserProfile profile={data}/>
   </div>
 )
}

export default Profile;

如果您现在打印查询对象并运行，您将看到此输出。

我考虑了在 UI 上显示数据的所有可能性

如果您看到，您将看到查询对象的 2 个实例将针对所有状态自动更新。

现在，如果您单击另一个浏览器选项卡或访问另一个应用程序并返回此窗口，您将看到再次发出查询请求并重新获取数据。

这是因为数据的isStale属性。渲染的数据将被赋予一个名为stale的查询属性。当窗口再次聚焦、浏览器重新连接或组件被挂载时，过时的查询将被重新获取。可以使用以下三个属性关闭此功能：

 const {
   data,
   error,
   isLoading
 } = useQuery('profileData', () =>
   fetch('https://api.github.com/users/SoorajSNBlaze333')
   .then(res => res.json())
 , {
   refetchOnWindowFocus: Boolean, //refetch when window comes to focus
   refetchOnReconnect: Boolean, //refetch when browser reconnects to server
   refetchOnMount: Boolean //refetch when component mounts
 })

回到浏览器后，ReactQuery 给了我新的数据

另一个属性是失败时重试。因此，如果查询函数被拒绝，useQuery hook 会自动重试 3 次，直到抛出错误。你可以使用以下命令更改此设置：

 const {
   data,
   error,
   isLoading
 } = useQuery('profileData', () =>
   fetch('https://api.github.com/users/SoorajSNBlaze333')
   .then(res => res.json())
 , {
   retry: Boolean, //refetch if query fails
   retryDelay: Number //number of times for retry. Default is 3
 })

还要注意， failureCount键的值会随着每次失败的查询而递增。此键可用于显示 UI 尝试连接服务器的次数，或者在n 次尝试后失败或成功，并在 UI 上显示相应的消息。

以上就是useQuery钩子的基本设置和使用方法。如需更深入的解释，您可以查看此处的文档。在下一篇文章中，我们将讲解如何通过分页查询海量数据，以及如何使用无限查询来创建无限滚动。

鏂囩珷鏉ユ簮锛�https://dev.to/soorajsnblaze333/asynchronous-data-fetching-using-react-query-4d0i