feat: remove nuxt 3 wrappers for client

client.d.ts

@@ -1 +0,0 @@
-export * from './dist/client/index'

module.mjs

@@ -10,8 +10,5 @@ export default defineNuxtModule({
   },
   setup (_moduleOptions, nuxt) {
     nuxt.options.build.transpile.push('trpc-nuxt')
-    nuxt.options.vite.optimizeDeps = nuxt.options.vite.optimizeDeps || {}
-    nuxt.options.vite.optimizeDeps.exclude = nuxt.options.vite.optimizeDeps.exclude || []
-    nuxt.options.vite.optimizeDeps.exclude.push('trpc-nuxt/client')
   }
 })

package.json

@@ -6,15 +6,10 @@
   "license": "MIT",
   "sideEffects": false,
   "exports": {
-    "./package.json": "./package.json",
     ".": {
       "require": "./dist/index.cjs",
       "import": "./dist/index.mjs"
     },
-    "./client": {
-      "require": "./dist/client/index.cjs",
-      "import": "./dist/client/index.mjs"
-    },
     "./module": {
       "import": "./module.mjs"
     }
@@ -24,7 +19,6 @@
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
-    "client.d.ts",
     "module.mjs"
   ],
   "scripts": {
@@ -73,6 +67,8 @@
   "eslintIgnore": [
     "*.json",
     "node_modules",
-    "*.md"
+    "*.md",
+    "dist",
+    ".output"
   ]
 }

playground/pages/index.vue

@@ -17,17 +17,13 @@ const addTodo = async () => {
       title,
       completed: false
     })
-    console.log(x.data.value)
+    console.log(x)
   } catch (e) {
     console.log(e)
   }
 }
 
-const { data: todos, pending, error, refresh } = await $client.todo.getTodos.query(undefined, {
-  trpc: {
-    abortOnUnmount: true
-  }
-})
+const { data: todos, pending, error, refresh } = await useAsyncData(() => $client.todo.getTodos.query())
 </script>
 
 <template>

playground/pages/todo/[id].vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const route = useRoute()
 const { $client } = useNuxtApp()
-const { data: todo, pending, error } = await $client.todo.getTodo.query(Number(route.params.id))
+const { data: todo, pending, error } = await useAsyncData(() => $client.todo.getTodo.query(Number(route.params.id)))
 </script>
 
 <template>

playground/plugins/trpc-client.ts

