react-query配置重试规则后断网请求未触发错误展示如何解决

核心问题原因 #

• React Query 默认的networkMode为online，检测到客户端离线时会直接暂停请求，不会触发请求失败逻辑，因此不会进入错误态，自然不会展示错误提示。
• 默认配置下请求失败时会保留之前的缓存数据，你之前的代码判断逻辑没问题，但因为请求根本没有触发失败，所以error字段始终为空。

修改后的完整代码 #

const URL = 'https://randomuser.me/api/?results=5&inc=name';

const Example = () => {
  const { error, data, isLoading, refetch } = useQuery('test', () =>
    fetch(URL).then(response => {
      // 新增状态码判断，避免4xx/5xx类错误未被捕获
      if (!response.ok) throw new Error('请求失败')
      return response.json()
    }).then(data => data.results), {
    refetchOnWindowFocus: false,
    refetchOnReconnect: false,
    retry: 1,
    retryDelay: 3000,
    // 核心配置：不管网络状态如何都强制发请求，离线时才会触发fetch的网络错误
    networkMode: 'always'
  });

  if (isLoading) return <span>Loading...</span>

  // 只要最新请求失败有error，优先展示错误UI，忽略旧缓存数据
  if (error) return <span>Error: {error.message} <button onClick={() => refetch()}>retry</button></span>

  return (
    <div>
      <h1>Length: {data ? data.length : 0}</h1>
      <button onClick={() => refetch()}>Refetch</button>
    </div>
  )
}

补充说明 #

• networkMode: 'always' 会关闭 React Query 默认的离线请求暂停逻辑，离线时请求会正常触发fetch的网络错误，走完重试流程后进入错误态，符合你的需求。
• retry: 1的逻辑是原始请求失败后重试1次，两次都失败才进入错误态，重试间隔为你设置的3000ms，符合你要求的3秒后失败展示错误的逻辑。

内容的提问来源于stack exchange，提问作者Martin Rützy