HydrationBoundary double fetching on subsequent visits
维护者通常 1 天内回复
@sukvvon 已经在做这个了。
开始于 2025年12月14日。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 35/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 停滞
- 技术栈
- react, typescript
- 领域
- frontend
调研方向
从 StackBlitz 复现开始，在离开并返回时跟踪 loader、HydrationBoundary、React.useMemo/useEffect 以及 refetchOnMount 的行为。确认服务器计算了两次新的 dehydrated 数据，然后验证来自 loader 的新 query 在 hydration 完成之前不会在客户端进行 refetch。
由索引模型根据 Issue 内容生成。
描述
Describe the bug
I used HydrationBoundary in React Router. In loader(), I get the data, dehydrate it, then hydrate the client side query client.
- For the first visit, since it's a new query, it got hydrated in
React.useMemo - For subsequent visits, it will be deferred to
React.useEffect, however, if the cache is stale, query client will refetch beforeuseEffect, which makes the server compute the data twice: one in loader, the other in the component
I looked into the source code and found that it's due to refetchOnMount, which is true by default. I think it would be plausible to prevent a refetch if the query in the dehydrated state is fresh.
There are some experiments in the provided code, e.g. initialData from React Query meets React Router, initialData + initialDataUpdatedAt, HydrationBoundary, and my custom hook use-hydrated-query which sets refetchOnMount to false for that query if not explicitly provided during hydration. You may navigate away and back for each experiment and see the log in console to reproduce the issue.
Your minimal, reproducible example
https://stackblitz.com/edit/vitejs-vite-yiggax3s
Steps to reproduce
mentioned in 'Describe the bug'
Expected behavior
If query is fresh from loader(), client side query client should not refetch
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
Any browser
Tanstack Query adapter
react-query
TanStack Query version
v5.85.3
TypeScript version
5.8.3
Additional context
No response
- 主要语言
- TypeScript
- 星标
- 50.4k
- 派生
- 4.2k
- 平均合并
- 6 小时 37 分钟
- 30 天内合并 PR
- 398
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
TanStack/query 的其他 Issue
-
难度 2/5 1-3 小时 新手友好度 72/100
TanStack/query#11930 · 1 条评论 ·
维护者通常 1 天内回复
-
solid-query: STRICT_READ_UNTRACKED on Solid 2 — client()/options() read in component body (useMutation, useBaseQuery)可能重新可做 @LeonxLJX 于 37 天前认领，目前没有进行中的 PR。 未关闭
难度 2/5 1-3 小时 新手友好度 84/100
TanStack/query#11358 · 2 条评论 · 1 个 reaction ·
维护者通常 1 天内回复
-
solid-query: switching the queryClient accessor strands the new client's cache (subscription stays on the old observer)可能已有人在做 @MaNaN1803 于 80 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 84/100
TanStack/query#11106 · 1 条评论 ·
维护者通常 1 天内回复
-
restoreQueries and persisterGc throw on malformed persisted entries可能已有人在做 @VGontier-cmd 于 5 天前认领。 未关闭
难度 3/5 1-2 天 新手友好度 72/100
维护者通常 1 天内回复
-
难度 4/5 3-5 天 新手友好度 45/100
维护者通常 1 天内回复
相似的 Issue
-
Table: Space fires onActivate in single-selection mode — the reference doc and the JSDoc disagree未关闭
难度 2/5 1-3 小时 新手友好度 68/100
sidorares/react-x11-components#764 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 76/100
backnotprop/plannotator#1840 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 78/100
JoviDeCroock/pracht#432 ·
维护者通常 1 天内回复
-
approved check:passed streams:add
难度 1/5 1 小时以内 新手友好度 75/100
维护者通常 1 天内回复
-
Hardware attribute name "app Connection Support" has inconsistent casing可能已有人在做 关联的 PR 仍在进行中或已合并。 未关闭
难度 1/5 1 小时以内 新手友好度 88/100
walletbeat/walletbeat#1628 ·
维护者通常 1 天内回复