react-query手把手教程③-并行请求及依赖请求

并行请求及依赖请求

写在前面

由于国内较少有比较系统的react-query教程，因此笔者结合官方文档以及官方课程的内容，希望写一个较为全面的教程。本文将以各种例子作为切入点，尽可能通俗易懂地讲解相关知识点。如果有错误，还请大家在评论区指出，笔者会尽快改正。

目录

• 入门react-query 已于2022-06-04更新
• 深入查询键及查询函数 已于2022-06-08更新
• 并行请求及依赖请求 已于2022-06-19更新
• 查询结果缓存状态与调试工具 已于2022-06-23更新
• 处理错误 已于2022-06-26更新

并行请求

什么是并行请求？

在日常开发中，前端请求后端接口时，通常会请求多个接口。比如下面的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}/gist