译零 TransZero · TanStack Query v4 中文文档
主站

有依赖的查询 Dependent Queries

依赖查询(或串行查询)取决于先前的查询结果。要实现这一点,只需使用enabled选项就可以告诉查询何时可以运行:

TypeScript
1// Get the user2const { data: user } = useQuery({3  queryKey: ["user", email],4  queryFn: getUserByEmail,5});6 7const userId = user?.id;8 9// Then get the user's projects10const {11  status,12  fetchStatus,13  data: projects,14} = useQuery({15  queryKey: ["projects", userId],16  queryFn: getProjectsByUser,17  // 直到`userId`存在,查询才会被执行18  enabled: !!userId,19});

projects的查询开始状态如下:

TypeScript
1status: "loading";2fetchStatus: "idle";

一旦userId可用,projects的查询将被“启用”(enabled),然后状态转换为:

TypeScript
1status: "loading";2fetchStatus: "fetching";

查询完成时,状态变成:

TypeScript
1status: "success";2fetchStatus: "idle";