TTC
Theo's Typesafe Cult•3w ago
vpjm

Passing generic inside tRPC query

Hi, I hope you're doing well. Server: 
findManyUser: publicProcedure.input(UserFindManyArgsSchema).
    query(<I extends Prisma.UserFindManyArgs<DefaultArgs>>({ input }: { input: I }) => {
      return prisma.user.findMany(input)
    })
findManyUser: publicProcedure.input(UserFindManyArgsSchema).
    query(<I extends Prisma.UserFindManyArgs<DefaultArgs>>({ input }: { input: I }) => {
      return prisma.user.findMany(input)
    })
Nextjs front: 
const users = trpc.findManyUser.useQuery({include:{image:true}  })
//users : UseTRPCQueryResult<PrismaResultForFindMany<DefaultArgs>, TRPCClientErrorLike<{ input: Prisma.UserFindManyArgs<DefaultArgs>; output: PrismaResultForFindMany<DefaultArgs>; transformer: true;errorShape: DefaultErrorShape;}>>
const users = trpc.findManyUser.useQuery({include:{image:true}  })
//users : UseTRPCQueryResult<PrismaResultForFindMany<DefaultArgs>, TRPCClientErrorLike<{ input: Prisma.UserFindManyArgs<DefaultArgs>; output: PrismaResultForFindMany<DefaultArgs>; transformer: true;errorShape: DefaultErrorShape;}>>
I would like to pass the type of my Prisma query ({ include: { image: true } }) to findManyUser, so users has the expected type and not the default type provided by Prisma (without generics : DefaultArgs ). Thanks for your help. Have a great day/night!
3 Replies
vpjm
vpjmOP•3w ago
Any help would be greatly appreciated. This is an issue I’ve encountered numerous difficulties and questions about on various forums, but I haven’t found a solution (or perhaps I’ve misunderstood some of the discussions) 🤍
Sean
Sean•3w ago
Hey, I’m not familiar with trpc but I do with react query. In your front, provide the types for the useQuery generics. If im not mistaken it receives 4 different types. Payload Type Error Type Response Type Another type I always forgets Should be something like useQuery<TPayload, unknown, TResponse>
vpjm
vpjmOP•3w ago
Hi, in tRPC, when using useQuery<...>, it works similarly to type casting. However, I can't deduce the Payload Type from the Response Type. So, to use it, I need to know the response type of the queryProcedure in advance. Thanks a lot for your answer, by the way! 🌟 
const query = {include:{image:true}  } as const
type asType = Awaited<ReturnType< typeof prisma.user.findMany<typeof query>>>
const users:UseTRPCQueryResult<asType,any> = trpc.findManyUser.useQuery<asType>(query)
const query = {include:{image:true}  } as const
type asType = Awaited<ReturnType< typeof prisma.user.findMany<typeof query>>>
const users:UseTRPCQueryResult<asType,any> = trpc.findManyUser.useQuery<asType>(query)
//useQuery type : 
export interface ProcedureUseQuery<TDef extends ResolverDef> {
  <TQueryFnData extends TDef['output'] = TDef['output'], TData = TQueryFnData>(
    input: TDef['input'] | SkipToken,
    opts: DefinedUseTRPCQueryOptions<
      TQueryFnData,
      TData,
      TRPCClientErrorLike<{
        errorShape: TDef['errorShape'];
        transformer: TDef['transformer'];
      }>,
      TDef['output']
    >,
  ): DefinedUseTRPCQueryResult<
    TData,
    TRPCClientErrorLike<{
      errorShape: TDef['errorShape'];
      transformer: TDef['transformer'];
    }>
  >;

  <TQueryFnData extends TDef['output'] = TDef['output'], TData = TQueryFnData>(
    input: TDef['input'] | SkipToken,
    opts?: UseTRPCQueryOptions<
      TQueryFnData,
      TData,
      TRPCClientErrorLike<TDef>,
      TDef['output']
    >,
  ): UseTRPCQueryResult<TData, TRPCClientErrorLike<TDef>>;
}
//useQuery type : 
export interface ProcedureUseQuery<TDef extends ResolverDef> {
  <TQueryFnData extends TDef['output'] = TDef['output'], TData = TQueryFnData>(
    input: TDef['input'] | SkipToken,
    opts: DefinedUseTRPCQueryOptions<
      TQueryFnData,
      TData,
      TRPCClientErrorLike<{
        errorShape: TDef['errorShape'];
        transformer: TDef['transformer'];
      }>,
      TDef['output']
    >,
  ): DefinedUseTRPCQueryResult<
    TData,
    TRPCClientErrorLike<{
      errorShape: TDef['errorShape'];
      transformer: TDef['transformer'];
    }>
  >;

  <TQueryFnData extends TDef['output'] = TDef['output'], TData = TQueryFnData>(
    input: TDef['input'] | SkipToken,
    opts?: UseTRPCQueryOptions<
      TQueryFnData,
      TData,
      TRPCClientErrorLike<TDef>,
      TDef['output']
    >,
  ): UseTRPCQueryResult<TData, TRPCClientErrorLike<TDef>>;
}
it seems to be unfeasible: https://github.com/trpc/trpc/discussions/2150. If anyone has an idea on how to properly use the cast with useQuery, feel free to share 👍

Did you find this page helpful?