reactjs - 切换选项卡时 react 查询突变 isLoading 变为 false

Question

如果突变当前正在执行，通常 isLoading() 会返回 true。但是每当我切换选项卡并返回到原始选项卡时，isLoading() 为 false，即使突变仍在运行。有没有另一种方法来检查突变是否仍在运行，即使我切换标签时 isLoading() 仍保持为真？

这是我返回 useMutation 的地方:

export function exportFunction(
  options: UseMutationOptions<string, unknown, Core.Paths.CreateExportDocument.RequestBody>
) {
  const logError = useLogError();

  return useMutation(
    async exportFilter => {
      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);
      },
    }
  );
}

这里是我执行这个函数的地方

  const myMutation = exportFunction({
    onSuccess: url => {
      const link = document.createElement("a");
      link.href = url;
      link.download = `export-${new Date().toISOString()}.xlsx`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
  });

这是我返回的按钮

<Button
    startIcon={myMutation.isLoading ? <CircularProgress size={20} /> : <GetApp />}
    disabled={myMutation.isLoading}
    onClick={() => myMutation.mutate(exportFilter)}
    >
</Button>

Answer 1

最简单和正确的方法是使用 useIsMutating Hook 。

https://react-query.tanstack.com/reference/useIsMutating#_top

例子:

  import { useIsMutating } from 'react-query'

  const isMutation = useIsMutating({
    mutationKey: 'youmutationkey',
    exact: true
  })

  <Button
    startIcon={myMutation.isLoading || isMutation > 0 ? <CircularProgress size={20} /> : <GetApp />}
    disabled={myMutation.isLoading || isMutation > 0}
    onClick={() => myMutation.mutate(exportFilter)}
    >
  </Button>