feat: add custom Nuxt client

playground/package.json

@@ -9,8 +9,8 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@trpc/client": "^10.1.0",
-    "@trpc/server": "^10.1.0",
+    "@trpc/client": "^10.5.0",
+    "@trpc/server": "^10.5.0",
     "superjson": "^1.11.0",
     "trpc-nuxt": "workspace:*",
     "zod": "^3.19.1"

playground/pages/index.vue

@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import { TRPCClientError } from '@trpc/client';
-import type { inferRouterOutputs } from '@trpc/server';
-import type { AppRouter } from '~~/server/trpc/routers';
-
 const { $client } = useNuxtApp()
+const { mutate } = $client.todo.addTodo.useMutation()
 
 const addTodo = async () => {
   const title = Math.random().toString(36).slice(2, 7)
 
   try {
-    const x = await $client.todo.addTodo.mutate({
+    const x = await mutate({
       id: Date.now(),
       userId: 69,
       title,
@@ -21,10 +18,7 @@ const addTodo = async () => {
   }
 }
 
-type RouterOutput = inferRouterOutputs<AppRouter>;
-type ErrorOutput = TRPCClientError<AppRouter>
-
-const { data: todos, pending, error, refresh } = await useAsyncData<RouterOutput['todo']['getTodos'], ErrorOutput>(() => $client.todo.getTodos.query())
+const { data: todos, pending, error, refresh } = await $client.todo.getTodos.useQuery()
 </script>
 
 <template>

playground/plugins/trpc-client.ts

@@ -1,23 +1,62 @@
 import { createTRPCProxyClient, httpBatchLink, loggerLink } from '@trpc/client'
 import superjson from 'superjson'
+import { FetchError } from 'ofetch'
+import { createTRPCNuxtClient } from 'trpc-nuxt/client'
 import type { AppRouter } from '~~/server/trpc/routers'
 
 export default defineNuxtPlugin(() => {
   const headers = useRequestHeaders()
-  const client = createTRPCProxyClient<AppRouter>({
+  // const client = createTRPCProxyClient<AppRouter>({
+  //   transformer: superjson,
+  //   links: [
+  //     // adds pretty logs to your console in development and logs errors in production
+  //     loggerLink({
+  //       enabled: opts =>
+  //         process.env.NODE_ENV === 'development' ||
+  //         (opts.direction === 'down' && opts.result instanceof Error)
+  //     }),
+  //     httpBatchLink({
+  //       url: '/api/trpc',
+  //       headers () {
+  //         return headers
+  //       },
+  //       fetch: (input, options) =>
+  //         globalThis.$fetch.raw(input.toString(), options)
+  //           .catch((e) => {
+  //             if (e instanceof FetchError && e.response) { return e.response }
+  //             throw e
+  //           })
+  //           .then(response => ({
+  //             ...response,
+  //             json: () => Promise.resolve(response._data)
+  //           }))
+  //     })
+  //   ]
+  // })
+  const client = createTRPCNuxtClient<AppRouter>({
     transformer: superjson,
     links: [
       // adds pretty logs to your console in development and logs errors in production
-      loggerLink({
-        enabled: opts =>
-          process.env.NODE_ENV === 'development' ||
-          (opts.direction === 'down' && opts.result instanceof Error)
-      }),
+      // loggerLink({
+      //   enabled: opts =>
+      //     process.env.NODE_ENV === 'development' ||
+      //     (opts.direction === 'down' && opts.result instanceof Error)
+      // }),
       httpBatchLink({
-        url: 'http://localhost:3000/api/trpc',
+        url: '/api/trpc',
         headers () {
           return headers
-        }
+        },
+        fetch: (input, options) =>
+          $fetch.raw(input.toString(), options)
+            .catch((e) => {
+              if (e instanceof FetchError && e.response) { return e.response }
+              throw e
+            })
+            .then(response => ({
+              ...response,
+              json: () => Promise.resolve(response._data)
+            }))
       })
     ]
   })