这是indexloc提供的服务,不要输入任何密码
Skip to content

Hydration error using loading state of useQuery when prefetching #9399

@Icestonks

Description

@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

Image

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions