rewrite client

src/module.ts

@@ -3,7 +3,7 @@ import { join, resolve } from 'pathe'
 import { defu } from 'defu'
 import dedent from 'dedent'
 
-import { addImports, addPlugin, addServerHandler, addTemplate, defineNuxtModule } from '@nuxt/kit'
+import { addPlugin, addServerHandler, addTemplate, defineNuxtModule } from '@nuxt/kit'
 
 export interface ModuleOptions {
   baseURL: string
@@ -32,19 +32,19 @@ export default defineNuxtModule<ModuleOptions>({
       endpoint: options.endpoint,
     })
 
-    addImports([
-      { name: 'useClient', from: join(runtimeDir, 'client') },
-      { name: 'useAsyncQuery', from: join(runtimeDir, 'client') },
-      { name: 'useClientHeaders', from: join(runtimeDir, 'client') },
-      { name: 'getQueryKey', from: join(runtimeDir, 'client') },
-    ])
+    // addImports([
+    //   { name: 'useClient', from: join(runtimeDir, 'client') },
+    //   { name: 'useAsyncQuery', from: join(runtimeDir, 'client') },
+    //   { name: 'useClientHeaders', from: join(runtimeDir, 'client') },
+    //   { name: 'getQueryKey', from: join(runtimeDir, 'client') },
+    // ])
 
     addServerHandler({
       route: `${finalConfig.endpoint}/*`,
       handler: handlerPath,
     })
 
-    addPlugin(resolve(runtimeDir, 'plugin'))
+    // addPlugin(resolve(runtimeDir, 'plugin'))
 
     addTemplate({
       filename: 'trpc-handler.ts',
@@ -56,6 +56,7 @@ export default defineNuxtModule<ModuleOptions>({
     
           export default createTRPCHandler({
             ...functions,
+            router: functions.appRouter,
             endpoint: '${finalConfig.endpoint}'
           })
         `

src/runtime/api.ts

@@ -11,6 +11,9 @@ import { createURL } from 'ufo'
 import type { H3Event } from 'h3'
 import { defineEventHandler, isMethod, readBody } from 'h3'
 import type { TRPCResponse } from '@trpc/server/rpc'
+import type { CreateTRPCClientOptions, inferRouterProxyClient } from '@trpc/client'
+import { createTRPCProxyClient } from '@trpc/client'
+import { toRaw } from 'vue'
 
 type MaybePromise<T> = T | Promise<T>
 
@@ -88,3 +91,26 @@ export function createTRPCHandler<Router extends AnyRouter>({
     return body
   })
 }
+
+export function createTRPCNuxtClient<R extends AnyRouter>(opts: CreateTRPCClientOptions<R>) {
+  const client = createTRPCProxyClient(opts)
+
+  // Object.keys(client).forEach((path) => {
+  //   clientWithOther[path] = {}
+  //   Object.keys(client[path]).forEach((action) => {
+  //     clientWithOther[path][action] = (input: inferRouterInputs<R>) => {
+  //       // @ts-expect-error: asd
+  //       return useAsyncData(`${path}-${action}`, () => client[path][action](input))
+  //     }
+  //   })
+  // })
+
+  const proxiedClient = new Proxy({}, {
+    get(target, property) {
+      // @ts-expect-error: Nuxt
+      return () => useAsyncData(`${target}-${property}`, () => client.getTodos.query())
+    },
+  })
+
+  return proxiedClient as inferRouterProxyClient<R>
+}

src/runtime/client.ts

@@ -1,3 +1,15 @@
+import type { CreateTRPCClientOptions, TRPCClientErrorLike, inferRouterProxyClient } from '@trpc/client'
+import { createTRPCProxyClient } from '@trpc/client'
+import type {
+  AnyMutationProcedure,
+  AnyProcedure,
+  AnyQueryProcedure,
+  AnyRouter,
+  ProcedureRouterRecord,
+  inferProcedureInput,
+  inferProcedureOutput,
+} from '@trpc/server'
+import { createFlatProxy, createRecursiveProxy } from '@trpc/server/shared'
 import type {
   AsyncData,
   AsyncDataOptions,
@@ -5,80 +17,97 @@ import type {
   PickFrom,
   _Transform,
 } from 'nuxt/dist/app/composables/asyncData'
-import type {
-  ProcedureRecord,
-  inferHandlerInput,
-  inferProcedureInput,
-  inferProcedureOutput,
-} from '@trpc/server'
-import type { TRPCClient, TRPCClientErrorLike } from '@trpc/client'
-import { objectHash } from 'ohash'
-import type { Ref } from 'vue'
-import { useAsyncData, useNuxtApp, useState } from '#app'
-import type { AppRouter } from '~/server/trpc'
-
-type MaybeRef<T> = T | Ref<T>
-
-export type inferProcedures<
-  TObj extends ProcedureRecord,
-> = {
-  [TPath in keyof TObj]: {
-    input: inferProcedureInput<TObj[TPath]>
-    output: inferProcedureOutput<TObj[TPath]>
-  };
-}
-
-export type TQueries = AppRouter['_def']['procedures']
-export type TError = TRPCClientErrorLike<AppRouter>
-
-export type TQueryValues = inferProcedures<AppRouter['_def']['procedures']>
+import { hash } from 'ohash'
 
 /**
  * Calculates the key used for `useAsyncData` call
- * @param pathAndInput
  */
-export function getQueryKey<
-    TPath extends keyof TQueryValues & string,
-    >(pathAndInput: [path: TPath, ...args: inferHandlerInput<TQueries[TPath]>]) {
-  return `${pathAndInput[0]}-${objectHash(pathAndInput[1] ? JSON.stringify(pathAndInput[1]) : '')}`
+export function getQueryKey(
+  path: string,
+  input: unknown,
+): string {
+  return input === undefined ? path : `${path}-${hash(input || '')}`
 }
 
-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 } = useNuxtApp()
-  const key = getQueryKey(pathAndInput)
-  const serverError = useState<TError | null>(`error-${key}`, () => null)
-  const { error, data, ...rest } = await useAsyncData(
-    key,
-    () => $client.query(...pathAndInput),
-    options,
-  )
+function createNuxtProxyDecoration<TRouter extends AnyRouter>(name: string, client: inferRouterProxyClient<TRouter>) {
+  return createRecursiveProxy((opts) => {
+    const args = opts.args
 
-  if (error.value && !serverError.value)
-    serverError.value = error.value as any
+    const pathCopy = [name, ...opts.path]
 
-  if (data.value)
-    serverError.value = null
+    // The last arg is for instance `.mutate` or `.query()`
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const lastArg = pathCopy.pop()!
 
-  return {
-    ...rest,
-    data,
-    error: serverError,
-  } as any
+    const path = pathCopy.join('.')
+
+    const [input, asyncDataOptions] = args
+
+    const queryKey = getQueryKey(path, input)
+
+    if (lastArg === 'mutate') {
+      // @ts-expect-error: Nuxt internal
+      return useAsyncData(queryKey, () => (client as any)[path][lastArg](input), {
+        ...asyncDataOptions as Record<string, any>,
+        immediate: false,
+      })
+    }
+
+    // @ts-expect-error: Nuxt internal
+    return useAsyncData(queryKey, () => (client as any)[path][lastArg](input), asyncDataOptions as Record<string, any>)
+  })
 }
 
-export function useClient(): TRPCClient<AppRouter> {
-  const { $client } = useNuxtApp()
-  return $client
+/**
+ * @internal
+ */
+export type DecorateProcedure<
+ TProcedure extends AnyProcedure,
+ TPath extends string,
+> = TProcedure extends AnyQueryProcedure
+  ? {
+      query: <
+      TData = inferProcedureOutput<TProcedure>,
+      Transform extends _Transform<TData> = _Transform<TData, TData>,
+      PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>,
+     >(
+        input: inferProcedureInput<TProcedure>,
+        opts?: AsyncDataOptions<TData, Transform, PickKeys>,
+      ) => AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, TRPCClientErrorLike<TProcedure>>
+    } : TProcedure extends AnyMutationProcedure ? {
+      mutate: <
+      TData = inferProcedureOutput<TProcedure>,
+      Transform extends _Transform<TData> = _Transform<TData, TData>,
+      PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>,
+     >(
+        input: inferProcedureInput<TProcedure>,
+        opts?: AsyncDataOptions<TData, Transform, PickKeys>,
+      ) => AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, TRPCClientErrorLike<TProcedure>>
+    } : never
+
+/**
+* @internal
+*/
+export type DecoratedProcedureRecord<
+ TProcedures extends ProcedureRouterRecord,
+ TPath extends string = '',
+> = {
+  [TKey in keyof TProcedures]: TProcedures[TKey] extends AnyRouter
+    ? DecoratedProcedureRecord<
+       TProcedures[TKey]['_def']['record'],
+       `${TPath}${TKey & string}.`
+     >
+    : TProcedures[TKey] extends AnyProcedure
+      ? DecorateProcedure<TProcedures[TKey], `${TPath}${TKey & string}`>
+      : never;
 }
 
-export function useClientHeaders(initialValue: MaybeRef<Record<string, any>> = {}): Ref<Record<string, any>> {
-  return useState('trpc-nuxt-header', () => initialValue)
+export function createTRPCNuxtProxyClient<TRouter extends AnyRouter>(opts: CreateTRPCClientOptions<TRouter>) {
+  const client = createTRPCProxyClient(opts)
+
+  const decoratedClient = createFlatProxy((key) => {
+    return createNuxtProxyDecoration(key, client)
+  }) as DecoratedProcedureRecord<TRouter['_def']['record']>
+
+  return decoratedClient
 }

src/runtime/plugin.ts

@@ -1,5 +1,5 @@
+import type { inferRouterProxyClient } from '@trpc/client'
 import { createTRPCProxyClient, httpBatchLink } from '@trpc/client'
-import type { TRPCClient } from '@trpc/client';
 import { unref } from 'vue'
 import { FetchError } from 'ohmyfetch'
 import { useClientHeaders } from './client'
@@ -12,6 +12,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   const otherHeaders = useClientHeaders()
 
   const baseURL = process.server ? '' : config.baseURL
+
   const client = createTRPCProxyClient<AppRouter>({
     links: [
       httpBatchLink({
@@ -43,6 +44,6 @@ export default defineNuxtPlugin((nuxtApp) => {
 
 declare module '#app' {
   interface NuxtApp {
-    $client: TRPCClient<any>
+    $client: inferRouterProxyClient<AppRouter>
   }
 }