如何使用React Query阻止页面加载及标签切换时重复请求数据

要实现首次请求后始终从缓存读取、禁止标签切换/页面刷新时重复请求，需要修改React Query的默认配置，以下是具体实现：

一、核心配置修改（解决标签切换重复请求） #

直接在你的useQuery调用中添加配置项，覆盖默认行为：

import { useQuery } from 'react-query';

const QueryCache = () => {
  const { data, isLoading, isFetching, isStale } = useQuery(
    'yourQueryKey',
    async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/todos');
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    },
    {
      // 标记缓存数据永远不会过期，避免自动触发重新请求
      staleTime: Infinity,
      // 关闭标签切换回当前页面时的自动请求
      refetchOnWindowFocus: false,
      // 禁止网络恢复后自动发起请求
      refetchOnReconnect: false,
      // 缓存永久保留在内存中，不会被回收
      cacheTime: Infinity,
      // 关闭后台自动轮询请求
      refetchInterval: false
    }
  );

  console.log({isFetching, isLoading})
  console.log("isStale is ", isStale);

  return (
    <div>
        {
            isLoading ? <>Loading...</> : 
                <>
                {
                   isFetching ? <>新数据加载中</> : <>缓存数据</>
                }
                </>
            
        }
      <h1>数据:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default QueryCache;

配置说明 #

• staleTime: Infinity：让缓存数据永远处于"新鲜"状态，React Query不会因为数据"过时"自动发起请求
• refetchOnWindowFocus: false：禁用窗口聚焦（标签切换）时的自动重新请求逻辑
• cacheTime: Infinity：确保内存中的缓存不会被自动清理

二、页面刷新后仍使用缓存（可选） #

上面的配置能解决标签切换的重复请求，但页面刷新会清空React Query的内存缓存，若要刷新后也读取缓存，需要添加持久化存储：

1. 安装依赖

npm install @tanstack/react-query-persist-client @tanstack/query-sync-storage-persister

2. 在应用入口配置持久化

// 比如App.jsx或main.jsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { persistQueryClient } from '@tanstack/react-query-persist-client';
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister';
import QueryCache from './QueryCache';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity,
      refetchOnWindowFocus: false,
      refetchOnReconnect: false,
      cacheTime: Infinity
    }
  }
});

// 用localStorage持久化缓存
const persister = createSyncStoragePersister({
  storage: window.localStorage,
});

persistQueryClient({
  queryClient,
  persister,
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <QueryCache />
    </QueryClientProvider>
  );
}

export default App;

这样配置后，数据会被持久化到浏览器localStorage，页面刷新后会直接读取本地缓存，无需重新发起API请求。

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