T
tRPC

How does trpc typing work

How does trpc typing work

MAMohammed Anas11/18/2023
I'm curious to know how trpc generates type without a code gen step , i am trying to acheive something like this
export class API {
private schema:z.ZodSchema = z.undefined()
input<T>(inp:z.ZodSchema<T>){
this.schema = inp
return this
}
get(input:z.infer<typeof this.schema>){
console.log(("ok"));
}
}
const api = new API()
api.input(z.object({
name:z.string()
}))

// I need a way to typically extract this {name:string} type without a codegen step
export class API {
private schema:z.ZodSchema = z.undefined()
input<T>(inp:z.ZodSchema<T>){
this.schema = inp
return this
}
get(input:z.infer<typeof this.schema>){
console.log(("ok"));
}
}
const api = new API()
api.input(z.object({
name:z.string()
}))

// I need a way to typically extract this {name:string} type without a codegen step
My approach might be wrong, i'm trying to build something similar . Any help is appreciated Later on whenever i try to invoke a method similar to mutate , i need the typing of the input to be in available in the parameter of the mutate method .
LLittleLily11/18/2023
You need the class itself to have a generic arg And you probably want to use method chaining like trpc does, which means instead of setting a property on a class, you have a method which returns a new class instance containing the functions that can be called from that point (I prefer implementing that without classes at all and just returning objects with functions inside them) Something like this:
const api = () => ({
input: <T extends ZodTypeAny>(inputSchema: T) => ({
mutate: <U>(mutateFn: (data: z.infer<T>) => U) =>
(data: unknown) =>
mutateFn(inputSchema.parse(data))
})
})

// Create and use the api
const numberApi = api().input(z.number().min(1).max(10)).mutate(data => `Hello ${data}`)
const x = numberApi(9) // returns "Hello 9"
const y = numberApi(100) // throws Zod validation error since schema had max(10)
const api = () => ({
input: <T extends ZodTypeAny>(inputSchema: T) => ({
mutate: <U>(mutateFn: (data: z.infer<T>) => U) =>
(data: unknown) =>
mutateFn(inputSchema.parse(data))
})
})

// Create and use the api
const numberApi = api().input(z.number().min(1).max(10)).mutate(data => `Hello ${data}`)
const x = numberApi(9) // returns "Hello 9"
const y = numberApi(100) // throws Zod validation error since schema had max(10)
The benefit of having a nested structure like that is the inner functions have easy access to all the generic types and variables/args from the outer functions
MAMohammed Anas11/18/2023
will give that a try .

Looking for more? Join the community!

T
tRPC

How does trpc typing work

Join Server
Recommended Posts
tRPC with app routerHi, where I can find basic and simple code for trpc for next.js app router?Globally handle specific Error type on backendHi, i have a lot of code that's used for both backend and frontend. That's why i'm not throwing TRPCHow to use token in headers() ?in `_app.tsx` i have this ```import React from 'react'; import { trpcApi, trpcApiClientProvider } fCreating inner context for AWS Lambda Context OptionsHi All, I have been using tRPC for many routes, and I have started to realize I need to call certaiRetry even when disabledI'm not positive if this is a tRPC question or Tanstack.... but I have my query disabled per TanstacMiddleware or request lifecycle hook to run after procedure?Hi, I am using trpc context to create a database client for an incoming request. My understanding iUse RxJS Observable for subscription procedureOn the server, I have an RxJS Observable that I'd like to use for one of my subscription procedures.Individual mutation requests errorHello, quick question regarding the error handling for tRPC So I'm creating kind of a chatroom wherTRPCClientError: fetch failed, using Node 18 in DockerI have both my app and my tRPC server running in Docker via the following docker-compose config: ("nNeed help how to send headers in trpcproject is setup with express on 2 parts,cleint and server i have this pice of cod in client side ``"fetch failed" when buildingHi, we are running into an issue where building our production next app causes "fetch failed" errorsanyone has an example of SSR with React query working without Next js?Can't find a working exampleLooking for an up to date boilerplate for tRPC & Fastify.Looking for an up to date boilerplate for tRPC & Fastify.Can You Provide Guidance on Implementing RBAC and Share GitHub Examples?I am currently exploring the implementation of Role-Based Access Control (RBAC) and am seeking your `useQuery` not working?is it just me or does `useQuery` not work in my next js components? i try to call it and it says cliServer Component Call to TRPC on express backendI have following structure: - Nextjs App folder with both client components and server components -