依赖查询
useQuery 依赖查询
依赖（或串行）查询依赖于之前的查询完成才能执行。为了实现这一点，就像使用 enabled 选项来告诉查询何时准备好运行一样简单
tsx
// 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,
})
// 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,
})
projects 查询将以以下状态启动
tsx
status: 'pending'
isPending: true
fetchStatus: 'idle'
status: 'pending'
isPending: true
fetchStatus: 'idle'
一旦 user 可用，projects 查询将被 enabled，然后将过渡到
tsx
status: 'pending'
isPending: true
fetchStatus: 'fetching'
status: 'pending'
isPending: true
fetchStatus: 'fetching'
一旦我们有了项目，它将变为
tsx
status: 'success'
isPending: false
fetchStatus: 'idle'
status: 'success'
isPending: false
fetchStatus: 'idle'
useQueries 依赖查询
动态并行查询 - useQueries 也可以依赖于之前的查询，以下是如何实现这一点
tsx
// 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 users is undefined, an empty array will be returned
})
// 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 users is undefined, an empty array will be returned
})
注意 useQueries 返回一个查询结果数组
关于性能的注意事项
依赖查询根据定义构成 请求瀑布流 的一种形式，这会损害性能。如果我们假设两个查询花费的时间相同，那么串行执行它们而不是并行执行总是花费两倍的时间，当这种情况发生在具有高延迟的客户端上时尤其有害。如果可以，最好重构后端 API，以便可以并行获取两个查询，尽管这在实践中可能并非总是可行的。
在上面的示例中，与其首先获取 getUserByEmail 以便能够 getProjectsByUser，不如引入一个新的 getProjectsByUserEmail 查询来扁平化瀑布流。
