useQuery避坑 请求不触发 navigator.online属性避坑

现象

• 低概率现
• useQuery 直接发送的请求 不触发
• 也没有任何报错
• 刷新页面也不触发 重启浏览器恢复

export default function Home2({ logout }) {
  const { data = {} } = useQuery({
    queryKey: ['portal_content'],
    queryFn: () => getContentByKey('portal_content'),
  })
}

排查

1. Application 面板 -> Service Workers
2. Offline 勾选 再取消 请求成功发送

解决方案

const client = new QueryClient({
    defaultOptions: {
      queries: {
        networkMode: 'always',
      },
    },
  })

原因

浏览器层面的 navigator.onLine 状态卡死，刷新页面也会继承这个状态。

重启浏览器或者断开网络重新练一下可以刷新

可能是由于电脑休眠 vpn切换造成网络状态未更新

不同浏览器和操作系统会采用不同的判定逻辑来检测设备是否联网。一般情况下，只要设备连接到局域网（LAN），就会被判定为 “在线”—— 即便该局域网并未接入互联网。比如，计算机若运行了虚拟化软件，其虚拟以太网适配器可能会始终处于 “已连接” 状态。在 Windows 系统中，联网状态的判定依据是设备能否连接到微软的主服务器；而即便设备本身可以正常上网，防火墙或虚拟专用网络（VPN）也可能会阻断这一连接。因此，该属性本质上并不可靠

参考 developer.mozilla.org/en-US/docs/…

而TanStack Query 默认的 networkMode 是 'online'。这意味着：

• 机制：在发起请求前，库会检查内部的 OnlineManager 状态。

• 行为：如果它认为当前是 离线 (Offline)  状态，它不会发送请求，而是将查询置于 paused（暂停）状态。