Skip to content

SSR docs typo - dehydratedState is nested, so it should be deconstructed when is consumed #4997

@sneridagh

Description

@sneridagh

Describe the bug

In the section "Using Other Frameworks or Custom SSR Frameworks" in

https://github.com/TanStack/query/blob/main/docs/react/guides/ssr.md#using-other-frameworks-or-custom-ssr-frameworks

  const dehydratedState = dehydrate(queryClient)

dehydrate returns a nested object with one key dehydratedState. In the client docs dehydratedState should be deconstructed:

const { dehydratedState } = window.__REACT_QUERY_STATE__

as in:

import {
  Hydrate,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'

const { dehydratedState } = window.__REACT_QUERY_STATE__

const queryClient = new QueryClient()

ReactDOM.hydrate(
  <QueryClientProvider client={queryClient}>
    <Hydrate state={dehydratedState}>
      <App />
    </Hydrate>
  </QueryClientProvider>,
  document.getElementById('root'),
)

Otherwise, the hydration fails and the cache is empty.

Your minimal, reproducible example

It's a docs issue

Steps to reproduce

It's a docs issue

Expected behavior

The docs are correct

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

It's a docs issue

TanStack Query version

all

TypeScript version

all

Additional context

It's a docs issue

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentation

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions