GBianchi
GBianchi5mo ago

How do I pass a Generic to a trpc query procedure?

I want to to something like this:
type AppIdsWithConfig = typeof kodixCareAppId | typeof calendarAppId;

const fakeProcedure = <T extends AppIdsWithConfig>(kodixAppId: T) => {
const appIdToValue = {
[kodixCareAppId]: "my value 1",
[calendarAppId]: 1235,
} as const;

return appIdToValue[kodixAppId];
};

const value = fakeProcedure(kodixCareAppId);
// ^? --> const value: "my value 1"

const value2 = fakeProcedure(calendarAppId);
// ^? --> const value2: 1235
type AppIdsWithConfig = typeof kodixCareAppId | typeof calendarAppId;

const fakeProcedure = <T extends AppIdsWithConfig>(kodixAppId: T) => {
const appIdToValue = {
[kodixCareAppId]: "my value 1",
[calendarAppId]: 1235,
} as const;

return appIdToValue[kodixAppId];
};

const value = fakeProcedure(kodixCareAppId);
// ^? --> const value: "my value 1"

const value2 = fakeProcedure(calendarAppId);
// ^? --> const value2: 1235
This is how you pass a generic to a function, as we know. I wanted to do it in a procedure. Right now I have a procedure:
type AppIdsWithConfig = typeof kodixCareAppId | typeof calendarAppId;

//How do I pass a Generic to this? I want to infer the result type based on the appId I pass in as an input
getConfig: protectedProcedure
.input(
z.object({
appId: z.custom<AppIdsWithConfig>(),
}),
)
.query(
async ({ ctx, input }) =>
await getAppConfig({
appId: input.appId,
prisma: ctx.prisma,
session: ctx.session,
}),
),
type AppIdsWithConfig = typeof kodixCareAppId | typeof calendarAppId;

//How do I pass a Generic to this? I want to infer the result type based on the appId I pass in as an input
getConfig: protectedProcedure
.input(
z.object({
appId: z.custom<AppIdsWithConfig>(),
}),
)
.query(
async ({ ctx, input }) =>
await getAppConfig({
appId: input.appId,
prisma: ctx.prisma,
session: ctx.session,
}),
),
Solution:
Alternatively you can use a Zod Union type on the input
Jump to solution
3 Replies
Nick
Nick5mo ago
You’re usually best to go with a Router Factory for this type of situation, so you produce two separate routers but with a different Parser provided and the types get inferred nicely
Nick
Nick5mo ago
DEV Community
tRPC & React Patterns: Router Factories
This post comes in 2 halves: tRPC Router Factories Consuming Router Factories in a React...
Solution
Nick
Nick5mo ago
Alternatively you can use a Zod Union type on the input
More Posts
Is there something to be done about trpc errors and solidjs/seroval?Basically if you `throw error` in trpc route, solidjs seroval fails to serialize it during SSR. I doHow can i createCaller from a NextJs App Router if my server uses express tRPC adapter?I'm using the express adapter for the server side of tRPC, and the client is a NextJS AppRouter app.Is there a way to refetch a query with new parameters?Hi I'm using tRPC in a Next.js app and I have a button that a user can click to get the latest dataIs there any benefit to putting the db connection in the context versus having it as an global var?Can I do this? ```ts export const challengesRouter = router({ getChallengeById: privateProcedure Controller is already closed crashIm using trpc with nextjs 14 app router and started to see that my app crashes due to such error. DiThis page needs to bail out of prerendering at this point because it used revalidate: 0I've been testing out partial prerendering with next using tRPC but having some issues. Everytime How to infer query types on client?```ts export const tenantRouter = router({ getTenants: procedure.query(() => { return { hello:NextJS Output TypingsQuick question probably stupid, I learned about this library yesterday and completely migrated from 'react-server-dom-webpack/client' errorHey, i am trying to get started with TRPC but getting this error ```shell ../../node_modules/.pnpm/React Query client errors on 401I'm throwing a `TRPCError({ code: "UNAUTHORIZED" })` in a middleware, and handling error states retu