trpc-nuxt/docs/content/1.get-started/3.tips/1.composables.md

title

title
Composables

Composables

It is often useful to wrap functionality of your @trpc/client api within other functions. For this purpose, it's necessary to be able to infer input types and output types generated by your @trpc/server router.

Inference Helpers

@trpc/server exports the following helper types to assist with inferring these types from the AppRouter exported by your @trpc/server router:

• inferRouterInputs<TRouter>
• inferRouterOutputs<TRouter>

Let's assume we have this example query wrapped within Nuxt's useAsyncData:

const { data, error } = await useAsyncData(() => $client.todo.getTodos.query())

We can wrap this in a composable and also set the client error types:

import { TRPCClientError } from '@trpc/client'
import type { inferRouterOutputs } from '@trpc/server'
import type { AppRouter } from '@/server/trpc/routers'

type RouterOutput = inferRouterOutputs<AppRouter>
type GetTodosOutput = RouterOutput['todo']['getTodos']

type ErrorOutput = TRPCClientError<AppRouter>

export default function useGetTodos() {
  const { $client } = useNuxtApp()
  return useAsyncData<GetTodosOutput, ErrorOutput>(() => $client.todo.getTodos.query())
}

Now, we have a fully-typed composable.