tRPC

T

tRPC

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

Join

TRPCError: Unsupported GET-request to mutation procedure at path

Hi, since I upgraded to TRPC v11 and React Query v5 with the classic integration, I suddenly get lots of errors like these: TRPCError: Unsupported GET-request to mutation procedure at path "app.trackMetric" ...

Context and TanStack

I am having trouble creating the appropriate context with the tanstack query client. The documentation says to use a type that asks for a NextApiResponse but all I can get is a plain NextResponse. Is there something I'm missing?

TRPC 11 Classic React Query custom hook

This is how I was able to refactor one of the custom hooks I had before, typescript threw an error ofc. old approach ```export const useGlassDiameters = < T extends DecoratedQuery<{...

signup/signin

I'm using theo's t3 stack and i'm wondering about user authentication. When signing in or up users, should i prefer nextjs's server actions or trpc ?...

Pre-rendering Error with TRPC useSuspenseQuery – "fetch failed" During Build

Summary During the build process, the application attempts to pre-render the page containing the Greeting component. Since the component uses useSuspenseQuery to call a TRPC endpoint, pre-rendering triggers the call and results in a "fetch failed" error because the route isn’t available during build time. Known workarounds—switching to useQuery or using prefetch on the page component—prevent the error; however, these solutions are not acceptable in this case. Code Samples...

Throwing error in trpc route, continuously sending a request

I tried to change to protectedProcedure on hello router to see if the Suspense and ErrorBoundary is working. As you can see on my network tab I already have a thousands request, I followed the Tanstack React Query/Server Components . And for the other screenshot that I provided, those are the only changes I made....
No description

Error using prefetch query with TanStack Query

When trying to prefetch data with TanStack Query it fails with the following:
A query that was dehydrated as pending ended up rejecting. [[["tradeList"],{"type":"query"}]]: TypeError: (0 , __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$next$40$15$2e$3$2e$0_react$2d$dom$40$19$2e$1$2e$0_react$40$19$2e$1$2e$0_$5f$react$40$19$2e$1$2e$0$2f$node_modules$2f$next$2f$dist$2f$server$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__.createContext) is not a function; The error will be redacted in production builds
⨯ [Error: redacted] { digest: '2062921512' }
A query that was dehydrated as pending ended up rejecting. [[["tradeList"],{"type":"query"}]]: TypeError: (0 , __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$next$40$15$2e$3$2e$0_react$2d$dom$40$19$2e$1$2e$0_react$40$19$2e$1$2e$0_$5f$react$40$19$2e$1$2e$0$2f$node_modules$2f$next$2f$dist$2f$server$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__.createContext) is not a function; The error will be redacted in production builds
⨯ [Error: redacted] { digest: '2062921512' }
...

CreateCaller for router with AWS Adapters

Hey - I'm trying to make a create caller. But I'm unsure how I am supposed to pass the correct context information into the create caller. Seemingly no matter what I try it to pass into the createCaller() - it gives me a long error :/...
No description

Wrong type for results

I have a query that has a couple fields with the Date type, however when queried with TanStack they are being returned as string. Is there a way to cast them to Date again?
Solution:
Afaik you need to use a transformer https://trpc.io/docs/server/data-transformers...

Query invalidation per mutation-key

I just learned about query invalidation using the classic implementation, and that it provides an option to invalidate all queries on every mutation (https://trpc.io/docs/client/react/useUtils#invalidate-full-cache-on-every-mutation). I haven't followed up on the possibilities the new TanStack React Query provides, but I was just about asking whether it's possible to also get the key of the mutation in the general function. I would like to have some central place, where I register that every mutation on key X should invalidate query Y and Z. I would like to skip having to remember this every time I write a mutation, but I still want to be more specific that just reloading everything on a mutation. Hope my request is understandable 😅 I'm myself just getting warm with this lib, but I like it a lot already ♥️...

Blob as response tRPC v.11

Hi! According to https://trpc.io/blog/announcing-trpc-v11#formdata--non-json-content-types-support it should now be possible to return blobs. How? I have not been able to make it work and i have not found any blob response examples. Of note is that we are also using the express adapter from @trpc/server/adapters/express Thanks!...

How can I access the session in fastify when using `useWSS: true`?

I've got a fastify/trpc application that looks something like this: ```typescript await using app = Fastify({ loggerInstance: logger,...
Solution:
Hi @Mr. Joker, I ended up writing my solution up on my blog, you can read that here: https://jonathan-frere.com/posts/trpc-fastify-websockets/ Specifically, the solution I found was this: ```typescript...

TRPC giving 502 errors with jsonl header

I'm encountering a 502 Bad Gateway error when making a GET request to my tRPC endpoint in a production environment. This only happens when using the trpc-accept: application/jsonl header. Environment Runtime: bun Deployment Stack: docker → nginx → cloudflare...

Benefits of trpc in tan stack

Hi all! New to trpc and was just starting using tanstack start for the first time. Was curious for those who have a bit more experience with trpc, is there any specific reason you would use it in a tanstack start app? From the start docs Tanner mentions being heavily inspired by trpc, it seems like a lot of the benefits of trpc that you get in say next, are covered by starts integration between server functions & tanstack query. ...

tRPC in a “monorepo” (server / client folders in same repo)

So i happen to have a monorepo project in a sense that it has 2 folders (server / client) in the same repo. No workspaces, no package json or tsconfig in root. Trying to setup trpc, but client tsc throws server errors, my guess is because path aliases configured in both folders tsconfig. Is there a way to setup trpc in this case, or i need to look into converting the project into a valid monorepo?...

Exposing server-side caller and tRPC caller/helper through the same export?

Hey there 👋 I'm wondering if anyone thinks it could be unwise to expose the server-side caller and the tRPC caller through the same export. ```ts // server.ts import "server-only";...

useInfiniteQuery with Tanstack Query V5

Hi all, Is there a example for useInfiniteQuery with Tanstack Query V5?...

Long Running AI Function

Hello! I have a long running function 30-40s, and 50s worst case. Its doing some AI magic. I keep getting Unable to transform response from server or stream close (httpBatchStream) when trying to execute the function. Its just a long running function, I do not need it to be streaming, just a bit longer running. Is there a way I can increase the length of which the stream closes on one TRPC mutation endpoint? Or is there some other workaround here I am not seeing?...

Cloudflare Page tRPC route

I successfully deploy on cloudflare page but however i can't access tRPC route. i'm getting error 500. are there proper setup for open-next for tRPC to work? ``` Connected to asdsad, waiting for logs... GET https://asdsadsad.workers.dev/api/trpc/public.publicProduct.getProductCategories,public.publicProduct.getFeatured?batch=1&input=%7B%220%22%3A%7B%22json%22%3Anull%2C%22meta%22%3A%7B%22values%22%3A%5B%22undefined%22%5D%7D%7D%2C%221%22%3A%7B%22json%22%3A%7B%22limit%22%3A3%7D%7D%7D - Ok @ 03/04/2025, 8:53:12 pm...
Solution:
turns out we prisma doesn't fully support Edge runtime. brb switching to drizzle. https://www.reddit.com/r/nextjs/comments/1jornyu/how_to_properly_connect_a_nextjs_to_a_database/

can i send data from client to server in subscriptions

Hi, as in the topic, is it possible to do bidirectional websockets transmission, i am trying to build a chat and cannot figure out how to send messages from my nextjs frontend using wsLink to trpc standalone backend (not in nextjs api routes). Many thanks