Dependent Queries

useQuery dependent Query

使用 enabled 延迟查询，直到依赖就绪

Dependent (or serial) queries depend on previous ones to finish before they can execute. To achieve this, it's as easy as using the enabled option to tell a query when it is ready to run:Dependent (or serial) queries depend on previous ones to finish before they can execute. To achieve this, it's as easy as using the enabled option to tell a query when it is ready to run:依赖查询使用 enabled 选项等待先前查询 这确保查询仅在依赖可用时运行依赖查询使用 enabled 选项等待先前查询enabled 选项

// Get the user
const { data: user } = useQuery({
  queryKey: ['user', email],
  queryFn: getUserByEmail,
})

const userId = user?.id

// Then get the user's projects
const {
  status,
  fetchStatus,
  data: projects,
} = useQuery({
  queryKey: ['projects', userId],
  queryFn: getProjectsByUser,
  // The query will not execute until the userId exists
  enabled: !!userId,
})

The projects query will start in:The projects query will start in:起初，projects 查询处于 pending 且 fetchStatus 为 idle 因为直到 userId 存在才启用，所以不会发生获取起初，projects 查询处于 pending 且 fetchStatus 为 idleprojects 查询

status: 'pending'
isPending: true
fetchStatus: 'idle'

As soon as the user is available, the projects query will be enabled and will then transition to:As soon as the user is available, the projects query will be enabled and will then transition to:一旦 user 可用，projects 查询启用并开始获取 当 userId 存在时 enabled 选项变为 true，触发获取一旦 user 可用，projects 查询启用并开始获取projects 查询

status: 'pending'
isPending: true
fetchStatus: 'fetching'

Once we have the projects, it will go to:Once we have the projects, it will go to:获取后，projects 查询转为 success 且 fetchStatus 为 idle 获取完成且数据可用，因此状态变为 success获取后，projects 查询转为 success 且 fetchStatus 为 idleprojects 查询

status: 'success'
isPending: false
fetchStatus: 'idle'

useQueries dependent Query

useQueries 基于先前结果动态运行并行查询

Dynamic parallel query - useQueries can depend on a previous query also, here's how to achieve this:Dynamic parallel query - useQueries can depend on a previous query also, here's how to achieve this:useQueries 可依赖先前查询实现动态并行查询 它遍历先前结果来创建各个查询useQueries 可依赖先前查询实现动态并行查询useQueries

// Get the users ids
const { data: userIds } = useQuery({
  queryKey: ['users'],
  queryFn: getUsersData,
  select: (users) => users.map((user) => user.id),
})

// Then get the users messages
const usersMessages = useQueries({
  queries: userIds
    ? userIds.map((id) => {
        return {
          queryKey: ['messages', id],
          queryFn: () => getMessagesByUsers(id),
        }
      })
    : [], // if userIds is undefined, an empty array will be returned
})

Note that useQueries return an array of query resultsNote that useQueries return an array of query resultsuseQueries 返回查询结果数组 该数组包含每个所提供查询的结果useQueries 返回查询结果数组useQueries

A note about performance

依赖查询产生瀑布；重构 API 以并行运行来扁平化瀑布

Dependent queries by definition constitutes a form of request waterfall, which hurts performance. If we pretend both queries take the same amount of time, doing them serially instead of in parallel always takes twice as much time, which is especially hurtful when it happens on a client that has high latency. If you can, it's always better to restructure the backend APIs so that both queries can be fetched in parallel, though that might not always be practically feasible.Dependent queries by definition constitutes a form of request waterfall, which hurts performance. If we pretend both queries take the same amount of time, doing them serially instead of in parallel always takes twice as much time, which is especially hurtful when it happens on a client that has high latency. If you can, it's always better to restructure the backend APIs so that both queries can be fetched in parallel, though that might not always be practically feasible.依赖查询导致请求瀑布；并行获取更好 串行查询耗时是并行的两倍，尤其在高延迟下；重构 API 以并行化依赖查询导致请求瀑布；并行获取更好请求瀑布

In the example above, instead of first fetching getUserByEmail to be able to getProjectsByUser, introducing a new getProjectsByUserEmail query would flatten the waterfall.In the example above, instead of first fetching getUserByEmail to be able to getProjectsByUser, introducing a new getProjectsByUserEmail query would flatten the waterfall.用 getProjectsByUserEmail 查询扁平化瀑布，而非两个查询 这将两个获取合并为一个，避免串行依赖用 getProjectsByUserEmail 查询扁平化瀑布，而非两个查询getProjectsByUserEmail