Cannot read properties of undefined (reading 'isDehydrated')

[epenflow]

I'm consistently running into an error when trying to directly access an authenticated page by URL. The error message is:

client : "Cannot read properties of undefined (reading 'isDehydrated')"

server : "tried to stream query ["all-users"] after stream was already closed"

(authenticated)/test.tsx

import { useSuspenseQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";

import { allUsersQueryOpts } from "./-query";
import { Button } from "~/components/ui";
import { signOutSessionFn } from "~/integrations/auth";

export const Route = createFileRoute("/(authenticated)/test")({
  loader: async ({ context }) => {
    await context.queryClient.ensureQueryData(allUsersQueryOpts());
  },
  component: Page,
});

function Page() {
  const navigate = Route.useNavigate();
  const { data } = useSuspenseQuery(allUsersQueryOpts());

  return (
    <div className="flex gap-2">
      <Button
        className="cursor-pointer"
        onClick={async (e) => {
          e.preventDefault();
          e.stopPropagation();
          const res = await signOutSessionFn();
          if (res.success) {
            navigate({ to: "/sign-in" });
          }
        }}>
        Sign out
      </Button>
      <div>
        {data.users.map((user) => (
          <div key={user.id}>
            <p>{user.username}</p>
            <p>{user.password}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

(authenticated)/-query/index.ts

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

import tuyau from "~/integrations/tuyau";

export const allUsersQueryOpts = () =>
  queryOptions({
    queryKey: ["all-users"],
    queryFn: async () => await tuyau.test["all-users"].$get().unwrap(),
  });

integrations/tuyau.ts

/* eslint-disable @typescript-eslint/triple-slash-reference */
/// <reference path="../../../backend/.adonisjs/api.ts" />
import { createTuyau } from "@tuyau/client";

import { api } from "@repo/backend/api";

import { getAuthSessionFn } from "./auth";

export default createTuyau({
  api,
  baseUrl: "http://localhost:3333/",
  hooks: {
    beforeRequest: [
      async (req) => {
        const { auth } = await getAuthSessionFn();

        if (auth?.accessToken) {
          req.headers.set("Authorization", `Bearer ${auth.accessToken.token}`);
        }
      },
    ],
  },
});

[amasen02]

There are two coupled reasons why this happens, caused by the interaction between TanStack Start's SSR streaming and TanStack Query's dehydration lifecycle during a cold page load (direct URL navigation).

---

1. Root Cause: SSR Stream Closes Before Query Finishes

When you navigate on the client, TanStack Router renders in the browser where the DOM stream is already settled. But when you directly access the URL in the address bar:

1. TanStack Start boots on the server and begins streaming HTML chunks to the browser.
2. In your (authenticated) route group, you likely have an auth guard (e.g. in beforeLoad or a session check) that either redirects, checks headers, or finishes the request.
3. Simultaneously, loader begins executing context.queryClient.ensureQueryData(allUsersQueryOpts()).
4. If the auth verification fails, redirects, or the server stream terminates/flushes before the tuyau API request to http://localhost:3333/ finishes resolving, the HTTP response stream closes.
5. When the allUsersQueryOpts query promise subsequently settles, TanStack Query attempts to push the serialized query chunk into the closed response stream, yielding:

   server: "tried to stream query [\"all-users\"] after stream was already closed"
   

6. Because the stream closed before the dehydrated query state was written into the HTML payload, the client receives an HTML payload with an undefined or incomplete queryClientState. When the client tries to initialize the cache, it blows up with:

   client: "Cannot read properties of undefined (reading 'isDehydrated')"
   

---

2. Cookie / Header Forwarding on Server Side

Notice your tuyau client definition:

hooks: {
  beforeRequest: [
    async (req) => {
      const { auth } = await getAuthSessionFn();
      if (auth?.accessToken) {
        req.headers.set("Authorization", `Bearer ${auth.accessToken.token}`);
      }
    },
  ],
},

When running in the browser, getAuthSessionFn() reads client storage/cookies normally. But during server-side rendering (cold URL access), tuyau runs on the Node/Nitro server process.

If getAuthSessionFn() does not extract the session/token from the incoming request's cookie or header using @tanstack/start/server's getWebRequest() (or Nitro's getHeaders()), auth?.accessToken is undefined. The server-side fetch to http://localhost:3333/ is unauthenticated (or hangs/errors), triggering an early redirect or failed stream.

To fix this on the server side in TanStack Start, ensure your session getter extracts cookies from the active request:

import { getWebRequest } from '@tanstack/start/server'

export async function getAuthSessionFn() {
  // If running on the server, extract cookie/token from the incoming web request
  if (typeof window === 'undefined') {
    const req = getWebRequest()
    const cookieHeader = req?.headers.get('cookie')
    // extract auth token from cookieHeader or forward Authorization header
    return parseAuthFromCookies(cookieHeader)
  }

  // Client side implementation
  return getClientSession()
}

---

3. Ensure Route Auth Strictly Guards the Loader in beforeLoad

In your (authenticated)/route.tsx (or layout route), protect the branch inside beforeLoad and return the auth context so the child loader never executes queries if the user isn't authenticated:

// (authenticated)/route.tsx
import { createFileRoute, redirect } from '@tanstack/react-router'
import { getAuthSessionFn } from '~/integrations/auth'

export const Route = createFileRoute('/(authenticated)')({
  beforeLoad: async ({ location }) => {
    const { auth } = await getAuthSessionFn()

    if (!auth?.accessToken) {
      throw redirect({
        to: '/sign-in',
        search: { redirect: location.href },
      })
    }

    return { auth }
  },
})

By throwing redirect(...) inside beforeLoad, TanStack Router aborts route execution before the child route's loader runs ensureQueryData, preventing orphan background queries from attempting to stream after response termination.

---

4. Verify routerWithQueryClient in router.tsx

If you are using TanStack Start with @tanstack/react-query, ensure your router factory in app/router.tsx is wrapped with routerWithQueryClient:

import { createRouter as createTanStackRouter } from '@tanstack/react-router'
import { routerWithQueryClient } from '@tanstack/react-router-with-query'
import { QueryClient } from '@tanstack/react-query'
import { routeTree } from './routeTree.gen'

export function createRouter() {
  const queryClient = new QueryClient()

  return routerWithQueryClient(
    createTanStackRouter({
      routeTree,
      context: { queryClient },
      defaultPreload: 'intent',
    }),
    queryClient
  )
}

routerWithQueryClient automatically coordinates the hydration/dehydration contract and prevents Cannot read properties of undefined (reading 'isDehydrated') when queries are passed between the server stream and client hydration boundary.