tRPC

Join the tRPC server to ask questions!

tRPC

Join the community to ask questions about tRPC and get answers from other members.

3/19/2025

NextJs trpcClient and merged router. But it is returning a html doc instead of json error.

I am new trpc, I am implementing a single trpcClient and merged router, in nextJs v15, app router. When i implement trpc with api routes /api/v2/user/[user]/route.ts and utils/trpc nexbacthlink /api/v2/user. this code snippet is working fine. ...

Solution:

Oh, I see now, I fixed the issue by adding api/v2/[trpc]/route.ts. It working now with this.

code-snippet.txt

capaj

3/18/2025

getting type error in the code from https://trpc.io/docs/client/react/server-components

Hey, has something changed since the doc for server-components was written? getting ```...

Saitama

3/14/2025

Type error when following guide TRPC React query: 'lazy' is declared here.

Type 'CreateRouterInner<RootConfig<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { users: CreateRouterInner<...>; }>' does not satisfy the constraint 'Router<any, any>'.
  Types of property '_def' are incompatible.
    Property 'lazy' is missing in type 'RouterDef<RootConfig<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { users: CreateRouterInner<...>; }, { ...; }>' but required in type '{ _config: RootConfig<any>; router: true; procedure?: undefined; procedures: any; record: any; lazy: Record<string, LazyLoader<AnyRouter>>; }'.

Type 'CreateRouterInner<RootConfig<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { users: CreateRouterInner<...>; }>' does not satisfy the constraint 'Router<any, any>'.
  Types of property '_def' are incompatible.
    Property 'lazy' is missing in type 'RouterDef<RootConfig<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { users: CreateRouterInner<...>; }, { ...; }>' but required in type '{ _config: RootConfig<any>; router: true; procedure?: undefined; procedures: any; record: any; lazy: Record<string, LazyLoader<AnyRouter>>; }'.

...

neoney

3/14/2025

state change not triggering refetch

I have this query in my app: ```ts const [filter, setFilter] = useState({ value: "",...

Eilinis

3/14/2025

AppRouter nested routers/procedures are any when imported in monorepo

(11.0.0-rc.828) Nested routers or procedures have 'any' types when imported in monorepo (vite, trpc). See utils router in the photo. I am wondering is it some tsconfig madness? Typescript: 5.7.2 through all apps...

Solution:

fixed, needed to add composite: true in the api package as it was both used in web app for types and in api app.

NotZelda

3/13/2025

What are the best practices for keeping TRPC and ts-server fast?

I decided to migrate my entire app to TRPC over a couple days as I identified it was a great solution for my use case. However, now my typescript auto-complete and typing checking appear to be much slower. I think TRPC is still the best solution, I'm just curious if there are good practices to follow to ensure that my ts-server stays fast as I scale even further. ts-go may help with this in the future, but for now I'm stuck waiting a few seconds for intellisense. Anyone have any resources I can review?...

Nomad

3/13/2025

Weird data type when extending context in fetch adapter

Environment: * pnpm * Vite react SPA * Node v22.11.0 * tRPC server and client version: 11.0.0-rc.828...

Solution:

Well, in case anyone sees this I managed to figure it out. When starting a new CF project with the react framework template it creates an additional tsconfig (to the three existing ones from vite). This config (tsconfig.worker.json) references the following types: ```json "types": [ "@cloudflare/workers-types/2023-07-01", "./worker-configuration.d.ts",...

vpjm

3/11/2025

FormData TRPCClientError

Hi i have this error in my client : ```createFormControl.ts:1217 Uncaught (in promise) TRPCClientError: [ { "code": "invalid_type", "expected": "string", "received": "undefined",...

vpjm

3/11/2025

Private chat with TRPC

Hi I'm relatively new to tRPC and I'm currently trying to implement private chat rooms (1:1 conversations or small groups). I’ve checked out the tRPC SSE chat example https://github.com/trpc/examples-next-sse-chat, but it seems to be designed more for public chat rooms. Could someone please point me in the right direction or share some tips on how to structure private conversations using tRPC ? ( atm, I manually check for each operation whether the user is part of the room, but I don't find this approach very intuitive. )...

beastieboard

3/10/2025

Router type = any in monorepo...

Using typescript 5.8.2, trpc 11.0.0-rc.688 I have my server and frontend in separate packages, and when importing the AppRouter (import type { AppRouter } from 'api') , the type of AppRouter is any :/. I've followed all the steps from the FAQ, but to no avail....

Solution:

SOLVED!! The problem was the use of path aliases in the api. I changed an import ... from "@/..." to import ... from "../..." and it started working....

tyler4949

3/9/2025

Creating Service Layer in Next App Router

I have a NextJS application that was built with the t3 stack a few years ago on the pages router. I am finally getting around to migrating to the app router and am running into some confusion. TLDR: I would like to build a service layer (basically just a set of functions) to call trpc endpoints that can be reused/called from both my server and client components. I followed the "Set up with React Server Components" on the trpc v11 docs, and it looks like there are essentially 2 "instances" of trpc that are created, 1 for client components and 1 for server components (trpc/client.tsx and trpc/server.tsx, respectively). Since each of these has a unique way of interacting with the trpc endpoint, and the server.tsx file is "server-only" and cant be used in my client components, I'm not sure how I can go about making a service layer that is reused between client and server components. My existing service layer handled the trpc call as well as other conversions to FE models, so I would really like to avoid duplicating this work from client and server components if possible. Does anyone know how I can achieve this?...

xSenny_

3/9/2025

Stream closed, but it returns the actual data

So I have this procedure that simply returns a list of objects from db: ```js getAllHabits: protectedProcedure.query(({ ctx }) => { if (!ctx.session.user.id) return []; // return []...

ToP

3/9/2025

Cannot set headers after they are sent to the client

I have used login system from this repo https://github.com/itsrakeshhq/finance-tracker/tree/main/backend/src/modules/auth but reworked it to tRPC v11 (11.0.0-rc.824). I changed nothing regarding logic, only stuff regarding new version of tRPC and also i am using tRPC standalone not express. Now I have issue when i try to set cookies in authRouter.login ``` const authRouter = router({ login: publicProcedure...

Mr. Joker

3/6/2025

I'm trying to get type for queries/mutations returned from trpc use hooks, but they are different

Hello, can anyone tell me please how I can get rid of ts errors when trying to accomplish what I mentioned in title? I tried asserting as types from context from screen 1, but it throws errors too...

Solution:

This is how I did it: ```tsx import { AppRouter } from "../router" import { TRPCClientErrorLike } from "@trpc/client" import { UseTRPCQueryResult } from "@trpc/react-query/shared"...

Thomas

3/6/2025

tRPC useQuery waits for all queries—How to render ASAP?

I have a dashboard with multiple components, each making its own useQuery call. The problem: It waits for all queries to load before rendering anything, instead of displaying data as soon as it's ready. 🔹 Setup: - trpc.createClient with httpBatchLink...

Solution:

Ok I found the solution, I switched to « httpLink » instead of « httpBatchLink » in my trpc client

Hexi

3/6/2025

File based structuring, trpc layout

Hi! I totally love trpc, only thing is that I want/need it to be file based. Think of svelte, each path has its own file. Was wondering if there is already something out there that does about the same, or if its even possible. So the layout: Each folder is its own router and each file is its procedure...

PRINCESSELSA

3/5/2025

How to wrap response type with useAsyncData from Nuxt?

I'm using the vanilla client with Nuxt currently but it's a little tedious calling useAsyncData(() => client.someProcedure.query()) on every call so that I don't double fetch during SSR. Is there a way to make a wrapper client that will wrap query and mutation responses with the useAsyncData() call? I would love if the client was typed and I could call it the same way I can call the vanilla client.

NotZelda

3/3/2025

How to define per route staleTime on queryClient?

It looks like I am unable to override the default stale time provided to react query client, no matter how I define the the route. Is TRPC overriting these dafult somewhere down the chain? ```typescript export const createQueryClient = () => { const queryClient = new QueryClient({...

skylerdj

3/3/2025

Can i use a single trpc proxy client in NextJS 12?

Hey guys quick question if anyone is around. Are there any issues with defining a trpc proxy client once in nextjs pages router and then reusing it in client components by manually passing it to a useQuery? Unfortunately our backend team has created multiple trpc routers and we still haven't upgraded from react-router v3, so the trpc-react-query integration isn't a high priority for us, but will there be any caching or request sharing issues when using a single trpc proxy client? ```ts // define this once in src/trpc.ts export const trpc = createTRPCProxyClient<AppRouter>({...

Mr. Joker

3/2/2025

[Typescript] Client query/mutate has any type

So, apparently AppRouter type has all info about existent queries/mutations, but shows <any> for input and Promise<any> for output of query/mutation. How to fix it ?...

Solution:

My problem lies in my project's monorepo architecture and reexporting schemas within monorepo and then infering types with zod