tRPC

Join the tRPC server to ask questions!

tRPC

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

5/13/2025

Optimistic updates using tRPC 11 with TanStack React Query 5

I found a similar post in here but it didn't have info that helped so I'm making this one. I have a tRPC query + mutation setup in a single component that looks like this: ```ts const queryClient = useQueryClient();...

Solution:

I figured it out! I was confused by the name "variables" but I understand now that it holds the params passed into the mutation and gets updated immediately rather than waiting for the query to invalidate. I updated my useMutation line to look like this: ```ts const { mutate, variables } = useMutation(mutationOptions);...

Børge

5/11/2025

createHydrationHelpers

Can someone help me understand createHydrationHelpers, and what it exactly does? I'm also wondering, if it's still needed, in the new way of handling react query with tRPC. I saw a PR on the ct3a github, where they said that the legacy integration package is still necessary, for that specific function. Also that it could be remvoed once this https://github.com/vercel/next.js/discussions/60640 is resolved, but I don't think that's going to happen any time soon....

saj

5/11/2025

lazy loading does not work, but direct import works

minimal example: not working: ``` export const appRouter = router({...

Mr. Joker

5/10/2025

Incomplete imported router type

Hey, I know that everyone might be tired of such questions. But I think my case is slightly different. The thing is that when I import approuter type, I don't see type "any", I can see actual type, but incomplete one until it reaches query/mutation. Maybe someone could help me with that? My typescript version is ok. Editor is using the workspace typescript version. Trpc version is latest...

Børge

5/10/2025

Example Repo for NextJS App Router + React Query + tRPC

Is there any example repo of the title?

David 👾

5/10/2025

Bun & Hono websocket

Has anyone successfully made bun websocket work with trpc ws handler? I tried this but it doesn't work: ```ts import { applyWSSHandler } from '@trpc/server/adapters/ws';...

NotZelda

5/9/2025

Is there a typescript performance gain if I infer my router outputs once, and then export them?

You can infer your router outputs using RouterOutputs["router"]["procedure"]. Should I just use this directly on the objects I want to pass this type through, or should I declare these once in a RouterOutputs file, and export a named type? Potentially if the traversal of the RouterOutputs type helper is expensive typescript could cache this result easier with a named export. Im just not sure if this is a reality or best practice?...

Simon

5/9/2025

Throw Validation error inside the procedure?

Is there an easy way to throw a validation error programmatically from inside the procedure? I'm already pre-validating the input with a schema (Arktype) but then I need to add some additional validation to check uniqueness or other things with the DB or external API. What I'd like to do is being able to use something like this inside my procedure....

pes04

5/8/2025

Question about onError and modifying error messages in tRPC

I’m trying to follow the tRPC docs on error handling and want to log detailed errors on the server by throwing specific exceptions but send a generic message to the client (see https://trpc.io/docs/server/error-handling#handling-errors). I thought this would work: ``` onError: (opts) => {...

Solution:

You want the errorFormatter

dex

5/7/2025

tRPC does not have headers data when refreshing.

I'm using tanstack-start, tRPC and better-auth in my project and have it setup like this ```ts export async function createContext(opts: CreateNextContextOptions) { const session = await auth.api.getSession({ headers: opts.req.headers }); ...

dylan42432

5/6/2025

Unref() the websocket

Hello everyone, What I desire is to use a websocket link but not have TRPC hold the process open indefinitely, preventing my Node.js script from finishing (as is default when you have a websocket connection open). If you merely unref() the underlying socket then the process quits before the query/mutation finishes. The following is my working solution, but I'm wondering if there was a simpler/more elegant solution:...

GandalfTheMopy

5/5/2025

what is the format/type of data received in transformer.deserialize in httpBatchStreamLink?

trying to write a query normalizer to work together with react-query, and was hinted that i could use transformer to do it, but the format of data received in transformer.deserialize is puzzling, sometimes i receive an object, sometimes an array and sometimes nested array promises, plz help

Peform

5/3/2025

trpc caching procedure calls for queries in the same batch

Hello, I am using nextjs and trpc server components, using trpc to prefetch queries. All of the requests on this page are protected by a procedure called protectedGuildPermissionsProcedure which essentially checks that the user has the right permissions to access the data that is returned. ```ts await Promise.all([...

venego

5/3/2025

How do I fetch data conditionally?

Sorry if this is a stupid question. I know that there is the mutation queries to do some actions and queries for getting data. I need to get data conditionally, I don't need to get a certain data but only on some specific event, I don't know if there's an option for that like the useMutation and useQuery. I've tried fetch, but it seems like I don't use the right client configuration? ```ts...

gapped

5/1/2025

What is the type of the query resolver?

I need to accept queries in my function, like this one: const somt = t.task.admin.lessons What is the type of this somt variable? Imagine I am passing it as argument to some function, I need to know the type of the argument I should use....

mh15

4/29/2025

SSE issue with CORS and Fastify

Hello, I've followed the guidelines here (https://trpc.io/docs/server/subscriptions) but my useSubscription calls don't go through. Thoughts? ``` const server = fastify({ maxParamLength: 5000,...

Peform

4/28/2025

mutation taking a long time to appear after prefetching query

Hello, I'm am currently having an issue where if my isCaptchaValid endpoint errors (using throw new TRPCError(...)) the error message takes a long time to come through, it appears that it is linked to the endpoints execution time, as if I add some code to wait 2 seconds before executing it dramatically increases the time it takes for the error to come back. I am using nextjs loading.tsx which is how the loading animation works, so as soon as the loading animation is gone it means that TRPC data has finished fetching, so the error message should be appearing instantly?...

juan

4/27/2025

Server actions leaking .env

Ive got some router for generated presigned s3 urls. router: https://pastebin.com/zSQ4MRjK (its not meant to be a public procedure) I created an actions file like this:...

Yamakasinge

4/25/2025

When upgrading to v11, the AppRouter in .d.ts is any

Hello ! I just tried to upgrade from trpc v10 to trpc v11. I am on a monrepo, the the tRPC router type is built as part of a package. ...

adw

4/24/2025

Does batch streaming get counted as a single function invocation on Vercel?

I'm wondering if the batched http call gets counted as one on vercel?