update readme

README.md

@@ -52,33 +52,34 @@ export const router = trpc
 
 Use the client like so:
 
-```html
+```ts
-<script setup lang="ts">
+const client = useClient() // auto-imported
-const client = useClient()
 
-const greeting = await client.query('hello');
+const greeting = await client.query('hello')
-console.log(greeting); // => 👈 world
+console.log(greeting) // => 👈 world
 
-const farewell = await client.query('bye');
+const farewell = await client.query('bye')
-console.log(farewell); // => 👈 goodbye
+console.log(farewell) // => 👈 goodbye
-</script>
 ```
 
-## `useTRPCAsyncData`
+## useAsyncQuery
 
-A composable that wraps Nuxt's [`useAsyncData`](https://v3.nuxtjs.org/api/composables/use-async-data/) with some modifications to have better error handlings.
+A thin wrapper around [`useAsyncData`](https://v3.nuxtjs.org/api/composables/use-async-data/).
+
+The first argument is a `[path, input]`-tuple - if the `input` is optional, you can omit the, `input`-part.
+
+You'll notice that you get autocompletion on the `path` and automatic typesafety on the `input`.
 
 ```ts
-const path = 'hello'
-const client = useClient()
-
 const {
   data,
   pending,
   error,
   refresh
-} = await useTRPCAsyncData(path, () => client.query(path))
+} = await useAsyncQuery(['getUser', { id: 69 }], {
-console.log(data.value) // => 👈 world
+  // pass useAsyncData options here
+  server: true
+})
 ```
 
 ## Recipes
@@ -86,6 +87,7 @@ console.log(data.value) // => 👈 world
 - [Validation](/recipes/validation.md)
 - [Authorization](/recipes/authorization.md)
 - [Error Handling](/recipes/error-handling.md)
+- [Error Formatting](/recipes/error-formatting.md)
 
 Learn more about tRPC.io [here](https://trpc.io/docs).
 

playground/app.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
+const { data, error } = await useAsyncQuery(['getUser', { username: 'jcena' }], {
+  lazy: true,
+})
+
 const client = useClient()
-
-const key = 'getUser'
-
-const { data, pending, error } = await useTRPCAsyncData(key, () => client.query(key, {
-  username: 'jcena',
-}))
 </script>
 
 <template>
@@ -14,7 +12,7 @@ const { data, pending, error } = await useTRPCAsyncData(key, () => client.query(
       {{ JSON.stringify(data, null, 2) }}
     </div>
     <div v-else-if="error">
-      asdx  {{ JSON.stringify(error.data, null, 2) }}
+      asdx  {{ JSON.stringify(error, null, 2) }}
     </div>
   </div>
 </template>

playground/server/trpc/index.ts

@@ -14,6 +14,19 @@ const fakeUsers = [
 
 export const router = trpc
   .router<inferAsyncReturnType<typeof createContext>>()
+  .formatError(({ shape, error }) => {
+    return {
+      ...shape,
+      data: {
+        ...shape.data,
+        zodError:
+          error.code === 'BAD_REQUEST'
+          && error.cause instanceof ZodError
+            ? error.cause.flatten()
+            : null,
+      },
+    }
+  })
   .query('getUsers', {
     resolve() {
       return fakeUsers

recipes/error-formatting.md

@@ -0,0 +1,31 @@
+## Error Formatting
+
+The error formatting in your router will be inferred all the way to your client (& Vue components).
+
+### Adding custom formatting
+
+```ts
+// ~/server/trpc/index.ts
+import * as trpc from '@trpc/server'
+
+export const router = trpc.router<Context>()
+  .formatError(({ shape, error }) => {
+    return {
+      ...shape,
+      data: {
+        ...shape.data,
+        zodError:
+          error.code === 'BAD_USER_INPUT'
+          && error.cause instanceof ZodError
+            ? error.cause.flatten()
+            : null,
+      }
+    }
+  })
+```
+
+### Usage in Vue
+
+```html
+
+```

src/module.ts

@@ -33,7 +33,7 @@ export default defineNuxtModule<ModuleOptions>({
     nuxt.hook('autoImports:extend', (imports) => {
       imports.push(
         { name: 'useClient', from: clientPath },
-        { name: 'useTRPCAsyncData', from: join(runtimeDir, 'composables') },
+        { name: 'useAsyncQuery', from: join(runtimeDir, 'client') },
       )
     })
 

src/runtime/client.ts

@@ -0,0 +1,63 @@
+import type {
+  AsyncData,
+  AsyncDataOptions,
+  KeyOfRes,
+  PickFrom,
+  _Transform,
+} from 'nuxt/dist/app/composables/asyncData'
+import type { ProcedureRecord, inferHandlerInput, inferProcedureInput, inferProcedureOutput } from '@trpc/server'
+import type { TRPCClientErrorLike } from '@trpc/client'
+import { objectHash } from 'ohash'
+// @ts-expect-error: Resolved by Nuxt
+import { useAsyncData, useState } from '#imports'
+// @ts-expect-error: Resolved by Nuxt
+import { useClient } from '#build/trpc-client'
+// @ts-expect-error: Resolved by Nuxt
+import type { router } from '~/server/trpc'
+
+type AppRouter = typeof router
+
+type inferProcedures<
+  TObj extends ProcedureRecord<any, any, any, any, any, any>,
+> = {
+  [TPath in keyof TObj]: {
+    input: inferProcedureInput<TObj[TPath]>
+    output: inferProcedureOutput<TObj[TPath]>
+  };
+}
+
+type TQueries = AppRouter['_def']['queries']
+type TError = TRPCClientErrorLike<AppRouter>
+
+type TQueryValues = inferProcedures<AppRouter['_def']['queries']>
+
+export async function useAsyncQuery<
+  TPath extends keyof TQueryValues & string,
+  TOutput extends TQueryValues[TPath]['output'] = TQueryValues[TPath]['output'],
+  Transform extends _Transform<TOutput> = _Transform<TOutput, TOutput>,
+  PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>,
+>(
+  pathAndInput: [path: TPath, ...args: inferHandlerInput<TQueries[TPath]>],
+  options: AsyncDataOptions<TOutput, Transform, PickKeys> = {},
+): Promise<AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, TError>> {
+  const client = useClient()
+  const key = `${pathAndInput[0]}-${objectHash(pathAndInput[1] ? JSON.stringify(pathAndInput[1]) : '')}`
+  const serverError = useState<TError | null>(`error-${key}`, () => null)
+  const { error, data, ...rest } = await useAsyncData(
+    key,
+    () => client.query(...pathAndInput),
+    options,
+  )
+
+  if (process.server && error.value && !serverError.value)
+    serverError.value = error.value as any
+
+  if (data.value)
+    serverError.value = null
+
+  return {
+    ...rest,
+    data,
+    error: serverError,
+  } as any
+}

src/runtime/composables.ts

@@ -1,37 +0,0 @@
-import type {
-  AsyncData,
-  KeyOfRes,
-  PickFrom,
-  _Transform,
-} from 'nuxt/dist/app/composables/asyncData'
-import type { AsyncDataOptions, NuxtApp } from '#app'
-// @ts-expect-error: Resolved by Nuxt
-import { useAsyncData, useState } from '#imports'
-
-export async function useTRPCAsyncData<
-  DataT,
-  DataE = Error,
-  Transform extends _Transform<DataT> = _Transform<DataT, DataT>,
-  PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>,
->(
-  key: string,
-  handler: (ctx?: NuxtApp) => Promise<DataT>,
-  options: AsyncDataOptions<DataT, Transform, PickKeys> = {},
-): Promise<AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE | null | true>> {
-  const serverError = useState<DataE | true | null>(`error-${key}`, () => null)
-  const { error, data, ...rest } = await useAsyncData(key, handler, options)
-
-  // Only set the value on server and if serverError is empty
-  if (process.server && error.value && !serverError.value)
-    serverError.value = error.value as DataE | true | null
-
-  // Clear error if data is available
-  if (data.value)
-    serverError.value = null
-
-  return {
-    ...rest,
-    data,
-    error: serverError,
-  }
-}