如何在React-Query中失效数据却不触发isFetching状态？

我目前使用React Query为表格获取数据，代码如下：

const { data: invoice, isFetching, isLoading, refetch } = useQuery(
  ['invoice', taxpayer, page, filtered, state],
  () => index(taxpayer, page, filtered, state),
  {
    refetchOnWindowFocus: false,
    keepPreviousData: true,
    cacheTime: 3000,
    retry: false, 
    select: (response: any) => response.data,
    onSuccess: () => setStateLoading(false)
  }
)

当前加载逻辑为：当isFetching或isLoading为true时，显示骨架屏：

if (isFetching || isLoading) {
  return <div className={classes.loading}>
    <Skeleton/>
  </div>
}

需求是定时请求更新数据，但不想让用户察觉到加载过程——即不触发isFetching状态，避免显示加载图标。

解决方案：使用queryClient.fetchQuery后台更新缓存 #

通过React Query的useQueryClient获取实例，调用fetchQuery主动发起请求并更新缓存，该过程不会触发组件的isFetching状态，组件仅会在缓存更新后自动同步新数据，实现无感知刷新。

示例代码：

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

// 在组件内获取queryClient实例
const queryClient = useQueryClient();

// 定义静默刷新函数
const refreshDataSilently = async () => {
  try {
    await queryClient.fetchQuery({
      queryKey: ['invoice', taxpayer, page, filtered, state],
      queryFn: () => index(taxpayer, page, filtered, state),
      // 保持与useQuery一致的配置参数
      retry: false,
      select: (response: any) => response.data,
    });
    // 请求成功后缓存自动更新，组件data会同步最新值
  } catch (error) {
    // 静默处理错误，比如仅记录日志
    console.error('后台刷新数据失败:', error);
  }
};

// 定时器实现定时刷新，示例为每30秒一次
useEffect(() => {
  const intervalId = setInterval(refreshDataSilently, 30000);
  return () => clearInterval(intervalId);
}, [taxpayer, page, filtered, state, queryClient]);

原理说明 #

• fetchQuery直接发起请求并更新缓存，但不属于组件内useQuery实例的活跃请求监听范围，因此不会触发isFetching状态。
• 缓存更新后，组件内的useQuery会自动订阅到新缓存数据，从而更新表格内容，全程无加载提示，用户无感知。

内容的提问来源于stack exchange，提问作者Mohammad A. Souri