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.5k
- 分支
- 4.2k
- 平均合併
- 11 小時 2 分鐘
- 30 天內合併 PR
- 524
環境準備
- 沒有 Dockerfile 或 Docker Compose 檔案
- 有 Pull Request 範本
- 閱讀貢獻指南
從這裡開始
- 先讀完整個 Issue，再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫，在一個分支上完成修改。
- 送出 Pull Request，並在描述裡引用這個 Issue 編號。
TanStack/query 的其他 Issue
-
難度 2/5 1-3 小時 新手友好度 78/100
維護者通常 1 天內回覆
-
solid-query: STRICT_READ_UNTRACKED on Solid 2 — client()/options() read in component body (useMutation, useBaseQuery)可能重新可做 @LeonxLJX 於 60 天前認領，目前沒有進行中的 PR。 未關閉
難度 2/5 1-3 小時 新手友好度 84/100
TanStack/query#11358 · 2 則留言 · 1 個 reaction ·
維護者通常 1 天內回覆
-
[svelte-query] A result key first read after the query settled stays stale: the component's copy refreshes only on a change of an already-tracked key可能已有人在做 @lazerg 於 2 天前認領。 未關閉
難度 3/5 1-2 天 新手友好度 20/100
維護者通常 1 天內回覆
-
[query-broadcast-client-experimental] broadcastQueryClient: an `added` event overwrites a receiving query that has no data (e.g. in error) with the sender's empty state可能已有人在做 @lazerg 於 14 天前認領。 未關閉
難度 2/5 1-3 小時 新手友好度 25/100
維護者通常 1 天內回覆
-
solid-query 6.0.0-rc.5: onCacheEvent throws NotReadyError during a Solid 2 (rc.14+) transition landing可能重新可做 @UzumakiODZ 於 19 天前認領，目前沒有進行中的 PR。 未關閉
難度 4/5 3-5 天 新手友好度 28/100
TanStack/query#12031 · 2 則留言 ·
維護者通常 1 天內回覆
相似的 Issue
-
難度 1/5 1 小時以內 新手友好度 85/100
formbricks/formbricks#9918 ·
維護者通常 1 天內回覆
-
enhancement
難度 2/5 1-3 小時 新手友好度 65/100
thecodacus/pithagoras#364 ·
維護者通常 1 天內回覆
-
難度 1/5 1 小時以內 新手友好度 72/100
openclimatefix/quartz-frontend#823 ·
維護者通常 4 天內回覆
-
area:agent-manager community needs-triage
難度 2/5 1-3 小時 新手友好度 76/100
維護者通常 1 天內回覆
-
`contacts.create` posts to `/audiences/undefined/contacts` when `audienceId` is undefined可能已有人在做 @RaphaelFakhri 今天認領。 未關閉
難度 2/5 1-3 小時 新手友好度 70/100
resend/resend-node#1176 ·
維護者通常 1 天內回覆