Hydration error using loading state of useQuery when prefetching

[Icestonks]

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

1. Prefetch something on the server
2. Hydrate it to the client
3. Use useQuery in the client, and have a loading fallback with isLoading.

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.