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}`);
        }
      },
    ],
  },
});

[schiller-manuel]

please provide a complete example repository

[epenflow]

I found the issue. The issue came from @tanstack/react-router-with-query . So the issue appears when i'm trying to access session data and then reload the page that will throw Cannot read properties of undefined (reading 'isDehydrated'). So for now i create new router-with-query but i changes this line @tanstack/react/router-with-query to

if (!router.serverSsr?.isDehydrated()) {
return
}

[schiller-manuel]

are you creating a query client per request? if not that could be the problem

[epenflow]

This issue occurs when using the beforeLoad and useSession functions on tanstack start, specifically when attempting to fetch data and then performing a page reload.

minimal demo
repo

issue-cannot-read-properties-of-undefined-reading-isdehydrated_phsYHfz9.mp4

[schiller-manuel]

create a new queryclient for each request

[epenflow]

Thanks for the advice 🙏