-
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
Open
Description
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
useQuery
in 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: trpc/trpc#6740
Would highly recommend reading some of the comments from that issue. Could maybe also give some more context.
ammarmbe and jake8655samemd
Metadata
Metadata
Assignees
Labels
No labels