RTK Query queryFn中如何正确返回loading状态？代码未渲染加载组件

你的实现是错误的，无法触发预期的loading状态，具体原因和修正方案如下：

错误原因 #

1. await Promise.all阻塞了loading判断
   你使用await Promise.all(...)会等待所有并行请求全部完成（无论成功或失败）才会执行后续代码，此时results中的每个请求结果状态都只会是fulfilled或rejected，不可能出现pending，所以isLoading的判断永远为false，完全无效。

2. queryFn不支持手动返回isLoading状态
   RTK Query的queryFn返回值仅支持{ data: ... }、{ error: ... }或{ data: ..., error: ... }（部分成功场景），不存在isLoading这个返回字段。组件hook的isLoading是RTK Query根据请求生命周期自动管理的，无需手动返回。

修正后的实现 #

不需要手动处理loading状态，RTK Query会自动在queryFn执行期间将hook的isLoading设为true，直到请求完成。修正后的代码如下：

getUserSurveys: builder.query({
  async queryFn(surveysIds, _queryApi, _extraOptions, fetchWithBQ) {
    try {
      // 并行发起所有请求，await等待全部完成
      const results = await Promise.all(
        surveysIds.map((id) => fetchWithBQ(`/getSurvey?id=${id}`))
      );

      const merged = [].concat(...results.map((r) => r.data));
      const errors = [].concat(
        ...results
          .filter((result) => result.error != null)
          .map((result) => result.error)
      );

      // 存在错误则返回错误集合
      if (errors.length > 0) {
        return { error: errors };
      }
      // 无错误则返回合并后的数据
      return { data: merged };
    } catch (unexpectedError) {
      // 捕获全局意外错误
      return { error: unexpectedError };
    }
  },
}),

组件使用说明 #

你当前的hook使用方式是正确的：

const { data: userSurveys, isLoading: isUserSurveysLoading } = useGetUserSurveysQuery(linkedSurveysIds);

isUserSurveysLoading会在所有并行请求执行的整个过程中保持true，直到所有请求完成并返回结果后自动变为false，此时就可以根据这个状态渲染加载Spinner了。

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