@@ -1,10 +1,9 @@
-import { httpBatchLink, loggerLink } from '@trpc/client'
-import { createTRPCNuxtProxyClient } from 'trpc-nuxt/client'
+import { createTRPCProxyClient, httpBatchLink, loggerLink } from '@trpc/client'
 import superjson from 'superjson'
 import type { AppRouter } from '~~/server/trpc/routers'
 
 export default defineNuxtPlugin(() => {
-  const client = createTRPCNuxtProxyClient<AppRouter>({
+  const client = createTRPCProxyClient<AppRouter>({
     transformer: superjson,
     links: [
       // adds pretty logs to your console in development and logs errors in production

src/client/index.ts

@@ -1,66 +0,0 @@
-import type { CreateTRPCClientOptions, inferRouterProxyClient } from '@trpc/client'
-import { createTRPCProxyClient } from '@trpc/client'
-import type {
-  AnyRouter
-} from '@trpc/server'
-import { createFlatProxy, createRecursiveProxy } from '@trpc/server/shared'
-import { hash } from 'ohash'
-import { nanoid } from 'nanoid'
-import type { DecoratedProcedureRecord } from './types'
-// @ts-expect-error: Nuxt auto-imports
-import { getCurrentInstance, onScopeDispose, useAsyncData } from '#imports'
-
-/**
- * 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()`
-    const lastArg = pathCopy.pop()!
-
-    const path = pathCopy.join('.')
-
-    const [input, otherOptions] = args
-
-    const queryKey = lastArg === 'mutate' ? nanoid() : getQueryKey(path, input)
-
-    const { trpc, ...asyncDataOptions } = otherOptions || {} as any
-
-    let controller: AbortController
-
-    if (trpc?.abortOnUnmount) {
-      if (getCurrentInstance()) {
-        onScopeDispose(() => {
-          controller?.abort?.()
-        })
-      }
-      controller = typeof AbortController !== 'undefined' ? new AbortController() : {} as AbortController
-    }
-
-    return useAsyncData(queryKey, () => (client as any)[path][lastArg](input, {
-      signal: controller?.signal,
-      ...trpc
-    }), asyncDataOptions)
-  })
-}
-
-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'], TRouter>
-
-  return decoratedClient
-}

src/client/types.ts

@@ -1,85 +0,0 @@
-import type { TRPCClientErrorLike, TRPCRequestOptions } from '@trpc/client'
-import type { TRPCSubscriptionObserver } from '@trpc/client/dist/internals/TRPCClient'
-import type {
-  AnyMutationProcedure,
-  AnyProcedure,
-  AnyQueryProcedure,
-  AnyRouter,
-  AnySubscriptionProcedure,
-  ProcedureArgs,
-  ProcedureRouterRecord,
-  inferProcedureInput,
-  inferProcedureOutput
-} from '@trpc/server'
-import type { Unsubscribable, inferObservableValue } from '@trpc/server/observable'
-import type {
-  AsyncData,
-  AsyncDataOptions,
-  KeyOfRes,
-  PickFrom,
-  _Transform
-} from 'nuxt/dist/app/composables/asyncData'
-
-// Modified @trpc/client and @trpc/react-query types
-// https://github.com/trpc/trpc/blob/next/packages/client/src/createTRPCClientProxy.ts
-// https://github.com/trpc/trpc/blob/next/packages/react-query/src/createTRPCReact.tsx
-
-interface TRPCOptions extends TRPCRequestOptions {
-  abortOnUnmount?: boolean
-}
-
-type SubscriptionResolver<
-  TProcedure extends AnyProcedure,
-  TRouter extends AnyRouter,
-> = (
-  ...args: [
-    input: ProcedureArgs<TProcedure['_def']>[0],
-    opts: ProcedureArgs<TProcedure['_def']>[1] &
-    Partial<
-        TRPCSubscriptionObserver<
-          inferObservableValue<inferProcedureOutput<TProcedure>>,
-          TRPCClientErrorLike<TRouter>
-        >
-      >,
-  ]
-) => Unsubscribable
-
-type DecorateProcedure<
-  TProcedure extends AnyProcedure,
-  TRouter extends AnyRouter,
-> = 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> & { trpc: TRPCOptions },
-      ) => 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> & { trpc: TRPCOptions },
-      ) => AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, TRPCClientErrorLike<TProcedure>>
-    } : TProcedure extends AnySubscriptionProcedure ? {
-      subscribe: SubscriptionResolver<TProcedure, TRouter>
-    } : never
-
-/**
-* @internal
-*/
-export type DecoratedProcedureRecord<
-  TProcedures extends ProcedureRouterRecord,
-  TRouter extends AnyRouter,
-> = {
-  [TKey in keyof TProcedures]: TProcedures[TKey] extends AnyRouter
-    ? DecoratedProcedureRecord<TProcedures[TKey]['_def']['record'], TRouter>
-    : TProcedures[TKey] extends AnyProcedure
-      ? DecorateProcedure<TProcedures[TKey], TRouter>
-      : never;
-}

tsup.config.ts

@@ -1,15 +1,15 @@
 import { defineConfig } from 'tsup'
 
 export default defineConfig({
-  entry: ['src/index.ts', 'src/client/index.ts'],
+  entry: ['src/index.ts'],
   format: ['cjs', 'esm'],
   splitting: false,
   clean: true,
   external: ['#app', '#imports'],
   dts: true,
-  outExtension({ format }) {
+  outExtension ({ format }) {
     return {
-      js: format === 'esm' ? '.mjs' : `.${format}`,
+      js: format === 'esm' ? '.mjs' : `.${format}`
     }
-  },
+  }
 })