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•13mo 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 🐱•13mo 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.

How can i use inferprocedureoutput?

Did you find this page helpful?