react-query手把手教程③-并行请求及依赖请求
并行请求及依赖请求
写在前面
由于国内较少有比较系统的react-query教程,因此笔者结合官方文档以及官方课程的内容,希望写一个较为全面的教程。本文将以各种例子作为切入点,尽可能通俗易懂地讲解相关知识点。如果有错误,还请大家在评论区指出,笔者会尽快改正。
目录
目录
- 入门react-query 已于2022-06-04更新
- 深入查询键及查询函数 已于2022-06-08更新
- 并行请求及依赖请求 已于2022-06-19更新
- 查询结果缓存状态与调试工具 已于2022-06-23更新
并行请求
什么是并行请求?
在日常开发中,前端请求后端接口时,通常会请求多个接口。比如下面的react-query代码:
const usersQuery = useQuery(['users'], fetchUsers)
const teamsQuery = useQuery(['teams'], fetchTeams)
const projectsQuery = useQuery(['projects'], fetchProjects)
上面的示例中,请求了用户列表,团队列表,项目列表,此时的接口请求就是并行请求,每个请求互不干扰(你同样可以在数据库查询中,看到相关的概念,Google一下Parallel Queries
)。谁先请求到数据,就显示哪一项数据。
假设现在有一个需求:分别展示github用户的仓库和代码片段列表 此时我们需要请求两个接口
获取用户仓库列表:
https://api.github.com/users/{username}/repos
获取用户代码片段列表:
https://api.github.com/users/{username}/gists
对这两个接口分别同时进行请求,哪个接口先返回了数据,就显示哪个接口的数据:
import { useQuery } from "react-query";
const ReposAndGists = ({ username }) => {
const reposQuery = useQuery(
["repos", username],
() => {
return fetch(
`https://api.github.com/users/${username}/repos`
)
.then((res) => res.json())
}
);
const gistQuery = useQuery(
["gists", username],
() => {
return fetch(
`https://api.github.com/users/${username}/gists`
)
.then((res) => res.json())
}
);
return (
<div>
<h2>仓库列表</h2>
{reposQuery.isLoading && <p>加载仓库列表中...</p>}
{reposQuery.isError && (
<p>加载仓库列表发生错误: {reposQuery.error.message}</p>
)}
{reposQuery.data && (
<ul>
{reposQuery.data.map((repo) => (
<li key={repo.id}>{repo.name}</li>
))}
</ul>
)}
<h2>代码片段列表</h2>
{gistQuery.isLoading && <p>加载代码片段列表中...</p>}
{gistQuery.isError && (
<p>加载代码片段列表错误: {gistQuery.error.message}</p>
)}
{gistQuery.data && (
<ul>
{gistQuery.data.map((gist) => (
<li key={gist.id}>{gist.description}</li>
))}
</ul>
)}
</div>
);
};
另外一种情况是,希望对两个接口进行合并请求,等到两个接口都返回数据时,再向用户展示内容
在查询函数中使用Promise.all合并某两个请求
假设现在有一个需求:同时展示github用户的仓库和代码片段列表。此时后端并没有新的接口,你需要复用原有的老接口:
获取用户仓库列表:
https://api.github.com/users/{username}/repos
获取用户代码片段列表:
https://api.github.com/users/{username}/gists
需求的要求是等到所有数据返回后,才给用户显示内容。此时就需要使用Promise.all
来合并请求。(ps:是否想起了被手写Pormise.all支配的恐惧)
下面是示例代码,同时使用github的username作为参数,请求该用户的仓库列表和代码片段列表
import * as React from 'react';
import { useQuery } from 'react-query';
const getReposAndGists = (username) => {
return Promise.all([
fetch(`https://api.github.com/users/${username}/repos`).then((res) =>
res.json()
),
fetch(`https://api.github.com/users/${username}/gists`).then((res) =>
res.json()
),
]);
};
const ReposAndGists = ({ username }) => {
const reposAndGistsQuery = useQuery(['reposAndGists', username], () =>
getReposAndGists(username)
);
if (reposAndGistsQuery.isLoading) {
return <p>加载数据中...</p>;
}
if (reposAndGistsQuery.isError) {
return <p>数据加载错误: {reposAndGistsQuery.error.message}</p>;
}
if (!reposAndGistsQuery.data) {
return null;
}
const [repos, gists] = reposAndGistsQuery.data;
return (
<div>
<h2>仓库列表</h2>
<ul>
{repos.map((repo) => (
<li key={repo.id}>{repo.name}</li>
))}
</ul>
<hr />
<h2>代码片段列表</h2>
<ul>
{gists.map((gist) => (
<li key={gist.id}>{gist.description || '暂无描述'}</li>
))}
</ul>
</div>
);
};
export default ReposAndGists;
使用useQueries进行请求
如果需要动态生成请求,你会发现,在现有的hooks规则下使用useQuery
无法实现这个需求。
因此react-query提供了useQueries
来解决这个问题,下面的代码中,我们可以随意修改数组内容,此时react-query就会生成不同的请求:
下面的例子中,首先批量请求获取了数组内以下用户的所有仓库['facebook', 'vuejs', 'nestjs', 'mongdb']
,在点击按钮后,重新批量获取了以下用户的仓库['microsoft', 'tesla']
,做到了非常方便的动态请求。
import * as React from 'react';
import { useQueries } from 'react-query';
export default function App() {
const [users, setUsers] = React.useState([
'facebook',
'vuejs',
'nestjs',
'mongodb',
]);
const getRepos = (username) =>
fetch(`https://api.github.com/users/${username}/repos`).then((res) =>
res.json()
);
const userQueries = useQueries({
queries: users.map((user) => {
return {
queryKey: ['user', user],
queryFn: () => getRepos(user),
};
}),
});
return (
<div>
<h1>查看github用户的仓库</h1>
<button onClick={() => setUsers(['microsoft', 'tesla'])}>
更改获取用户
</button>
{userQueries.map((query) =>
query.isLoading ? (
<div>加载中....</div>
) : (
<ol>
{query.data.map((item) => (
<li>{item.full_name}</li>
))}
</ol>
)
)}
</div>
);
}
依赖请求
什么是依赖请求?
假设现在有一个需求:给用户展示最新的一条的内容详情。但是现实情况是后端只提供了按时间倒序的列表接口和详情接口,并没有时间给你出新的接口。
此时可以想到的办法是:获取列表接口的第一条数据id之后再请求详情页接口,将获取的详情内容展示给用户。
这种情况就是依赖请求,请求B接口的某个参数依赖A接口请求返回的内容。
下面还是使用github的接口,给大家演示一个需求:获取react仓库标签列表中的第二个标签,请求这个标签的issue列表。
import * as React from 'react';
import { useQuery } from 'react-query';
const IssueLabelFilter = ({ owner, repo }) => {
const labelsQuery = useQuery(['repos', owner, repo, 'labels'], () =>
fetch(`https://api.github.com/repos/${owner}/${repo}/labels`).then((res) =>
res.json()
)
);
const labels = labelsQuery.data;
const issuesQuery = useQuery(
['repos', owner, repo, 'issues'],
() =>
fetch(
`https://api.github.com/repos/${owner}/${repo}/issues?labels=${labels[1].name}`
).then((res) => res.json()),
{
/**
* 该配置项在value为true时,会触发接口请求。
* 因此当第一个接口请求返回后,此时该配置项表达式为true
* 会触发请求github中的issue列表
* ①
*/
enabled: !!labels,
}
);
return (
<div>
<h2>标签</h2>
{labelsQuery.isLoading ? (
<p>加载标签中...</p>
) : (
<ul>
{labelsQuery.data.map((label) => (
<li key={label.id}>{label.name}</li>
))}
</ul>
)}
<hr />
<h2>
Issues
{Array.isArray(issuesQuery.data) ? `(${labels[1].name})` : ''}
</h2>
{issuesQuery.isLoading ? (
<p>加载issues中...</p>
) : (
<ul>
{issuesQuery.data.map((issue) => (
<li key={issue.id}>{issue.title}</li>
))}
</ul>
)}
</div>
);
};
export default function App() {
return (
<div>
<IssueLabelFilter owner={'facebook'} repo={'react'} />
</div>
);
}
在react-query中,当该组件被加载时,组件内的useQuery就会开始请求。
此时明显不符合需求,需求的要求是在加载完标签列表后,获取到第二个标签,再开始请求issues列表。
因此就需要使用到useQuery
的enabled
参数,当参数值为false时,将会禁止请求接口。
现在回到上面的例子中,当labelsQuery
请求还没有结果时,labels
变量值为undefined
,此时在①行代码中的值为false
,当labelsQuery
请求结束时,labels
变量值为数组,此时在①行代码中的值为true
,issuesQuery
开始请求数据。完全符合需求的要求。
改进依赖查询接口一直为loading的问题
上面的例子中,issuesQuery
在加载后,由于处于禁用状态(配置项enabled: false
),此时isLoading
将会一直处于true
的状态,直到issuesQuery
请求完成数据后变为false
。
这种提示会非常奇怪,明明有一段时间里issuesQuery
没有真正的请求数据,为啥要一直显示加载标签中...
的内容?
解决办法是:需要一个字段来区分查询函数当前并没有请求数据,处于摸鱼状态。
在useQuery
中当fetchStatus
字段在为idle
时,表示当前查询函数不在运行,处于摸鱼状态^ ^
fetchStatus
一共有三个状态,fetching
状态表示当前查询函数正在运行,idle
状态表示当时查询函数不在运行。paused
状态表示查询函数尝试运行,但是无法进行请求,最可能的原因是由于当前没有联网,处于离线状态。👉🏻点我查看在线演示
import * as React from 'react';
import { useQuery } from 'react-query';
import './style.css';
const IssueLabelFilter = ({ owner, repo }) => {
const labelsQuery = useQuery(['repos', owner, repo, 'labels'], () =>
fetch(`https://api.github.com/repos/${owner}/${repo}/labels`).then((res) =>
res.json()
)
);
const labels = labelsQuery.data;
const issuesQuery = useQuery(
['repos', owner, repo, 'issues'],
() =>
fetch(
`https://api.github.com/repos/${owner}/${repo}/issues?labels=${labels[1].name}`
).then((res) => res.json()),
{
enabled: !!labels, // 👈🏻❗️❗️❗️该配置项在value为true时,会触发接口请求。因此当第一个接口请求返回后,此时该配置项表达式为true,会触发请求github中的issue列表
}
);
return (
<div>
<h2>标签</h2>
{labelsQuery.isLoading ? (
<p>加载标签中...</p>
) : (
<ul>
{labelsQuery.data.map((label) => (
<li key={label.id}>{label.name}</li>
))}
</ul>
)}
<hr />
// 👇🏻下面的代码判断了在查询函数处于摸鱼状态时,不显示任何内容 ②
{issuesQuery.isLoading && issuesQuery.fetchStatus === 'idle' ? null : (
<div>
<h2>
Issues
{Array.isArray(issuesQuery.data) ? `(${labels[1].name})` : ''}
</h2>
// 当查询函数处于干活状态时,显示加载issues中 ③
{issuesQuery.isLoading ? (
<p>加载issues中...</p>
) : (
<ul>
{issuesQuery.data.map((issue) => (
<li key={issue.id}>{issue.title}</li>
))}
</ul>
)}
</div>
)}
</div>
);
};
export default function App() {
return (
<div>
<IssueLabelFilter owner={'facebook'} repo={'react'} />
</div>
);
}
在代码②中,当查询函数处于摸鱼状态时,不显示任何内容。在代码③中的isLoading
是查询函数正在在干活的时候,此时我们把加载issues中...
状态显示出来。
总结
并行请求
- 通过在查询函数中,使用
Promise.all
来进行接口的合并请求 - 通过useQueries来进行动态的并行请求
- 通过在查询函数中,使用
依赖请求
isLoading
为true
表示第一次请求未返回结果前这段时间的状态,如果对接口进行了禁用,可以通过fetchStatus
为idle
来获取接口禁用请求这段时间的状态。
转载自:https://segmentfault.com/a/1190000042003906