如何在React Query中全局监听所有API请求的isLoading状态变化

当然可以，React Query有几种实用的方式来统一监控所有API请求的isLoading状态变化：

1. 利用QueryClient的全局回调 #

创建QueryClient时，你可以通过queryCache的内置回调来监听所有查询的状态流转：

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onQueryStarted: () => {
      // 请求发起，isLoading切换为true
      console.log('有请求开始加载了');
    },
    onSuccess: () => {
      // 请求成功，isLoading切换为false
      console.log('某个请求加载完成');
    },
    onError: () => {
      // 请求失败，isLoading同样切换为false
      console.log('某个请求加载失败');
    },
    onSettled: () => {
      // 请求结束（无论成败），isLoading变为false
      console.log('某个请求已收尾');
    }
  })
});

2. 实现全局加载状态组件 #

你可以写一个全局组件，通过useQueryClient获取所有查询的状态，统一判断是否存在加载中的请求：

import { useQueryClient } from '@tanstack/react-query';

function GlobalLoading() {
  const queryClient = useQueryClient();
  // 遍历所有查询，检查是否有处于loading状态的
  const hasLoadingQueries = queryClient.getQueriesData().some(([_, query]) => 
    query.state.status === 'loading'
  );

  return hasLoadingQueries ? <div>全局加载中...</div> : null;
}

// 在App里全局挂载
function App() {
  return (
    <>
      <GlobalLoading />
      {/* 你的页面内容 */}
    </>
  );
}

3. 用React Query DevTools可视化监控 #

开发阶段可以用官方的DevTools直观查看所有请求的isLoading状态变化，方便调试：

import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

// 放在QueryClientProvider内部
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 应用组件 */}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

根据你的业务场景选对应的方式就行，前两种适合业务逻辑里的全局监听，第三种更适合开发调试用。

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