Can I pass generics to TRPC procedure calls?

N

Nick•2/19/23, 8:10 AM

A trpc procedure should be concrete, it should know the type of T already. You have other options though

N

Nick•2/19/23, 8:12 AM

First option, set the input and output up with tableName up as a literal union, and use a discriminated union to change the response type based on the input

N

Nick•2/19/23, 8:13 AM

Second option, move this procedure into a router factory, and create the router on as many single-entity routes as you like with relevant configuration/generic passed in

NNick Second option, move this procedure into a router factory, and create the router ...

E

epicmau5time•2/19/23, 10:48 PM

I am really having a hard time following the factory method from the docs. Tried a couple different ways but I cannot figure it out

N

Nick•2/19/23, 11:00 PM

It's just

function factory() {
  return t.router({
    // your procedure
  })
}

function factory() {
  return t.router({
    // your procedure
  })
}

function factory() {
  return t.router({
    // your procedure
  })
}

function factory() {
  return t.router({
    // your procedure
  })
}

N

Nick•2/19/23, 11:00 PM

That's the whole pattern, everything else is stuff you add in

E

epicmau5time•2/19/23, 11:00 PM

So if I have 10 routes, I need to do that for all 10?

N

Nick•2/19/23, 11:01 PM

10 routes or 10 procedures in that router?

E

epicmau5time•2/19/23, 11:05 PM

