React Query refetchInterval失效：仅调用一次API问题排查

问题现象 #

此前通过refetchInterval实现接口自动重取一直正常，但目前功能失效，接口仅被调用一次。相关代码如下：

const { data, isFetching } = useQuery(
  ['test'],
  () => axios.get('https://jsonplaceholder.typicode.com/todos/1'),
  { refetchInterval: 3000 }
)
console.log('isFetching=', isFetching)

控制台输出情况：

• 初始加载时：

  isFetching= true
  isFetching= false
  

• 之后每3秒仅输出：

  isFetching= false
  

手动点击React Query DevTools中的「Refetch」按钮也不会发起新的网络请求，仅输出isFetching=false。

问题根源 #

项目中配置了axios缓存，导致axios直接返回缓存数据，不会发起实际的网络请求。React Query无法检测到请求的发起与完成，因此不会更新isFetching状态，也不会触发预期的自动重取逻辑。

解决方案 #

1. 禁用当前请求的axios缓存 #

根据你使用的axios缓存方案，在目标请求中添加禁用缓存的配置：

• 若使用浏览器原生缓存控制：

  const { data, isFetching } = useQuery(
    ['test'],
    () => axios.get('https://jsonplaceholder.typicode.com/todos/1', {
      headers: { 'Cache-Control': 'no-store' }
    }),
    { refetchInterval: 3000 }
  )
  

• 若使用axios-cache-adapter等第三方缓存库：

  const { data, isFetching } = useQuery(
    ['test'],
    () => axios.get('https://jsonplaceholder.typicode.com/todos/1', {
      skipCache: true // 具体参数以你的缓存库文档为准
    }),
    { refetchInterval: 3000 }
  )
  

2. 移除全局axios缓存配置（推荐） #

React Query本身已经提供了完善的缓存、失效、重取机制，与axios缓存同时使用容易引发冲突。如果业务场景不需要axios层面的缓存，可以直接移除全局的axios缓存配置，完全依赖React Query的缓存能力。

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