ReactQuery：传递给 useQuery 的 queryFn 永远不会运行，仅发生在 Chrome 上

Question

我们在一个相当大的 React 站点上广泛使用了 ReactQuery，而且它运行良好，但我们最近看到了非常奇怪的行为，这种行为只发生在 Chrome 上，而且很少发生。对于useQuery我们每次调用，queryFn我们传入的内容永远都不会被调用。我通过以queryFn日志记录开始该函数来验证这一点，这在 Chrome 上从未发生过。 enabled被硬编码为true. 在 Edge 和 Firefox 上，日志记录发生，代码运行，应用程序一直都很好。我在 Chrome 之外还没有遇到过这个问题。我知道useQuery被调用是因为可以在reactQuery devtools中看到密钥。由于问题是在我的机器上开始的，所以它的发生完全一致，但目前仅在这台特定的机器上。团队中没有其他人可以复制它。此前，一位客户报告了同样的问题（同样仅在 Chrome 上），我们的各种故障排除（清除所有本地存储等）在问题自行解决之前没有取得成果。它以常规和隐身模式发生在我的本地主机服务器以及我们的开发服务器上，并且在清除本地存储、重新启动本地服务器、浏览器和计算机之后发生。无论如何，我们不会在本地保留任何reactQuery 缓存。升级到reactQuery 4.24.9 没有什么区别。团队中使用相同 Chrome 版本（Mac M1 版本相同）的同一开发服务器上没有其他人遇到此问题。如果有人觉得这听起来很熟悉，请插话。

Answer 1

听起来确实很熟悉。Mac 上的 Chrome 存在一个问题（可能是这个问题？），即使实际上存在网络连接，该问题navigator.onLine也会返回。false我不确定这是否已修复，但反应查询用于navigator.onLine检查OnlineManager网络连接是否存在。如果没有网络，则queryFn默认不运行networkMode: 'online'。

fetchStatus如果从useQueryshows返回，您可以检查是否是这种情况'paused'。您还应该能够在react-query-devtools 中看到这一点。

您可以将 更改networkMode为其他内容（请参阅文档）。我还读过一些报告，说只要打开和关闭 wifi 就可以解决这个问题。这很烦人，但据我所知，没有更好的方法来确定您是否有网络连接。您当然可以通过onlineManager.setEventListener向 onlineManager 提供您自己的事件监听器。如果您有不同的方式来检测在线/离线，您可以将其插入其中。

/更新：

从 v5 开始@tanstack/react-query，我们将把浏览器视为始终在线，直到收到事件为止，并且由于所有误报而offline不再监听。navigator.onLine这是一个权衡，因为当你实际上处于离线状态时，它可能会让体验变得更糟，但这似乎是两害相权取其轻。