首屏三个组件都调了 useUser,Network 面板里 /api/user 发了 8 次,其中 6 次落在同一毫秒,接口 QPS 被这一下顶到 40。碰到这种情况,我一般先确认改动有没有真的生效。

原因不复杂,每个组件各自建了独立的 QueryClient,缓存互不可见,也没有共享的 in-flight 记录可以合并。dedupingInterval 被设成 0,同一 key 的并发请求各发各的。

碰到「React Query 请求去重」这类问题,我习惯先把当前配置原样备份一份,改坏了立刻换回来,不用现场推。改完顺手把文档补一句,省得下次自己重新推一遍。

const qc = new QueryClient({ defaultOptions: { queries: { staleTime: 30_000, dedupingInterval: 5000 } } });
<QueryClientProvider client={qc}>...</QueryClientProvider>

监控和日志的时间要对上,时区不一致会多绕很大一圈。临时改动用注释写上日期和原因,过两周自己都记不清为什么这么写。

动手前把原文件复制一份带时间戳,出问题立刻换回去,比现场分析快得多。

具体做法是,确认全应用只有一个 QueryClientProvider 实例;同一个 key 的请求交给 useQuery 统一发起 组件只读结果;dedupingInterval 设到 2000 以上 覆盖首屏并发窗口;清缓存后刷新 用 Network 面板确认只剩一条。

最后用这个标准收尾,清缓存后刷新首屏,/api/user 只有 1 条请求,其余组件直接复用同一次结果。

作者 9823189