rewrite client

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
 }