How can i use inferprocedureoutput?

I'd like to write this code type-safely:

const handleQuery = (query: /* ? */) => {}

const MyComponent = () => {
  const query = trpc.foo.useQuery()
  handleQuery(query)
  // ...
}

const handleQuery = (query: /* ? */) => {}

const MyComponent = () => {
  const query = trpc.foo.useQuery()
  handleQuery(query)
  // ...
}

I'm pretty sure i need to use inferProcedureOutput but i couldn't figure out what to pass. I can never access query.isLoading for example.

2 Replies

functionOP•12mo ago

Seems like i actually need something like

type RouterOutputs = inferRouterOutputs<AppRouter>
UseTRPCQueryResult<RouterOutputs["foo"], TRPCClientErrorLike<AppRouter>>

type RouterOutputs = inferRouterOutputs<AppRouter>
UseTRPCQueryResult<RouterOutputs["foo"], TRPCClientErrorLike<AppRouter>>

but i don't understand why i need to pass TRPCClientErrorLike

Alex / KATT 🐱•12mo ago

https://trpc.io/docs/client/vanilla/infer-types

Inferring Types | tRPC

It is often useful to access the types of your API within your clients. For this purpose, you are able to infer the types contained in your AppRouter.