mirror of
https://github.com/ArthurDanjou/trpc-nuxt.git
synced 2026-01-21 07:21:43 +01:00
41 lines
1.3 KiB
Markdown
41 lines
1.3 KiB
Markdown
---
|
|
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 composable using Nuxt's [useAsyncData](https://v3.nuxtjs.org/api/composables/use-async-data/):
|
|
|
|
```ts
|
|
const { data, error } = await useAsyncData(() => $client.todo.getTodos.query())
|
|
```
|
|
|
|
We can wrap this in a composable and also set the client error types:
|
|
|
|
```ts [composables/useGetTodos.ts]
|
|
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.
|