add useTRPCAsyncData composable

src/module.ts

@@ -1,3 +1,4 @@
+import { fileURLToPath } from 'url'
 import { dirname, join } from 'pathe'
 
 import { addServerHandler, defineNuxtModule } from '@nuxt/kit'
@@ -18,6 +19,9 @@ export default defineNuxtModule<ModuleOptions>({
     trpcURL: '/api/trpc',
   },
   async setup(options, nuxt) {
+    const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
+    nuxt.options.build.transpile.push(runtimeDir)
+
     const clientPath = join(nuxt.options.buildDir, 'trpc-client.ts')
     const handlerPath = join(nuxt.options.buildDir, 'trpc-handler.ts')
 
@@ -29,6 +33,7 @@ export default defineNuxtModule<ModuleOptions>({
     nuxt.hook('autoImports:extend', (imports) => {
       imports.push(
         { name: 'useClient', from: clientPath },
+        { name: 'useTRPCAsyncData', from: join(runtimeDir, 'composables') },
       )
     })
 
@@ -42,21 +47,14 @@ export default defineNuxtModule<ModuleOptions>({
         url: '${options.baseURL}${options.trpcURL}',
       })
     
-      const useClient = () => client
-
-      export {
-        useClient
-      }
+      export const useClient = () => client
     `)
 
     await fs.writeFile(handlerPath, `
       import { createTRPCHandler } from 'trpc-nuxt/api'
       import * as functions from '~/server/trpc'
 
-      export default createTRPCHandler({
-        router: functions.router,
-        ...functions
-      })
+      export default createTRPCHandler(functions)
     `)
   },
 })

src/runtime/api.ts

@@ -58,6 +58,8 @@ export function createTRPCHandler<Router extends AnyRouter>({
 
     const $url = createURL(req.url)
 
+    event.context.hello = 'world'
+
     const httpResponse = await resolveHTTPResponse({
       router,
       req: {

src/runtime/composables.ts

@@ -0,0 +1,37 @@
+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,
+  }
+}