依赖查询
useQuery 依赖查询
依赖查询(或称串行查询)需等待前一个查询完成之后才能执行。要实现这一点,只需使用 enabled 选项来告知查询它何时可以运行:
TypeScript
1// Get the user2const { data: user } = useQuery({3 queryKey: ['user', email],4 queryFn: getUserByEmail,5})6 7const userId = user?.id8 9// Then get the user's projects10const {11 status,12 fetchStatus,13 data: projects,14} = useQuery({15 queryKey: ['projects', userId],16 queryFn: getProjectsByUser,17 // The query will not execute until the userId exists18 enabled: !!userId,19})projects 查询将首先进入:
TypeScript
1status: 'pending'2isPending: true3fetchStatus: 'idle'一旦 user 可用,projects 查询就会被 enabled,并随即进入:
TypeScript
1status: 'pending'2isPending: true3fetchStatus: 'fetching'获取到项目后,它将进入:
TypeScript
1status: 'success'2isPending: false3fetchStatus: 'idle'useQueries 依赖查询
动态并行查询——useQueries 同样可依赖于前一个查询,实现方式如下:
TypeScript
1// Get the users ids2const { data: userIds } = useQuery({3 queryKey: ['users'],4 queryFn: getUsersData,5 select: (users) => users.map((user) => user.id),6})7 8// Then get the users messages9const usersMessages = useQueries({10 queries: userIds11 ? userIds.map((id) => {12 return {13 queryKey: ['messages', id],14 queryFn: () => getMessagesByUsers(id),15 }16 })17 : [], // if userIds is undefined, an empty array will be returned18})注意:useQueries 返回的是 一个查询结果数组
关于性能的一点说明
按定义,依赖查询构成了一种 请求瀑布,这会损害性能。假设两个查询耗时相同,串行执行它们所需时间总是并行执行的两倍;当这种情况发生在高延迟客户端上时,性能影响尤为明显。如果可行,最好重构后端 API,使两个查询能够并行拉取;不过在实际中,这并不总是可行。
在上面的示例中,与其先拉取 getUserByEmail 以支持后续的 getProjectsByUser,不如引入一个新的 getProjectsByUserEmail 查询,从而压平该请求瀑布。