tRPC

T

tRPC

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

Join

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?...

Transform Errors

I get really lazy with my prisma try / catch and was wondering the best place to handle those errors and make them more generic for the front end. I've looked at both https://trpc.io/docs/error-formatting and https://trpc.io/docs/error-handling, but not super sure which one it would be handled in. Basically I just want to check if it's a prisma error, change it to a generic error, and change the message so the users won't know a unique key lookup failed for example...

Global context or shared context.

We are using react query and trpc and we ran into a undesired effect I hope someone could help me with. We have a monorepo with 20+ frontend applications (all in react/ts). Some of those apps/utilities export components that are used in other apps. Each utility/app has its own trpc server middleware for providing data to our components. Every app is wrapped in a trpc.provider and query Provider. So if we want to use a component from utility A requesting data from server A in app B we wrap that c...

Not sure how to troubleshoot `Failed to fetch at Function.from`

Am getting this on a trpc mutation in v.9 that is firing successfully then pushing me to the URL with the input params? Can add more details shortly. In Next + React

the tRPC loop or cycle

what is the full sequesnce of execution of trpc? where does it start when a user requests something and where does it end? i would like to remove services from IoC after execution is complete.

tRPC context and NextJS

Guys quick question about using trpc and nextjs. I'm using context with trpc to create some queries that will be only accessible by logged in users. On nextjs side I'm using react context to manage it for now. So my thinking was to pass one of the ctx variable that will be user ID to trpc server when I use useQuery. Ex) trpc.user.getSecret.useQuery(undefined, {req.body}). But I'm honestly stuck on how I can send next request body. Code for trpc context is this. ``` export const createContext = async (opts: CreateNextContextOptions) => {   // console.log(opts.req, "inside trpc context");   async function getUser() { ...

Is it possible to create a generic router to pass a type on?

Hi, I was wondering if it is possible to create a generic router to pass a type which is expected to return