ReactQuery异常:传入useQuery的queryFn从未执行,仅Chrome出现
以下是几个可尝试的排查方向,均来自类似场景的实际经验总结:
检查Chrome实验性特性:打开
chrome://flags,搜索与Fetch、Cache相关的实验项(比如Experimental Fetch API、HTTP Cache Partitioning),尝试将这些项重置为默认状态——部分实验性特性可能干扰React Query的请求触发逻辑。排查浏览器扩展/插件:即使在隐身模式下,部分系统级或强制启用的扩展仍可能运行。可以在
chrome://extensions/开启开发者模式,批量禁用所有扩展后再测试。重点关注广告拦截、隐私保护类插件,这类工具可能拦截或修改请求触发流程。检查网络请求拦截情况:打开Chrome开发者工具「网络」面板,过滤
XHR/Fetch请求,确认是否有相关请求被标记为「已阻止」或根本未发起。同时排查项目中全局的fetch或axios拦截器,看是否在Chrome环境下存在异常逻辑导致请求未触发。验证React Query全局配置:确认项目中
QueryClient的全局配置,比如是否在defaultOptions里设置了queries.enabled为false(尽管单个useQuery的enabled设为true,但全局配置可能存在优先级问题),或是自定义的queryCache逻辑意外阻止了请求执行。重置Chrome浏览器状态:在
chrome://settings/reset里选择「恢复原始默认设置」,清除自定义的浏览器配置、缓存、Cookie等(书签和密码会保留)。部分Chrome配置损坏可能引发这类非常规请求问题。排查系统层面的网络限制:Mac系统下,检查是否有第三方防火墙(如Little Snitch)、代理工具(如Charles、ProxyMan)在运行,这类工具可能在特定机器上拦截了React Query发起的请求。即使未主动开启,也要确认系统后台是否有相关进程在运行。
深挖React Query开发者工具细节:在React Query devtools中查看对应query的状态详情,确认是否显示「enabled: true」,以及
status是否为异常的idle状态。如果状态为idle,说明React Query认为该query无需执行,此时可排查queryKey中的值是否为undefined或异常类型。
内容的提问来源于stack exchange,提问作者Byofuel

