docs: improve docs

docs/content/1.get-started/4.tips/1.composables.md

@@ -0,0 +1,44 @@
+---
+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.
+
+::alert{type="info"}
+[createTRPCNuxtClient](/get-started/client/create) adds a `useQuery` method built on top of [useAsyncData](https://nuxt.com/docs/api/composables/use-async-data/).
+::
+
+## 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](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.