SSR Dehydration/Hydration

[mskubak]

I followed this docs: https://tanstack.com/router/latest/docs/framework/react/guide/external-data-loading#ssr-dehydrationhydration to hydrate/dehydrate.

  const router = createRouter({
    routeTree,
    context: { graphql: apolloSSRClient },
    history: memoryHistory,
    dehydrate: () => {
      return apolloSSRClient.extract();
    }
  });
  
  ....
  
  <StartServer router={router} />

The problem is that dehydrate is never called on server side and on client side I got message that TSR_SSR is not defined. Did I miss something or is there a bug or it's not implemented yet?

[theMostCuriousHomunculus]

i also started getting this error recently! previously, i had dehydrate and hydrate implemented this way:

dehydrate() {
	return { apolloClient: JSON.stringify(apolloClient.extract()).replace(/</g, '\\u003c') };
},
hydrate(dehydrated) {
	apolloClient.restore(JSON.parse(dehydrated.apolloClient));
},

when i was on

"@tanstack/react-router": "^1.95.4",
"@tanstack/router-devtools": "^1.95.4",
"@tanstack/start": "^1.95.4",
"@tanstack/zod-adapter": "^1.95.3",
"@tanstack/router-cli": "^1.95.4",
"@tanstack/router-plugin": "^1.95.4",
"@tanstack/router-vite-plugin": "^1.92.11",

things were working, but then i upgraded to the latest versions of pnpm and those packages and started getting this error in the browser:

Uncaught Error: Invariant failed: Expected to find a dehydrated data on window.TSR_SSR.dehydrated... but we did not. Please file an issue!

trying to track down what changed

[theMostCuriousHomunculus]

it seems support for non-streaming ssr may have been removed, but the docs don't reflect this. i am not sure exactly what happened, but if i run this command:

pnpm add @tanstack/[email protected] @tanstack/[email protected] @tanstack/[email protected] @tanstack/[email protected] && pnpm add -D @tanstack/[email protected] @tanstack/[email protected] @tanstack/[email protected]

which downgrades relevant packages to the versions i was previously using then revert changes to pnpm-lock.yaml and run pnpm install again for some reason, dehydrate and hydrate work again.

looking at the examples, both the basic + ssr (file-based) and basic + ssr streaming (file-based) now use start's defaultStreamHandler, when previously the basic + ssr (file-based) showed how to do ssr without streaming.

according to the latest docs, https://tanstack.com/router/latest/docs/framework/react/guide/ssr, both streaming and non-streaming ssr are supported by @tanstack/react-router, however, as you say, on the latest versions, dehydrate does not appear to be called. i'm thinking either this is a bug or the docs may need updated to explain how non-streaming ssr should be implemented or mention that only streaming ssr is now supported.

[schiller-manuel]

apollo is currently getting a first class integration

cc @phryneas

[phryneas]

Yup, you can use the experimental build from apollographql/apollo-client-nextjs#422 for now:

npm i https://pkg.pr.new/apollographql/apollo-client-nextjs/@apollo/client-integration-tanstack-start@422

We'll put an alpha out in a few days.

Setup instructions here:

https://github.com/apollographql/apollo-client-nextjs/blob/next/packages/react-router/README.md

You don't need to do anything beyond that, just use preloadQuery in loaders, or useSuspenseQuery or useBackgroundQuery/useReadQuery in components - those will transport data over automatically.