tRPC

T

tRPC

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

Join

pre fetch serveral prodecures dynamically

Hello!. I'm developing a React Native app which needs an offline mode for some assets that the user wants (like spotify albums or playlists). I have an endpoint that tells me which assets to download and for which procedures, so I can rehydrate those react query procedures in Offline Mode. The feature is working but I had to @ts-ignore, I'm trying to annotate this feature correctly. ...

procedure input context

Is it possible to accesss context in trpc procedure input validation? I have an aray of values in the trpc context and would like to make a procedure input schema to transform on those values to allow these as the input. Im using zod for input schema...

Is it normal to separate resolvers from routers?

Wondering if it's common and/or whether it's a good idea to attempt to separate procedures from the routers... I know there' a lot of extra explicit typing required with separation and wasn't sure what other people are doing

i have an infinite loop within my hook but apps works as expected.

when i console log inside this hook, it repeats non-stop every few seconds, but my app is working as expected there is no infinite loop per say. i'm really confused with this one. ```js import zustand from ... ...

trpc query running twice

Hey guys. I have a trpc endpoint which makes a request to the discord api to fetch a list of the users guilds. ```ts getGuilds: publicProcedure .input(z.object({ accessToken: z.string().nullish() })) .query(async (ctx) => {...

tRPC Call To Server

On the mobile version of my app, in NextJS, the build has to be static so I have to use my hosted web version ass the server url, but when it makes requests it says stuff like no query procedure found, whereas in the web version the request works just fine, I think it's because the static version of the app doesn't request with any cookies. How can I solve this?

Get count of stages assigned to user with stage name?

Need help in writing prisma query to get stages assigned to user with stage name? this is the scheme eg model User { id ...

TRPC global loading page

Hey. With trpc/nextjs I'm wondering if its possible to have a global loading context/state which is used across my whole app, whenever a TRPC endpoint .isFetched property is false, it will display a "loading" symbol. Currently I have to do something like this on every page: ```tsx...

Multiple Clients/Services In tRPC Context

I know it's typical to pass around the prisma client in the trpc context, is the same true for other services/clients as well? IE a twilio or sendgrid client

Use middleware to send response

Hello, how can I send a response from the middleware without executing the input, such as making a cache middleware?

dynamic router creation

has anyone been able to create a dynamic router? e.g. i pass in the schema and some metadata and it produces the same routes but they are selected down to the metadata? my use case is i want to have crud against a set of tables... so i create a zod schema for each entity and want to create a router that does list, get, create, update, and delete, but for that one table, then i create one of each of these one per table... with what i've written, i'm getting the dreaded ts(2742) error.... The inferred type of 'routerForTable' cannot be named without a reference to '../../node_modules/@trpc/server/dist/core/parser.js'. This is likely not portable. A type annotation is necessary...

Type issue react query with enabled.

We migrate to trpc and using @tanstack/react-query directly to the trpc syntax of trpc.procedureName.useQuery(). Previously TypeScript understood that if an input like { id: string } to the useQuery was possibly null or undefined (because it comes from useParams() react-router hook for example) and the option on the useQuery was set to { enabled: !!id } that by the time the call was made id would indeed be a string. Now that we migrated to using trpc TS errors out and expects us to do sill...

TRPCClientError: Unexpected end of JSON input

Hey I am running into this issue when calling a mutateAsync in production in Vercel (the error does not appear in localhost dev mode).
TRPCClientError: Unexpected end of JSON input
My code base is so large that I am not sure where do I start to debug. Are there any best practices that I should follow to avoid this error?...

Does useSuspenseQuery trigger suspense on just initial load or whenever it's fetching data?

What I'm looking for: I'd like to show the suspense whenever it's fetching data.

Audit logging middleware?

I’m required for regulatory reasons to log all actions that are taken in my application for auditing and if they were successful or not. Imagine - user successfully updated a resource, user viewed <x> resource. Is there a best practice to implementing such behaviour with tRPC? I was originally thinking about a middleware but it would need to know if the action was successful post request. Thanks all....

All vanilla client queries fail with 500. Setup problem?

I'm using NextJS but using the vanilla client to integrate trpc calls into my custom hooks. But, even when using the NextJS queries, they also fail with a 500. I am completely stuck with my project until I can get this resolved. Any help is greatly appreciated. The call requires no input so I have tried it two different ways. When the router's .input is omitted the request URL is /api/trpc/generateRandomWorker?batch=1&input={"0":{"json":null,"meta":{"values":["undefined"]}}} and returns a 500....

Is it ok to use a createCaller() router within ServerSideProps?

The official trpc docs shown an example of how to use the SSGHelper router within SSPs. The procedure I wanna use needs the session object within the context. This procedure is shared by the public API trpc router thus I wouldn't want to create a different procedure that will do the same but taking the session information from someplace else. I was able to create a server side only router with createCaller and tne innerContext as suggested and it is working perfectly inside SSPs. Is there any CAVEAT regarding using this type of reouter instead the SSG provided. I do understand that I won't be able to prefetch and hydrate the page, but apart from that, is there anything that I should be aware of. ...

tRPC Cors Authentication Error

Hey, I was mainly looking to enable CORS locally for calling my tRPC endpoints in localhost:3000 (NextJS) from localhost:6006 (Storybook) I followed this doc https://trpc.io/docs/cors and this section of the advanced usage to enable cors https://trpc.io/docs/api-handler#advanced-usage but I'm getting the following error CORS No Allow Credentials - Removing the credentials: include fixes this https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials however then I'm unable to use authenticated endpoints What I'm looking to do is call my authed endpoints on localhost:3000 from localhost:6000, has anyone had experience with this?...

Demo code `trpc.infinitePosts.add` on infinitedQuery not working

Doc here: https://trpc.io/docs/useInfiniteQuery#getinfinitedata, I created an my query like this: ``` infinitePosts: protectedProcedure .input( z.object({...

NextJS + TRPC + NX

i have a nextjs application inside a NX monorepo. i have everything for @trpc/server inside a node library. i have moved the utils file inside the SRC folder in the next js project. this way, i have node lib which does all for routing an backend logic. i have another lib for ui. this lib exports dumb ui components. suppose i wanted to move the trpc utils file to one of my libraries so as to be able to fetch data inside the "dumb components", could i do this and is this correct? right now, im forced to prop drill because applications cant share code in NX. only libs can. anyone have a pattern for either creating smart components inside NX libs or a pattern for providing context?...