Cannot read properties of undefined (reading 'getStreamedValue')

[enmanuelmag]

Describe the bug

If I use useQuery hook always throw an error Cannot read properties of undefined (reading 'getStreamedValue'). Even a dummy hook without external fetch. Mutation works all good.

Your minimal, reproducible example

https://codesandbox.io/p/github/DeltaTypes/vch-kpi-platform/feat/vechiel-template-form-xlsx

Steps to reproduce

1. Go to app folder
2. Up docker compose docker-compose up -d
3. Execute npm run db:migrate-dev
4. Execute npm run prisma:seed
5. Login with a Admin user (see Seed folder for admin seed)
6. Go to Fleet tab on Header
7. See the error

Expected behavior

Use of useQuery without any error as useMutation works.

How often does this bug happen?

Every time

Screenshots or Videos

Platform

Windows

Browser: Vivaldi and Google Chrome

Tanstack Query adapter

None

TanStack Query version

latest

TypeScript version

^5.7.2

Additional context

No response

[enmanuelmag]

Searching deep on the base code. I noted that the error raise on t Object._experimental_beforeQuery call, under useBaseQuery.

[enmanuelmag]

I created a entire new project and now works. The strange is that I created this project using Vite create and all setup comes directly from template.

[TkDodo]

Unable to access this workspace

your reproduction is private, so I can’t access it.

anyways, my guess is that you are using TansTack Start, as it’s the only place where experimental_beforeQuery is used.

router/packages/react-router-with-query/src/index.tsx

Line 69 in 0d7dc76

const dehydratedClient = router.clientSsr!.getStreamedValue<any>(

I’m transferring this to the router repo. @schiller-manuel FYI

[schiller-manuel]

please provide the reproduction

[Amoodaa]

Encountered the same problem

yarn create vite -> tanstack router -> choose env, trpc, query in the add-ons

I dont want tanstack start as im making a SPA, still it ignores my request and creates a tanstack start app

PS D:\code\captur-apis\ui> yarn create vite 
yarn create v1.22.22
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "[email protected]" with binaries:
      - create-vite
      - cva
│
◇  Project name:
│  tester
│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  TanStack Router ↗
yarn create v1.22.22
warning From Yarn 1.0 onwards, scripts don't require "--" for options to be forwarded. In a future version, any explicit "--" will be forwarded as-is to the scripts.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "[email protected]" with binaries:
      - create-tsrouter-app
┌  Let's configure your TanStack application
│
◇  Select the router type:
│  File Router - File-based routing structure
│
◇  Would you like to use Tailwind CSS?
│  No
│
◇  Select toolchain
│  Biome
│
◇  What add-ons would you like for your project?
│  T3Env, Query, tRPC
│
◇  Would you like any examples?
│  none
│
◇  Initialized git repository
│
◇  Installed dependencies
│
▲  Warnings:
│  TanStack Start is not yet at 1.0 and may change significantly or not be compatible with other add-ons.
│  Migrating to Start might require deleting node_modules and re-installing.
│
└  Your TanStack app is ready in 'tester'.

Use the following commands to start your app:
% cd tester
% yarn run dev

Please check the README.md for information on testing, styling, adding routes, etc.

[Amoodaa]

Trying to remove the Tanstack start elements causes the error
And moving the TRPC to another app, (i dont want it in the same package in my monorepo)

[TkDodo]

we can’t look into it without a reproduction we can actually access ...

[dgordon-iqx]

Hey @TkDodo! 👋 Fantastic work as always! Love what you provide to the ecosystem and the passion you have! Truely inspiring 🥳

I found this issue as I am also getting this error when using TanStack Router augmented with react-router-with-query. Is this designed only for use in SSR via TanStack Start?

I found @nekochan0122 's demo repo for implementing authentication and it uses it, but within a TSS application (TanStack Start).

In it, from what I can see, from this line that the queryClient is automatically added to the context. So I am wondering why it is needed in the internal router?

export interface RouterContext {
  queryClient: QueryClient;
}

export const router = routerWithQueryClient(
  createRouter({
    routeTree,
    context: { queryClient } as RouterContext,
    // Since we're using React Query, we don't want loader calls to ever be stale
    // This will ensure that the loader is always called when the route is preloaded or visited
    defaultPreloadStaleTime: 0,
    defaultStructuralSharing: true,
    scrollRestoration: true,
  }),
  queryClient,
);

Feels like if it is added internally then it should be dropable in the internal router and the root? Or is this a constraint of getting typing to work correctly?

If I use routerWithQueryClient() and then drop the QueryClientProvider around it as it is added internally I get.

TypeError: Cannot read properties of undefined (reading 'getStreamedValue')

when attemping any useQuery calls in the app.

I also added the context to __root.tsx explictly to keep TSC happy :)

export const Route = createRootRouteWithContext<RouterContext>()({
  component: Component,
});

It is NOT using TanStack Start. Is this expected? Is the package only meant to be called for Isometric network requests and not pure CSR apps? Sorry if this discombobulated 😅 Let me know if you'd like be to elaborate.

TL;DR: Using react-router-with-query's routerWithQueryClient() in a purely client side app and getting the error when attempting to useQuery.

[schiller-manuel]

this package is indeed not meant for pure-client-side apps.
we have another issue open about that #4208