tRPC

T

tRPC

Move Fast & Break Nothing. End-to-end typesafe APIs made easy.

Join

How to infer query types on client?

```ts export const tenantRouter = router({ getTenants: procedure.query(() => { return { hello: "world" }; }),...

NextJS Output Typings

Quick question probably stupid, I learned about this library yesterday and completely migrated from Redux. However I noticed the types were a bit weird? Maybe it's intended but I can't find any documentation. When returning fetched documents using a Mongoose model, the correct output type is displayed on the router. However when doing the .useQuery() it says the result is unknown. (Images Attached) Another problem I face is related to a potential solution I found to this problem, by casting a type to the response it fixes the empty object type. But now the types complex values get converted to string, which I see why this would happen because data is transmitted through JSON. Is there a Generic or some type I'm missing so I can correctly type function parameters?...
Solution:
Solution: Follow This Guide: https://trpc.io/docs/server/data-transformers Although the Client <--> Server data works just fine, a transformer is needed for correct typings... For some reason. ...
No description

'react-server-dom-webpack/client' error

Hey, i am trying to get started with TRPC but getting this error ```shell ../../nodemodules/.pnpm/next@14.0.4@babel+core@7.23.7_@opentelemetry+api@1.7.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/router-reducer/fetch-server-response.js Module not found: Can't resolve 'react-server-dom-webpack/client'...

React Query client errors on 401

I'm throwing a TRPCError({ code: "UNAUTHORIZED" }) in a middleware, and handling error states returned from useQuery. However, each time I return a 401 with the TRPCError I get the following client error from the tRPC client. Why does it do this? It messes up my React as well (see the second error). I thought you were supposed to throw TRPCErrors? (Note: also using Tanstack Router, and running on Vinxi so it's all kinda experimental, do tell if that's what could be causing it.)
No description

Extremely slow queries

I'm having elapsed time of 2 to 5 seconds and I just switched from mongo to postgres. Is it the DB location? I'm hosting this app on render and using their postgres DB also takes really long. Supabase takes about the same time, any clue??
No description

TRPC works but getting unpredictable Typescript warnings for a barebones trpc monorepo project

Hi, TRPC is working as expected but there are many warnings that feels very "off" for simple procedures. For example (included in the screenshots), procedures that just returns a static result have warnings. Also, setting up transformer with superjson has warnings. ...
No description

Kirimase's tRPC usage CRUD route

Hey, using Nico's Kirimase tRPC package. I am trying to call the queries and mutations, in the db/schema/posts it has the 'to use' CRUD functions, but how do I use these in my postsRouter as for example: /api/trpc/posts.create and /api/trpc/posts.id/1? I have been seeing some createCaller online, and haven't been able to use this with my values from my form. Thank you in advance!...
No description

Client `tsc` checking server code

I have a trpc server and vite/react client set up in a pnpm monorepo. The VSCode type checking is behaving fine, but running tsc to build the Vite app starts trying to apply the client's typescript rules to the server's code. Is this a known issue, and is there a decent solution to this? If not, I can provide a simple repo which reproduces the issue.

Unable to set up a client side subscription to a trpc route that supports websockets

I wrote the code on the client side here to query the subscription: https://github.com/sumanthneerumalla/ttt/blob/bb0474b64cd463a3aaa6a2230598a683ee5b4687/tic-tac-toe/src/pages/index.tsx#L47-L51 and this is the matching backend code that should give the right data back: https://github.com/sumanthneerumalla/ttt/blob/bb0474b64cd463a3aaa6a2230598a683ee5b4687/tic-tac-toe/src/server/api/routers/post.ts#L70-L83 I tried following the directions on this blog post here:...
Solution:
I have been able to fix this issue by using a function to return the correct link in the links array. It seems that the links are something that are mainly evaluated on the client side, and wsLink as well as httpBatchLink are "terminating links" which means that we cannot consecutively put a wslink after a httpBatchLink or vice versa. I borrowed a code snippet from this example project which returns the right link based on the browser having a window. ...
No description

what's this union type doing(Zod)?

I have 2 types of user, guest and registered(schemas). I have a union type with both and the guest doesn't include the "admin" field. I expect Zod to pick one of the 2 schemas but when I do user.admin it just doesn't exist. What is this union doing then?? I'm very confused....

trpc's useQuery with undefined input adds extra {"values":["undefined"]} to query

My React app has several calls to query endpoints that have no input data but that do need useQuery params: ``` const result = trpc.onboarding.activationSteps.useQuery(undefined, { cacheTime: ms("10m"),...

Can you ensureData without the useUtils hook?

The Tanstack Router docs recommend calling ensureQueryData in a route’s loader function if using Tanstack Query: https://tanstack.com/router/v1/docs/guide/external-data-loading#a-more-realistic-example-using-tanstack-query As far as I can tell, ensureQueryData is only available through the trpc useUtils hook in a component. Can I get it, or the full query options, some other way?...
Solution:
I had the same problem so in v11 there's createQueryUtils which allows you to do it without the hook

Help with queries vs mutations

super basic question here from a newb to trpc...i see the calls are basically split into two type, queries and mutations. If I were to build a simple chat app, would posting a comment be a mutation? What if the data was ephemeral, like, I wasn't storing it, just passing it. Or if I was sending a parameter to the server and the server just used that parameter to look upo data from a third party service and return the results...that is still just a query, right? Even if the client was storing...

Interceptor in server

How can I make an interceptor to get all the results before they are sent to the client, can I do this with trpc?

Can't do server side data fetching with RSC.

Whenever I try to use a proxy client to fetch data in a React Server Component with Nextjs14, I get an error error: TRPCClientError: Unexpected token < in JSON at position 0 Likely trpc is returning HTML though I don't know why. Now if instead of fetching with a RSC, I trigger the data fetching via a "server action" I get the following error ``` TRPCClientError: fetch failed at TRPCClientError.from (webpack-internal:///(rsc)/../../nodemodules/.pnpm/@trpc+client@10.45.0@trpc+server@10.45.0/node_modules/@trpc/client/dist/TRPCClientError-38f9a32a.mjs:43:16)...

v10, passing useQuery options, queryKey mandatory?

I have a simple query like this ```javascript const me = api.user.me.useQuery(undefined, { enabled: true, })...
Solution:
hm, anyways it seems to work now, maybe a restart of VS code. I will close as solved

tRPC, NextJS 14, createTRPCProxyClient, How can I globally manage errors?

I want to be able to redirect a user when they become unauthenticated. Someone else mentioned to create some NextJS middleware which makes an api call for the user but then that will make an extra API call for every tRPC request. It feels like there should be someway I can centrally manage errors where if tRPC returns an 'UNAUTHORIZED' error for any procedure I can do a redirect to '/login' I have a monorepo with everything together but the apps will be deployed separately eventually....

next 14 setup error

i got this type error after setting up trpc in next 14.0.4 Property 'createClient' does not exist on type '"The property 'useContext' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'useUtils' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'Provider' in your router collides with a built-in ...'. Property 'createClient' does not exist on type '"The property 'useContext' in your router collides with a built-in method, rename this router or procedure on your backend."'.ts(2339) Loading......

No typesafety after migrating to 11?

Not sure what happened when upgrading from 10 to 11. tried deleting node modules and lock file and reinstalling. I'm using the AWS adapter I notice the .create() is typed as any, and therefore t is any...
No description

is there a way to send a streaming response

I'm not talking about batching multiple requests, but more of a one-way websocket-like channel between the server and client using HTTP streaming.