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

有依赖的查询 Dependent Queries

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

TypeScript
1// Get the user2const { data: user } = useQuery({3  queryKey: ['user', email],4  queryFn: () => getUserByEmail(email.value),5})6 7const userId = computed(() => user.value?.id)8const enabled = computed(() => !!user.value?.id)9 10// Then get the user's projects11const { isIdle, data: projects } = useQuery({12  queryKey: ['projects', userId],13  queryFn: () => getProjectsByUser(userId.value),14  enabled, // 直到 `enabled == true`,query才会执行15})

projects的查询开始状态如下:

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

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

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

查询完成时,状态变成:

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