fix: add missing useLazyQuery type

CHANGELOG.md

@@ -1,6 +1,52 @@
 # Changelog
 
 
+## v0.10.10
+
+[compare changes](https://github.com/wobsoriano/trpc-nuxt/compare/v0.10.9...v0.10.10)
+
+### 🚀 Enhancements
+
+- Add useLazyQuery composable ([93cb442](https://github.com/wobsoriano/trpc-nuxt/commit/93cb442))
+
+### ❤️  Contributors
+
+- Wobsoriano ([@wobsoriano](http://github.com/wobsoriano))
+
+## v0.10.9
+
+[compare changes](https://github.com/wobsoriano/trpc-nuxt/compare/v0.10.8...v0.10.9)
+
+### 🚀 Enhancements
+
+- Add custom query key option ([f2bcf9b](https://github.com/wobsoriano/trpc-nuxt/commit/f2bcf9b))
+
+### ❤️  Contributors
+
+- Wobsoriano ([@wobsoriano](http://github.com/wobsoriano))
+
+## v0.10.8
+
+[compare changes](https://github.com/wobsoriano/trpc-nuxt/compare/v0.10.7...v0.10.8)
+
+### 💅 Refactors
+
+- Use built-in getRequestURL from h3 instead of ufo ([252f610](https://github.com/wobsoriano/trpc-nuxt/commit/252f610))
+- Use stand-alone getErrorShape ([3db0b31](https://github.com/wobsoriano/trpc-nuxt/commit/3db0b31))
+
+### 📖 Documentation
+
+- Add handler param description ([f86ebcd](https://github.com/wobsoriano/trpc-nuxt/commit/f86ebcd))
+
+### 📦 Build
+
+- **deps:** Bump h3 to 1.8.0 ([3a395a7](https://github.com/wobsoriano/trpc-nuxt/commit/3a395a7))
+- Bump local deps ([dc317c2](https://github.com/wobsoriano/trpc-nuxt/commit/dc317c2))
+
+### ❤️  Contributors
+
+- Wobsoriano ([@wobsoriano](http://github.com/wobsoriano))
+
 ## v0.10.7
 
 [compare changes](https://github.com/wobsoriano/trpc-nuxt/compare/v0.10.6...v0.10.7)

docs/package.json

@@ -8,7 +8,7 @@
     "preview": "nuxi preview"
   },
   "devDependencies": {
-    "@nuxt-themes/docus": "^1.14.3",
+    "@nuxt-themes/docus": "^1.14.6",
     "@nuxtlabs/github-module": "^1.6.3",
     "nuxt": "3.6.5"
   }

package.json

@@ -3,7 +3,7 @@
   "description": "End-to-end typesafe APIs in Nuxt applications.",
   "type": "module",
   "packageManager": "pnpm@8.6.9",
-  "version": "0.10.7",
+  "version": "0.10.10",
   "license": "MIT",
   "sideEffects": false,
   "exports": {
@@ -39,19 +39,18 @@
     "@trpc/server": "^10.26.0"
   },
   "dependencies": {
-    "h3": "^1.7.1",
+    "h3": "^1.8.0",
     "ofetch": "^1.1.1",
-    "ohash": "^1.1.2",
-    "ufo": "^1.1.2"
+    "ohash": "^1.1.2"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.1.1",
-    "@trpc/client": "^10.35.0",
-    "@trpc/server": "^10.35.0",
+    "@trpc/client": "^10.37.1",
+    "@trpc/server": "^10.37.1",
     "changelogen": "^0.5.4",
     "eslint": "^8.45.0",
     "taze": "^0.11.2",
-    "tsup": "7.1.0",
+    "tsup": "7.2.0",
     "typescript": "^5.1.6"
   },
   "eslintConfig": {
@@ -75,7 +74,9 @@
   ],
   "pnpm": {
     "overrides": {
-      "nuxt": "3.6.5"
+      "nuxt": "3.6.5",
+      "@trpc/client": "10.37.1",
+      "@trpc/server": "10.37.1"
     }
   }
 }

playground/package.json

@@ -9,8 +9,8 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@trpc/client": "^10.35.0",
-    "@trpc/server": "^10.35.0",
+    "@trpc/client": "^10.37.1",
+    "@trpc/server": "^10.37.1",
     "superjson": "^1.13.1",
     "trpc-nuxt": "workspace:*",
     "zod": "^3.21.4"

playground/pages/index.vue

@@ -17,7 +17,7 @@ const addTodo = async () => {
   }
 }
 
-const { data: todos, pending, error, refresh } = await $client.todo.getTodos.useQuery()
+const { data: todos, pending, error, refresh } = await $client.todo.getTodos.useLazyQuery()
 </script>
 
 <template>

src/client/index.ts

@@ -40,8 +40,8 @@ export function createNuxtProxyDecoration<TRouter extends AnyRouter> (name: stri
 
     const [input, otherOptions] = args
 
-    if (lastArg === 'useQuery') {
-      const { trpc, ...asyncDataOptions } = otherOptions || {} as any
+    if (['useQuery', 'useLazyQuery'].includes(lastArg)) {
+      const { trpc, queryKey: customQueryKey, ...asyncDataOptions } = otherOptions || {} as any
 
       let controller: AbortController
 
@@ -54,13 +54,17 @@ export function createNuxtProxyDecoration<TRouter extends AnyRouter> (name: stri
         controller = typeof AbortController !== 'undefined' ? new AbortController() : {} as AbortController
       }
 
-      const queryKey = getQueryKey(path, unref(input))
+      const queryKey = customQueryKey || getQueryKey(path, unref(input))
+      const watch = isRef(input) ? [...(asyncDataOptions.watch || []), input] : asyncDataOptions.watch
+      const isLazy = lastArg === 'useLazyQuery' ? true : (asyncDataOptions.lazy || false)
+  
       return useAsyncData(queryKey, () => (client as any)[path].query(unref(input), {
         signal: controller?.signal,
         ...trpc
       }), {
         ...asyncDataOptions,
-        watch: isRef(input) ? [...(asyncDataOptions.watch || []), input] : asyncDataOptions.watch
+        watch,
+        lazy: isLazy
       })
     }
 

src/client/types.ts

@@ -53,13 +53,36 @@ type DecorateProcedure<
 > = TProcedure extends AnyQueryProcedure
   ? {
       useQuery: <
-      ResT = inferTransformedProcedureOutput<TProcedure>,
-      DataE = TRPCClientErrorLike<TProcedure>,
-      DataT = ResT,
-      PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
+        ResT = inferTransformedProcedureOutput<TProcedure>,
+        DataE = TRPCClientErrorLike<TProcedure>,
+        DataT = ResT,
+        PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
      >(
         input: MaybeRef<inferProcedureInput<TProcedure>>,
-        opts?: AsyncDataOptions<ResT, DataT, PickKeys> & { trpc?: TRPCRequestOptions },
+        opts?: AsyncDataOptions<ResT, DataT, PickKeys> & {
+          trpc?: TRPCRequestOptions
+          /**
+           * The custom unique key to use.
+           * @see https://nuxt.com/docs/api/composables/use-async-data#params
+           */
+          queryKey?: string
+        },
+      ) => AsyncData<PickFrom<DataT, PickKeys> | null, DataE>,
+      useLazyQuery: <
+        ResT = inferTransformedProcedureOutput<TProcedure>,
+        DataE = TRPCClientErrorLike<TProcedure>,
+        DataT = ResT,
+        PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
+     >(
+        input: MaybeRef<inferProcedureInput<TProcedure>>,
+        opts?: Omit<AsyncDataOptions<ResT, DataT, PickKeys>, 'lazy'> & {
+          trpc?: TRPCRequestOptions
+          /**
+           * The custom unique key to use.
+           * @see https://nuxt.com/docs/api/composables/use-async-data#params
+           */
+          queryKey?: string
+        },
       ) => AsyncData<PickFrom<DataT, PickKeys> | null, DataE>,
       query: Resolver<TProcedure>
     } : TProcedure extends AnyMutationProcedure ? {

src/index.ts

@@ -9,10 +9,10 @@ import type {
 import {
   TRPCError
 } from '@trpc/server'
-import { createURL } from 'ufo'
 import type { H3Event } from 'h3'
-import { createError, defineEventHandler, isMethod, readBody } from 'h3'
+import { createError, defineEventHandler, getRequestURL, isMethod, readBody } from 'h3'
 import type { TRPCResponse } from '@trpc/server/rpc'
+import { getErrorShape } from '@trpc/server/shared'
 
 type MaybePromise<T> = T | Promise<T>
 
@@ -40,9 +40,25 @@ export interface OnErrorPayload<TRouter extends AnyRouter> {
 export type OnErrorFn<TRouter extends AnyRouter> = (opts: OnErrorPayload<TRouter>) => void
 
 export interface ResolveHTTPRequestOptions<TRouter extends AnyRouter> {
+  /**
+   * The tRPC router to use.
+   * @see https://trpc.io/docs/router
+   */
   router: TRouter
+  /**
+   * An async function that returns the tRPC context.
+   * @see https://trpc.io/docs/context
+   */
   createContext?: CreateContextFn<TRouter>
+  /**
+   * A function that returns the response meta.
+   * @see https://trpc.io/docs/caching#using-responsemeta-to-cache-responses
+   */
   responseMeta?: ResponseMetaFn<TRouter>
+  /**
+   * A function that is called when an error occurs.
+   * @see https://trpc.io/docs/error-handling#handling-errors
+   */
   onError?: OnErrorFn<TRouter>
   batching?: {
     enabled: boolean
@@ -74,15 +90,16 @@ export function createNuxtApiHandler<TRouter extends AnyRouter> ({
       res
     } = event.node
 
-    const $url = createURL(req.url!)
+    const $url = getRequestURL(event)
 
     const path = getPath(event)
 
     if (path === null) {
-      const error = router.getErrorShape({
+      const error = getErrorShape({
+        config: router._def._config,
         error: new TRPCError({
           message:
-            'Param "trpc" not found - is the file named `[trpc]`.ts or `[...trpc].ts`?',
+            'Query "trpc" not found - is the file named `[trpc]`.ts or `[...trpc].ts`?',
           code: 'INTERNAL_SERVER_ERROR'
         }),
         type: 'unknown',