rewrite client

2026-01-14 12:14:40 +01:00 · 2022-10-29 19:02:14 -07:00
parent b72b0449c1
commit 7257842438
8 changed files with 319 additions and 108 deletions
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -1,55 +1,66 @@
 <script setup lang="ts">
-const client = useClient()
-const headers = useClientHeaders()
-const { data: todos, pending, error, refresh } = await useAsyncQuery(['getTodos'])
+const { $client } = useNuxtApp()
+// const headers = useClientHeaders()
+// const { data: todos, pending, error, refresh } = await useAsyncQuery(['getTodos'])

-const addHeader = () => {
-  headers.value.authorization = 'Bearer abcdefghijklmnop'
-  console.log(headers.value)
-}
+// const addHeader = () => {
+//   headers.value.authorization = 'Bearer abcdefghijklmnop'
+//   console.log(headers.value)
+// }

 const addTodo = async () => {
  const title = Math.random().toString(36).slice(2, 7)

  try {
-    const result = await client.mutation('addTodo', {
-      id: Date.now(),
+    const result = await $client.todo.addTodo.mutate({
+      id: 69,
      userId: 69,
      title,
      completed: false,
    })
-    console.log('Todo: ', result)
+    await result.execute()
+    console.log('Todo: ', result.data.value)
  }
  catch (e) {
    console.log(e)
  }
 }
+// console.log($client)
+const { data: todos, pending, error } = await $client.todo.getTodo.query(2, {
+  // immediate: false,
+  pick: ['completed'],
+})
 </script>

 <template>
-  <div v-if="pending">
-    Loading...
-  </div>
-  <div v-else-if="error?.data?.code">
-    Error: {{ error.data.code }}
-  </div>
-  <div v-else-if="todos">
-    <ul>
-      <li v-for="t in todos.slice(0, 10)" :key="t.id">
-        <NuxtLink :class="{ completed: t.completed }" :to="`/todo/${t.id}`">
-          Title: {{ t.title }}
-        </NuxtLink>
-      </li>
-    </ul>
+  <div>
+    <div v-if="pending">
+      Loading...
+    </div>
+    <div v-else-if="error?.data?.code">
+      Error: {{ error.data.code }}
+    </div>
+    <!-- <div v-if="todos && todos.length > 0">
+      <ul>
+        <li v-for="t in todos.slice(0, 10)" :key="t.id">
+          <NuxtLink :class="{ completed: t.completed }" :to="`/todo/${t.id}`">
+            Title: {{ t.title }}
+          </NuxtLink>
+        </li>
+      </ul> -->
    <button @click="addTodo">
      Add Todo
    </button>
-    <button @click="() => refresh()">
-      Refresh
-    </button>
-    <button @click="addHeader">
-      Add header
-    </button>
+    <!-- <button @click="() => refresh()">
+        Refresh
+      </button>
+      <button @click="addHeader">
+        Add header
+      </button> -->
+    <!-- </div> -->
+    <div v-if="todos">
+      {{ JSON.stringify(todos) }}
+    </div>
  </div>
 </template>

--- a/playground/plugins/trpc-client.ts
+++ b/playground/plugins/trpc-client.ts
@@ -0,0 +1,110 @@
+import type { TRPCClientErrorLike, inferRouterProxyClient } from '@trpc/client'
+import { createTRPCProxyClient, httpBatchLink } from '@trpc/client'
+import type { AnyMutationProcedure, AnyProcedure, AnyQueryProcedure, AnyRouter, ProcedureRecord, ProcedureRouterRecord, inferHandlerInput, inferProcedureInput, inferProcedureOutput, inferRouterInputs } from '@trpc/server'
+import { createFlatProxy, createRecursiveProxy } from '@trpc/server/shared'
+import type {
+  AsyncData, AsyncDataOptions, KeyOfRes, PickFrom, _Transform,
+} from 'nuxt/dist/app/composables/asyncData'
+import { hash } from 'ohash'
+import type { AppRouter } from '~~/server/trpc'
+
+/**
+ * Calculates the key used for `useAsyncData` call
+ */
+export function getQueryKey(
+  path: string,
+  input: unknown,
+): string {
+  return input === undefined ? path : `${path}-${hash(input || '')}`
+}
+
+function createNuxtProxyDecoration<TRouter extends AnyRouter>(name: string, client: inferRouterProxyClient<TRouter>) {
+  return createRecursiveProxy((opts) => {
+    const args = opts.args
+
+    const pathCopy = [name, ...opts.path]
+
+    // The last arg is for instance `.mutate` or `.query()`
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const lastArg = pathCopy.pop()!
+
+    const path = pathCopy.join('.')
+
+    const [input, asyncDataOptions] = args
+
+    const queryKey = getQueryKey(path, input)
+
+    if (lastArg === 'mutate') {
+      return useAsyncData(queryKey, () => (client as any)[path][lastArg](input), {
+        ...asyncDataOptions as Record<string, any>,
+        immediate: false,
+      })
+    }
+
+    return useAsyncData(queryKey, () => (client as any)[path][lastArg](input), asyncDataOptions as Record<string, any>)
+  })
+}
+
+/**
+ * @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 default defineNuxtPlugin(() => {
+  const client = createTRPCProxyClient<AppRouter>({
+    links: [
+      httpBatchLink({
+        url: 'http://localhost:3000/trpc',
+      }),
+    ],
+  })
+
+  const newClient = createFlatProxy((key) => {
+    return createNuxtProxyDecoration(key, client)
+  }) as DecoratedProcedureRecord<AppRouter['_def']['record']>
+
+  return {
+    provide: {
+      client: newClient,
+    },
+  }
+})
--- a/playground/server/trpc/index.ts
+++ b/playground/server/trpc/index.ts
@@ -19,13 +19,10 @@ const t = initTRPC.context<Context>().create()
 // We explicitly export the methods we use here
 // This allows us to create reusable & protected base procedures
 export const middleware = t.middleware
-export const router = t.router
+const router = t.router
 export const publicProcedure = t.procedure

-export const appRouter = router({
-  getTodos: publicProcedure.query(() => {
-    return $fetch<Todo[]>(`${baseURL}/todos`)
-  }),
+const anotherRouter = router({
  getTodo: publicProcedure
    .input(z.number())
    .query((req) => {
@@ -41,6 +38,19 @@ export const appRouter = router({
    }),
 })

+export const appRouter = router({
+  todo: anotherRouter,
+  getTodos: publicProcedure.query(() => {
+    return $fetch<Todo[]>(`${baseURL}/todos`)
+  }),
+  getTodo: publicProcedure
+    .input(z.number())
+    .query((req) => {
+      console.log('REQ', req)
+      return $fetch<Todo>(`${baseURL}/todos/${req.input}`)
+    }),
+})
+
 export type AppRouter = typeof appRouter

 export async function createContext(event: H3Event) {
--- a/src/module.ts
+++ b/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}'
          })
        `
--- a/src/runtime/api.ts
+++ b/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>
+}
--- a/src/runtime/client.ts
+++ b/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
 }
--- a/src/runtime/plugin.ts
+++ b/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>
  }
 }
--- a/test.js
+++ b/test.js
@@ -0,0 +1,23 @@
+const data = {
+  hello: {
+    log() {
+      return 'hello log';
+    },
+  },
+  hi: {
+    log() {
+      return 'hi log'
+    },
+  },
+}
+
+const blankObject = {};
+
+const proxy = new Proxy(blankObject, {
+  get(target, key) {
+    if (key in data) return data[key]; // <---
+    return target[key]; // default
+  }
+});
+
+console.log(proxy.hello.log()); // hello log;