React Query切换标签页后mutation的isLoading变为false问题咨询

你遇到的现象是React Query的默认行为导致的：当标签页切走再切回时，窗口触发聚焦事件，React Query默认会校验突变（Mutation）的状态，若此时没有特殊配置，会将仍在运行的突变的isLoading状态误重置为false，但实际后台的axios请求仍在正常执行。

方案1：自定义维护加载状态（最稳妥，推荐） #

自己通过useState维护加载状态，完全不受React Query默认行为影响，仅需要修改封装的exportFunction代码，调用方无需调整：

export function exportFunction(
  options: UseMutationOptions<string, unknown, Core.Paths.CreateExportDocument.RequestBody>
) {
  const logError = useLogError();
  // 自定义加载状态
  const [customLoading, setCustomLoading] = useState(false);

  const mutation = useMutation(
    async exportFilter => {
      setCustomLoading(true);
      const {data} = await axios.post<Core.Paths.CreateExportDocument.RequestBody, AxiosResponse<string>>(
        "/pdncore/api/export/assortmentProducts",
        exportFilter
      );

      const {data: blob} = await axios.get(`/pdncore/api/export/document/excel/${data}`, {responseType: "blob"});
      return URL.createObjectURL(blob);
    },
    {
      ...options,
      onError: (err, vars, context) => {
        logError("error", err);
        options.onError?.(err, vars, context);
      },
      // 无论请求成功失败，结束后重置加载状态
      onSettled: (data, error, variables, context) => {
        setCustomLoading(false);
        options.onSettled?.(data, error, variables, context);
      }
    }
  );

  // 合并返回结果，直接覆盖原有isLoading字段
  return {
    ...mutation,
    isLoading: customLoading
  };
}

方案2：修改React Query配置 #

如果不想自定义状态，可以调整React Query的配置，关闭窗口聚焦时的状态重置逻辑：

全局配置（影响所有突变） #

在创建QueryClient时添加如下配置：

const queryClient = new QueryClient({
  defaultOptions: {
    mutations: {
      // 关闭窗口聚焦时的突变重试
      retryOnWindowFocus: false,
      // 延长突变缓存时间，避免pending状态被回收
      cacheTime: 1000 * 60 * 10,
    }
  }
});

单突变配置（仅影响当前导出接口） #

直接在exportFunction的useMutation选项中添加上述配置即可。

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