RTK Query中链式查询的正确实现方法：依赖首个查询返回参数的第二个查询如何确保仅在首个查询完成后执行

这个场景太常见了！在RTK Query里处理这种需要依赖前一个查询结果的请求，核心就是利用查询的enabled选项来精准控制第二个请求的执行时机，避免在第一个请求还没返回、user.id不存在的时候发起无效请求。

具体实现步骤 #

RTK Query的每个use*Query钩子都支持enabled参数——这是一个布尔值，只有当它为true时，查询才会自动触发。我们可以把第二个查询的enabled设置为「第一个查询已成功返回且user.id存在」的判断条件。

修改后的示例代码如下：

// 第一个查询：获取用户基础信息
const { data: user, isLoading: isUserLoading, error: userError } = useGetUserQuery();

// 第二个查询：仅当user存在且包含有效id时才发起请求
const { data: userBio, isLoading: isBioLoading, error: bioError } = useGetUserBioQuery(user?.id, {
  enabled: !!user?.id // 关键：只有当user.id存在时，才启用这个查询
});

代码说明 #

• 用user?.id的可选链操作符，避免在user还未返回（处于undefined状态）时出现Cannot read property 'id' of undefined的报错。
• !!user?.id把存在的id值转换成布尔值：如果user.id是有效的（非空、非undefined），enabled就会变成true，第二个查询自动发起；否则查询保持禁用状态，不会发起无效请求。

额外实践建议 #

• 可以根据isUserLoading和isBioLoading分别展示不同的加载状态，比如先显示用户信息的加载骨架，等用户信息加载完成后再显示Bio的加载状态，提升用户体验。
• 分别处理userError和bioError，给用户展示对应的错误提示，比如用户信息加载失败时提示“获取用户信息失败”，Bio加载失败时提示“获取用户简介失败”。
• 如果第一个查询失败，第二个查询会一直保持禁用状态，完全符合业务逻辑。

内容的提问来源于stack exchange，提问作者Oleksandr Fomin