use trpc url options in api

package.json

@@ -38,6 +38,7 @@
     "@nuxt/kit": "^3.0.0-rc.3",
     "@trpc/client": "^9.23.3",
     "@trpc/server": "^9.23.2",
+    "defu": "^6.0.0",
     "fs-extra": "^10.1.0",
     "h3": "^0.7.8",
     "pathe": "^0.3.0",

playground/app.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const { data, pending, error } = await useAsyncQuery(['getUser', { username: 'jcena' }], {
-  lazy: true,
+  lazy: false,
+  transform: data => data || null,
 })
 </script>
 

pnpm-lock.yaml

@@ -12,6 +12,7 @@ importers:
       '@trpc/server': ^9.23.2
       '@types/fs-extra': ^9.0.13
       bumpp: ^7.1.1
+      defu: ^6.0.0
       eslint: ^8.14.0
       fs-extra: ^10.1.0
       h3: ^0.7.8
@@ -27,6 +28,7 @@ importers:
       '@nuxt/kit': 3.0.0-rc.3
       '@trpc/client': 9.23.4_@trpc+server@9.23.4
       '@trpc/server': 9.23.4
+      defu: 6.0.0
       fs-extra: 10.1.0
       h3: 0.7.8
       pathe: 0.3.0

src/module.ts

@@ -1,5 +1,6 @@
 import { fileURLToPath } from 'url'
 import { dirname, join } from 'pathe'
+import { defu } from 'defu'
 
 import { addServerHandler, defineNuxtModule } from '@nuxt/kit'
 import fs from 'fs-extra'
@@ -25,8 +26,14 @@ export default defineNuxtModule<ModuleOptions>({
     const clientPath = join(nuxt.options.buildDir, 'trpc-client.ts')
     const handlerPath = join(nuxt.options.buildDir, 'trpc-handler.ts')
 
+    // Final resolved configuration
+    const finalConfig = nuxt.options.runtimeConfig.public.trpc = defu(nuxt.options.runtimeConfig.public.trpc, {
+      baseURL: options.baseURL,
+      trpcURL: options.trpcURL,
+    })
+
     addServerHandler({
-      route: `${options.trpcURL}/*`,
+      route: `${finalConfig.trpcURL}/*`,
       handler: handlerPath,
     })
 
@@ -44,7 +51,7 @@ export default defineNuxtModule<ModuleOptions>({
       import type { router } from '~/server/trpc'
 
       const client = trpc.createTRPCClient<typeof router>({
-        url: '${options.baseURL}${options.trpcURL}',
+        url: '${finalConfig.baseURL}${finalConfig.trpcURL}',
       })
     
       export const useClient = () => client
@@ -52,9 +59,15 @@ export default defineNuxtModule<ModuleOptions>({
 
     await fs.writeFile(handlerPath, `
       import { createTRPCHandler } from 'trpc-nuxt/api'
+      import { useRuntimeConfig } from '#imports'
       import * as functions from '~/server/trpc'
 
-      export default createTRPCHandler(functions)
+      const { trpc: { trpcURL } } = useRuntimeConfig().public
+
+      export default createTRPCHandler({
+        ...functions,
+        trpcURL 
+      })
     `)
   },
 })

src/runtime/api.ts

@@ -42,14 +42,14 @@ export function createTRPCHandler<Router extends AnyRouter>({
   createContext,
   responseMeta,
   onError,
+  trpcURL,
 }: {
   router: Router
   createContext?: CreateContextFn<Router>
   responseMeta?: ResponseMetaFn<Router>
   onError?: OnErrorFn<Router>
+  trpcURL: string
 }) {
-  const url = '/api/trpc'
-
   return defineEventHandler(async (event) => {
     const {
       req,
@@ -68,7 +68,7 @@ export function createTRPCHandler<Router extends AnyRouter>({
         body: isMethod(event, 'GET') ? null : await useBody(event),
         query: $url.searchParams,
       },
-      path: $url.pathname.substring(url.length + 1),
+      path: $url.pathname.substring(trpcURL.length + 1),
       createContext: async () => createContext?.(event),
       responseMeta,
       onError: (o) => {