Hydration error using loading state of useQuery when prefetching
維護者通常 1 天內回覆
@DogPawHat 已經在處理了。
開始於 2026年9月15日。
評估
- 難度
- 4/5
- 預估耗時
- 3-5 天
- 新手友好度
- 45/100
- Issue 類型
- 缺陷
- 描述清晰度
- 基本清楚
- 活躍度
- 活躍
- 技術堆疊
- react, typescript
- 領域
- frontend
研究方向
從連結的 StackBlitz 重現開始，追蹤伺服器 prefetch、客戶端 hydration，以及 useQuery isLoading 的渲染路徑。閱讀相關的 tRPC issue 以了解背景；建置並啟動專案後，重現不再產生 hydration 錯誤即表示完成。
由索引模型根據 Issue 內容生成。
描述
Describe the bug
If you prefetch data on the server and then use useQuery with isLoading on the client, it can lead to a hydration error.
Your minimal, reproducible example
https://stackblitz.com/~/github.com/Icestonks/react-query-trpc-test
Steps to reproduce
- Prefetch something on the server
- Hydrate it to the client
- Use
useQueryin the client, and have a loading fallback withisLoading.
Then there should come a hydration error.
Expected behavior
When first building and starting the project, we should see an hydration error. The error can also come at other times, but that's the most reliable way, to get the error to occur.
How often does this bug happen?
Sometimes
Screenshots or Videos
Platform
- OS: Windows
- Browser: Google Chrome
- Browser version: 138.0.7204.100
Tanstack Query adapter
react-query
TanStack Query version
5.82.0
TypeScript version
5.8.3
Additional context
Initially, the issue was thought to be related to tRPC, so there has been some discussion about the error over there: https://github.com/trpc/trpc/issues/6740
Would highly recommend reading some of the comments from that issue. Could maybe also give some more context.
- 主要語言
- TypeScript
- 星號
- 50.5k
- 分支
- 4.2k
- 平均合併
- 10 小時 23 分鐘
- 30 天內合併 PR
- 581
環境準備
- 沒有 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 於 59 天前認領，目前沒有進行中的 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 於 1 天前認領。 未關閉
難度 3/5 1-2 天 新手友好度 20/100
維護者通常 1 天內回覆
-
[query-core] [performances] `setQueryData` dispatches a `success` event (and triggers broadcast/persist) even when the new data is structurally identical to the cached data可能重新可做 關聯的 PR 已關閉且未合併。 未關閉
難度 4/5 3-5 天 新手友好度 52/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 於 13 天前認領。 未關閉
難度 2/5 1-3 小時 新手友好度 25/100
維護者通常 1 天內回覆
相似的 Issue
-
🐛 bug
難度 2/5 1-3 小時 新手友好度 68/100
LibreChat-AI/LibreChat#17733 ·
維護者通常 1 天內回覆
-
難度 2/5 1-3 小時 新手友好度 70/100
TypeStrong/typedoc#3150 ·
-
accessibility bug good first issue
難度 2/5 1-3 小時 新手友好度 85/100
維護者通常 1 天內回覆
-
Normalize image-source MIME types before SVG dispatch可能已有人在做 @HarsH-1877 今天認領。 未關閉
難度 2/5 1-3 小時 新手友好度 75/100
tscircuit/image-utils#58 · 1 則留言 ·
-
難度 1/5 1 小時以內 新手友好度 74/100
維護者通常 2 天內回覆