const routeOne = router({
      getList: t.procedure.input(schema).query(async ()=>({
        return await prisma.routeOne.findMany({})
      }),
      getItem: t.procedure.input(schema).query(async ()=>({
        return await prisma.routeOne.findFirst({})
      }),
      /* some more similary named procedures*/
   })

const routeTwo = router({
      getList: t.procedure.input(schema).query(async ()=>({
        return await prisma.routeTwo.findMany({})
      }),
      getItem: t.procedure.input(schema).query(async ()=>({
        return await prisma.routeTwo.findFirst({})
      }),
      /* some more similary named procedures*/
   })

const routeThree = router({
      getList: t.procedure.input(schema).query(async ()=>({
        return await prisma.routeThree.findMany({})
      }),
      getItem: t.procedure.input(schema).query(async ()=>({
        return await prisma.routeThree.findFirst({})
      }),
      /* some more similary named procedures*/
   })

/* etc */

const routeOne = router({
      getList: t.procedure.input(schema).query(async ()=>({
        return await prisma.routeOne.findMany({})
      }),
      getItem: t.procedure.input(schema).query(async ()=>({
        return await prisma.routeOne.findFirst({})
      }),
      /* some more similary named procedures*/
   })

const routeTwo = router({
      getList: t.procedure.input(schema).query(async ()=>({
        return await prisma.routeTwo.findMany({})
      }),
      getItem: t.procedure.input(schema).query(async ()=>({
        return await prisma.routeTwo.findFirst({})
      }),
      /* some more similary named procedures*/
   })

const routeThree = router({
      getList: t.procedure.input(schema).query(async ()=>({
        return await prisma.routeThree.findMany({})
      }),
      getItem: t.procedure.input(schema).query(async ()=>({
        return await prisma.routeThree.findFirst({})
      }),
      /* some more similary named procedures*/
   })

/* etc */

const routeOne = router({
      getList: t.procedure.input(schema).query(async ()=>({
        return await prisma.routeOne.findMany({})
      }),
      getItem: t.procedure.input(schema).query(async ()=>({
        return await prisma.routeOne.findFirst({})
      }),
      /* some more similary named procedures*/
   })

const routeTwo = router({
      getList: t.procedure.input(schema).query(async ()=>({
        return await prisma.routeTwo.findMany({})
      }),
      getItem: t.procedure.input(schema).query(async ()=>({
        return await prisma.routeTwo.findFirst({})
      }),
      /* some more similary named procedures*/
   })

const routeThree = router({
      getList: t.procedure.input(schema).query(async ()=>({
        return await prisma.routeThree.findMany({})
      }),
      getItem: t.procedure.input(schema).query(async ()=>({
        return await prisma.routeThree.findFirst({})
      }),
      /* some more similary named procedures*/
   })

/* etc */

const routeOne = router({
      getList: t.procedure.input(schema).query(async ()=>({
        return await prisma.routeOne.findMany({})
      }),
      getItem: t.procedure.input(schema).query(async ()=>({
        return await prisma.routeOne.findFirst({})
      }),
      /* some more similary named procedures*/
   })

const routeTwo = router({
      getList: t.procedure.input(schema).query(async ()=>({
        return await prisma.routeTwo.findMany({})
      }),
      getItem: t.procedure.input(schema).query(async ()=>({
        return await prisma.routeTwo.findFirst({})
      }),
      /* some more similary named procedures*/
   })

const routeThree = router({
      getList: t.procedure.input(schema).query(async ()=>({
        return await prisma.routeThree.findMany({})
      }),
      getItem: t.procedure.input(schema).query(async ()=>({
        return await prisma.routeThree.findFirst({})
      }),
      /* some more similary named procedures*/
   })

/* etc */

E

epicmau5time•2/19/23, 11:08 PM

Trying to make generic hooks where I could pass in trpc.routeOne/trpc.routeTwo/trpc.routeTree and inside the hook know that each of these have getList, getItem, etc and correctly return the correct data from the hook after some additional stuff is done inside the hook

E

epicmau5time•2/19/23, 11:11 PM

so something like:

function useGeneric(route) {
  const {data} = route.getList.useQuery(/* props that each would always take*/)
  /*bonus logic*/
  return data
}

const dataOne = useGeneric(trpc.routeOne) // correctly typed return
const dataTwo = useGeneric(trpc.routeTwo) // correctly typed return
const dataThree = useGeneric(trpc.routeThree) // correctly typed return

function useGeneric(route) {
  const {data} = route.getList.useQuery(/* props that each would always take*/)
  /*bonus logic*/
  return data
}

const dataOne = useGeneric(trpc.routeOne) // correctly typed return
const dataTwo = useGeneric(trpc.routeTwo) // correctly typed return
const dataThree = useGeneric(trpc.routeThree) // correctly typed return

function useGeneric(route) {
  const {data} = route.getList.useQuery(/* props that each would always take*/)
  /*bonus logic*/
  return data
}

const dataOne = useGeneric(trpc.routeOne) // correctly typed return
const dataTwo = useGeneric(trpc.routeTwo) // correctly typed return
const dataThree = useGeneric(trpc.routeThree) // correctly typed return

function useGeneric(route) {
  const {data} = route.getList.useQuery(/* props that each would always take*/)
  /*bonus logic*/
  return data
}

const dataOne = useGeneric(trpc.routeOne) // correctly typed return
const dataTwo = useGeneric(trpc.routeTwo) // correctly typed return
const dataThree = useGeneric(trpc.routeThree) // correctly typed return

N

Nick•2/19/23, 11:13 PM

Yeah so each of those routers could be generated from a single factory, literally just paste it in and then pull out the bits which vary as parameters

E

epicmau5time•2/19/23, 11:18 PM

import {routeOne} from './routes/routeOne'
import {routeTwo} from './routes/routeTwo'
import {routeThree} from './routes/routeThree'
export function createMyRouter() {
    return {
        routeOne: routeOne,
        routeTwo: routeTwo,
        routeThree: routeThree,
    }
}

import {routeOne} from './routes/routeOne'
import {routeTwo} from './routes/routeTwo'
import {routeThree} from './routes/routeThree'
export function createMyRouter() {
    return {
        routeOne: routeOne,
        routeTwo: routeTwo,
        routeThree: routeThree,
    }
}

import {routeOne} from './routes/routeOne'
import {routeTwo} from './routes/routeTwo'
import {routeThree} from './routes/routeThree'
export function createMyRouter() {
    return {
        routeOne: routeOne,
        routeTwo: routeTwo,
        routeThree: routeThree,
    }
}

import {routeOne} from './routes/routeOne'
import {routeTwo} from './routes/routeTwo'
import {routeThree} from './routes/routeThree'
export function createMyRouter() {
    return {
        routeOne: routeOne,
        routeTwo: routeTwo,
        routeThree: routeThree,
    }
}

E

epicmau5time•2/19/23, 11:21 PM

This seems to only work if each one of the procedures are the exact same. Type errors from differing shapes

N

Nick•2/19/23, 11:24 PM

function factory(prismaRepo) {
  return router({
      getList: t.procedure.input(schema).query(async ()=>({
        return await prismaRepo.findMany({})
      }),
      getItem: t.procedure.input(schema).query(async ()=>({
        return await prismaRepo.findFirst({})
      }),
      /* some more similary named procedures*/
   })
}

function factory(prismaRepo) {
  return router({
      getList: t.procedure.input(schema).query(async ()=>({
        return await prismaRepo.findMany({})
      }),
      getItem: t.procedure.input(schema).query(async ()=>({
        return await prismaRepo.findFirst({})
      }),
      /* some more similary named procedures*/
   })
}

function factory(prismaRepo) {
  return router({
      getList: t.procedure.input(schema).query(async ()=>({
        return await prismaRepo.findMany({})
      }),
      getItem: t.procedure.input(schema).query(async ()=>({
        return await prismaRepo.findFirst({})
      }),
      /* some more similary named procedures*/
   })
}

function factory(prismaRepo) {
  return router({
      getList: t.procedure.input(schema).query(async ()=>({
        return await prismaRepo.findMany({})
      }),
      getItem: t.procedure.input(schema).query(async ()=>({
        return await prismaRepo.findFirst({})
      }),
      /* some more similary named procedures*/
   })
}

N

Nick•2/19/23, 11:24 PM

Like that

N

Nick•2/19/23, 11:25 PM

And they do have to be the same in many ways, you'd have to do the exact same with proper generics, extract everything different up to parameters

E

epicmau5time•2/19/23, 11:42 PM

This came closest to what I needed but the resulting data is always "any"

type GenericInference<T extends AnyRouter> = RouterLike<T> extends {
    getList: QueryLike<infer Items>;
    getItem: QueryLike<infer Item>;
}
    ? { 
        getList: QueryLike<Items>; 
        getItem: QueryLike<Item>;        
      }
    : never;

function useGeneric<T extends AnyRouter>(router: GenericInference<T>) {
    return router.getList.useQuery(/*Common Options*/);
}

const c = useGeneric<AppRouter["routeOne"]>(trpc.routeOne);

const { data } = c //data is always "any"

type GenericInference<T extends AnyRouter> = RouterLike<T> extends {
    getList: QueryLike<infer Items>;
    getItem: QueryLike<infer Item>;
}
    ? { 
        getList: QueryLike<Items>; 
        getItem: QueryLike<Item>;        
      }
    : never;

function useGeneric<T extends AnyRouter>(router: GenericInference<T>) {
    return router.getList.useQuery(/*Common Options*/);
}

const c = useGeneric<AppRouter["routeOne"]>(trpc.routeOne);

const { data } = c //data is always "any"

type GenericInference<T extends AnyRouter> = RouterLike<T> extends {
    getList: QueryLike<infer Items>;
    getItem: QueryLike<infer Item>;
}
    ? { 
        getList: QueryLike<Items>; 
        getItem: QueryLike<Item>;        
      }
    : never;

function useGeneric<T extends AnyRouter>(router: GenericInference<T>) {
    return router.getList.useQuery(/*Common Options*/);
}

const c = useGeneric<AppRouter["routeOne"]>(trpc.routeOne);

const { data } = c //data is always "any"

type GenericInference<T extends AnyRouter> = RouterLike<T> extends {
    getList: QueryLike<infer Items>;
    getItem: QueryLike<infer Item>;
}
    ? { 
        getList: QueryLike<Items>; 
        getItem: QueryLike<Item>;        
      }
    : never;

function useGeneric<T extends AnyRouter>(router: GenericInference<T>) {
    return router.getList.useQuery(/*Common Options*/);
}

const c = useGeneric<AppRouter["routeOne"]>(trpc.routeOne);

const { data } = c //data is always "any"

If I could solve this above, then it would work exactly as I'd want

N

Nick•2/19/23, 11:59 PM

You're really over complicating this

E

epicmau5time•2/19/23, 11:59 PM

Each of my input and outputs have differing shapes

E

epicmau5time•2/20/23, 12:00 AM

Cant really use the factory method

N

Nick•2/20/23, 12:00 AM

You can pass those as parameters to it

N

Nick•2/20/23, 12:00 AM

But if there's no common interface then you can't do this, even generics wouldn't be able to do that

E

epicmau5time•2/20/23, 12:01 AM

The hook is what I was doing before trpc

E

epicmau5time•2/20/23, 12:01 AM

I was just able to specify the return type as a generic