bug: react-query with tRPC is not available anymore

Provide environment information

> npx envinfo --system --binaries
System:
    OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
    Memory: 9.88 GB / 14.97 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: 9.5.0 - ~/.local/share/pnpm/pnpm

> pnpm list
dependencies:
@t3-oss/env-nextjs 0.10.1
@tanstack/react-query 5.51.23
@trpc/client 11.0.0-rc.477
@trpc/react-query 11.0.0-rc.477
@trpc/server 11.0.0-rc.477
geist 1.3.1
next 14.2.5
react 18.3.1
react-dom 18.3.1
server-only 0.0.1
superjson 2.2.1
zod 3.23.8

devDependencies:
@types/eslint 8.56.11
@types/node 20.14.15
@types/react 18.3.3
@types/react-dom 18.3.0
@typescript-eslint/eslint-plugin 7.18.0
@typescript-eslint/parser 7.18.0
eslint 8.57.0
eslint-config-next 14.2.5
typescript 5.5.4

  "ct3aMetadata": {
    "initVersion": "7.36.2"
  },

Describe the bug

Following the tutorial on YouTube (the one with tRPC), other videos related or the tRPC documentation part on the create-t3 website, it's impossible to follow along because react-query methods are not available anymore.

Even the project setup does not use those methods anymore, leaving us a generated page.tsx with this tRPC call:

  const hello = await api.post.hello({ text: "from tRPC" });

Which I tried to modify as the tutorial in this way:

  const hello = await api.post.hello.useQuery({ text: "from tRPC" });

Getting the following TS error:

typescript: Property 'useQuery' does not exist on type 'DecorateProcedure<{ ctx: { headers: Headers; }; meta: object; errorShape: { data: { zodError: typeToFlattenedError<any, string> | null; code: "PARSE_ERROR" | "BAD_REQUEST" | ... 16 more ... | "CLIENT_CLOSED_REQUEST"; httpStatus: number; path?: string | undefined; stack?: string | undefined; }; message: string; code:...'. [2339]

Reproduction repo

https://github.com/lorenzocorallo/test-t3-trpc

To reproduce

pnpm create t3-app@latest

Scaffolded with the minimal setup possible

App Router
tRPC

Then add the useQuery method to the default tRPC call:

  const hello = await api.post.hello.useQuery({ text: "from tRPC" });

Additional information

I've encountered this problem in other setups that include combination of NextAuth, TailwindCSS and Drizzle.

t3-oss / create-t3-app