feat: getQueryKey helper

package.json

@@ -45,8 +45,8 @@
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.2.0",
-    "@trpc/client": "^10.41.0",
-    "@trpc/server": "^10.41.0",
+    "@trpc/client": "^10.44.1",
+    "@trpc/server": "^10.44.1",
     "changelogen": "^0.5.5",
     "eslint": "^8.52.0",
     "taze": "^0.11.4",
@@ -75,8 +75,8 @@
   "pnpm": {
     "overrides": {
       "nuxt": "3.8.0",
-      "@trpc/client": "^10.41.0",
-      "@trpc/server": "^10.41.0"
+      "@trpc/client": "^10.44.1",
+      "@trpc/server": "^10.44.1"
     }
   }
 }

playground/package.json

@@ -9,8 +9,8 @@
     "postinstall": "nuxi prepare"
   },
   "dependencies": {
-    "@trpc/client": "^10.41.0",
-    "@trpc/server": "^10.41.0",
+    "@trpc/client": "^10.44.1",
+    "@trpc/server": "^10.44.1",
     "superjson": "^2.1.0",
     "trpc-nuxt": "workspace:*",
     "zod": "^3.22.4"

playground/pages/index.vue

@@ -1,23 +1,28 @@
 <script setup lang="ts">
+import { getQueryKey } from 'trpc-nuxt/client'
+
 const { $client } = useNuxtApp()
 
+const todosKey = getQueryKey('asd', undefined)
+const { data } = useNuxtData(todosKey)
+
+const { data: todos, pending, error, refresh } = await $client.todo.getTodos.useQuery()
+
 const addTodo = async () => {
   const title = Math.random().toString(36).slice(2, 7)
-
+  const newData = {
+    id: Date.now(),
+    userId: 69,
+    title,
+    completed: false
+  }
+  data.value.push(newData)
   try {
-    const x = await $client.todo.addTodo.mutate({
-      id: Date.now(),
-      userId: 69,
-      title,
-      completed: false
-    })
-    console.log(x)
+    const x = await $client.todo.addTodo.mutate(newData)
   } catch (e) {
     console.log(e)
   }
 }
-
-const { data: todos, pending, error, refresh } = await $client.todo.getTodos.useLazyQuery()
 </script>
 
 <template>
@@ -31,7 +36,7 @@ const { data: todos, pending, error, refresh } = await $client.todo.getTodos.use
     <div v-else>
       <ul>
         <li
-          v-for="t in todos?.slice(0, 10)"
+          v-for="t in todos"
           :key="t.id"
         >
           <NuxtLink

playground/server/trpc/routers/todo.ts

@@ -16,7 +16,7 @@ export type Todo = z.infer<typeof TodoShape>
 export const todoRouter = router({
   getTodos: publicProcedure
     .query(() => {
-      return $fetch<Todo[]>(`${baseURL}/todos`)
+      return $fetch<Todo[]>(`${baseURL}/todos?_limit=5`)
     }),
   getTodo: publicProcedure
     .input(z.number())

src/client/getQueryKey.ts

@@ -0,0 +1,51 @@
+import {
+  AnyQueryProcedure,
+  AnyRouter,
+  DeepPartial,
+  inferProcedureInput,
+} from '@trpc/server';
+import { hash } from 'ohash'
+import { DecorateProcedure } from './types';
+
+export type GetQueryParams<
+  TProcedureOrRouter extends AnyQueryProcedure,
+  TProcedureInput = inferProcedureInput<TProcedureOrRouter>,
+> = DeepPartial<TProcedureInput>;
+
+type GetParams<
+  TProcedureOrRouter extends AnyQueryProcedure,
+> = [
+  procedureOrRouter: DecorateProcedure<TProcedureOrRouter, AnyRouter> | string,
+  params: GetQueryParams<TProcedureOrRouter>,
+];
+
+type GetQueryKeyParams<
+  TProcedureOrRouter extends AnyQueryProcedure,
+> = GetParams<TProcedureOrRouter>;
+
+export function getQueryKey<
+  TProcedure extends AnyQueryProcedure,
+>(..._params: GetQueryKeyParams<TProcedure>): string {
+  const [procedure, input] = _params;
+
+  if (typeof procedure === 'string') {
+    // TODO: Warn here if string is passed that it will be deprecated in the future.
+    return getQueryKeyInternal(procedure, input);
+  }
+
+  // @ts-expect-error: we don't expose _def on the type layer
+  const path = procedure._def().path as string[];
+  const dotPath = path.join('.');
+
+  return getQueryKeyInternal(dotPath, input)
+}
+
+/**
+ * @internal
+ */
+export function getQueryKeyInternal (
+  path: string,
+  input: unknown
+): string {
+  return input === undefined ? path : `${path}-${hash(input || '')}`
+}

src/client/index.ts

@@ -1,30 +1,12 @@
 import { type CreateTRPCClientOptions, type inferRouterProxyClient, createTRPCProxyClient } from '@trpc/client'
 import { type AnyRouter } from '@trpc/server'
 import { createFlatProxy, createRecursiveProxy } from '@trpc/server/shared'
-import { hash } from 'ohash'
 import { type DecoratedProcedureRecord } from './types'
 // @ts-expect-error: Nuxt auto-imports
 import { getCurrentInstance, onScopeDispose, useAsyncData, unref, isRef } from '#imports'
+import { getQueryKeyInternal, getQueryKey } from './getQueryKey'
 
-/**
- * Calculates the key used for `useAsyncData` call.
- *
- * @example
- *
- * ```ts
- * import { getQueryKey } from 'trpc-nuxt/client'
- *
- * $client.todo.getTodo(1)
- * 
- * const queryKey = getQueryKey('todo.getTodo', 1)
- * ```
- */
-export function getQueryKey (
-  path: string,
-  input: unknown
-): string {
-  return input === undefined ? path : `${path}-${hash(input || '')}`
-}
+export { getQueryKey }
 
 export function createNuxtProxyDecoration<TRouter extends AnyRouter> (name: string, client: inferRouterProxyClient<TRouter>) {
   return createRecursiveProxy((opts) => {
@@ -40,6 +22,12 @@ export function createNuxtProxyDecoration<TRouter extends AnyRouter> (name: stri
 
     const [input, otherOptions] = args
 
+    if (lastArg === '_def') {
+      return {
+        path: pathCopy,
+      };
+    }
+
     if (['useQuery', 'useLazyQuery'].includes(lastArg)) {
       const { trpc, queryKey: customQueryKey, ...asyncDataOptions } = otherOptions || {} as any
 
@@ -54,7 +42,7 @@ export function createNuxtProxyDecoration<TRouter extends AnyRouter> (name: stri
         controller = typeof AbortController !== 'undefined' ? new AbortController() : {} as AbortController
       }
 
-      const queryKey = customQueryKey || getQueryKey(path, unref(input))
+      const queryKey = customQueryKey || getQueryKeyInternal(path, unref(input))
       const watch = isRef(input) ? [...(asyncDataOptions.watch || []), input] : asyncDataOptions.watch
       const isLazy = lastArg === 'useLazyQuery' ? true : (asyncDataOptions.lazy || false)
 
@@ -67,7 +55,7 @@ export function createNuxtProxyDecoration<TRouter extends AnyRouter> (name: stri
         lazy: isLazy
       })
     }
-
+    
     return (client as any)[path][lastArg](...args)
   })
 }

src/client/types.ts

@@ -47,7 +47,7 @@ type SubscriptionResolver<
 
 type MaybeRef<T> = T | Ref<T>
 
-type DecorateProcedure<
+export type DecorateProcedure<
   TProcedure extends AnyProcedure,
   TRouter extends AnyRouter,
 > = TProcedure extends AnyQueryProcedure