Skip to content

HydrationBoundary takes unknown as the type as unknown instead of DehydratedState #9323

Open
@paperclover

Description

@paperclover

Describe the bug

For a library with so much type safety, this is a bit surprising to see.

A refactor to a utility function code using TanStack React Query accidentally passed { state: DehydratedState, ... } instead of the actual dehydrated state, which silently broke some instances of data prefetching on a production Next.js application.

Your minimal, reproducible example

N/A

Steps to reproduce

import { HydrationBoundary } from "@tanstack/react-query";

const mistaken = { oh_no: true };
const element = <HydrationBoundary state={mistaken}>hello</HydrationBoundary>;

result: no error!


the real world situation that ran into this was we had a helper function serverSidePrefetchQueries which helps us avoid some of Next.js pitfalls regarding server components. the usage looked like this:

const state = await serverSidePrefetchQueries([
    queryThingA,
    queryThingB,
});

return <HydrationBoundary state={state}>{client}</HydrationBoundary>

but then the return signature of our helper changed, and these pre-fetches silently stopped working.

Expected behavior

should not pass type checking

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

  • OS: macOS 15
  • Browser: N/A

Tanstack Query adapter

react-query

TanStack Query version

v4, but issue on v5 as well

TypeScript version

N/A

Additional context

No response

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