diff --git a/docs/content/1.get-started/5.tips/7.mutation.md b/docs/content/1.get-started/5.tips/7.mutation.md
index b2e04c5..910dc5f 100644
--- a/docs/content/1.get-started/5.tips/7.mutation.md
+++ b/docs/content/1.get-started/5.tips/7.mutation.md
@@ -10,17 +10,21 @@ The example below shows how you can use Nuxt's [`useNuxtData`](https://nuxt.com/
 <script setup lang="ts">
 const { $client } = useNuxtApp()
 
-const { data } = await $client.getTodos.useQuery(undefined, { queryKey: 'todos' });
+const { data } = await $client.getTodos.useQuery(undefined);
 </script>
 ```
 
 ```vue [components/NewTodo.vue]
 <script setup lang="ts">
+import { getQueryKey } from 'trpc-nuxt/client'
+
 const { $client } = useNuxtApp()
 const previousTodos = ref([])
 
+const queryKey = getQueryKey($client.getTodos, undefined)
+
 // Access to the cached value of useQuery in todos.vue
-const { data: todos } = useNuxtData('todos')
+const { data: todos } = useNuxtData(queryKey)
 
 async function addTodo(payload) {
   // Store the previously cached value to restore if mutation fails.
@@ -32,7 +36,7 @@ async function addTodo(payload) {
   try {
     await $client.addTodo.mutate(payload)
     // Invalidate todos in the background if the mutation succeeded.
-    await refreshNuxtData('todos')
+    await refreshNuxtData(queryKey)
   } catch {
     // Rollback the data if the mutation failed.
     todos.value = previousTodos.value 
diff --git a/package.json b/package.json
index 3a510b0..93f9125 100644
--- a/package.json
+++ b/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"
     }
   }
 }
diff --git a/playground/package.json b/playground/package.json
index 38754e7..c25845a 100644
--- a/playground/package.json
+++ b/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"
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index f116ae6..8b12476 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -1,23 +1,28 @@
 <script setup lang="ts">
+import { getQueryKey } from 'trpc-nuxt/client'
+
 const { $client } = useNuxtApp()
 
+const todosKey = getQueryKey($client.todo.getTodos, 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
diff --git a/playground/server/trpc/routers/todo.ts b/playground/server/trpc/routers/todo.ts
index b8f2bad..ac8cc88 100644
--- a/playground/server/trpc/routers/todo.ts
+++ b/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())
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 88770b2..d2685ac 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,8 +6,8 @@ settings:
 
 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
 
 importers:
 
@@ -27,10 +27,10 @@ importers:
         specifier: ^0.2.0
         version: 0.2.0(eslint@8.52.0)
       '@trpc/client':
-        specifier: ^10.41.0
+        specifier: ^10.44.1
         version: 10.44.1(@trpc/server@10.44.1)
       '@trpc/server':
-        specifier: ^10.41.0
+        specifier: ^10.44.1
         version: 10.44.1
       changelogen:
         specifier: ^0.5.5
@@ -63,10 +63,10 @@ importers:
   playground:
     dependencies:
       '@trpc/client':
-        specifier: ^10.41.0
+        specifier: ^10.44.1
         version: 10.44.1(@trpc/server@10.44.1)
       '@trpc/server':
-        specifier: ^10.41.0
+        specifier: ^10.44.1
         version: 10.44.1
       superjson:
         specifier: ^2.1.0
@@ -3026,7 +3026,7 @@ packages:
   /@trpc/client@10.44.1(@trpc/server@10.44.1):
     resolution: {integrity: sha512-vTWsykNcgz1LnwePVl2fKZnhvzP9N3GaaLYPkfGINo314ZOS0OBqe9x0ytB2LLUnRVTAAZ2WoONzARd8nHiqrA==}
     peerDependencies:
-      '@trpc/server': ^10.41.0
+      '@trpc/server': ^10.44.1
     dependencies:
       '@trpc/server': 10.44.1
 
diff --git a/src/client/decorationProxy.ts b/src/client/decorationProxy.ts
new file mode 100644
index 0000000..76e1099
--- /dev/null
+++ b/src/client/decorationProxy.ts
@@ -0,0 +1,58 @@
+import { type inferRouterProxyClient } from '@trpc/client'
+import { type AnyRouter } from '@trpc/server'
+import { createRecursiveProxy } from '@trpc/server/shared'
+// @ts-expect-error: Nuxt auto-imports
+import { getCurrentInstance, onScopeDispose, useAsyncData, unref, isRef } from '#imports'
+import { getQueryKeyInternal } from './getQueryKey'
+
+export 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 `.useMutation` or `.useQuery()`
+    const lastArg = pathCopy.pop()!
+
+    // The `path` ends up being something like `post.byId`
+    const path = pathCopy.join('.')
+
+    const [input, otherOptions] = args
+
+    if (lastArg === '_def') {
+      return {
+        path: pathCopy,
+      };
+    }
+
+    if (['useQuery', 'useLazyQuery'].includes(lastArg)) {
+      const { trpc, queryKey: customQueryKey, ...asyncDataOptions } = otherOptions || {} as any
+
+      let controller: AbortController
+
+      if (trpc?.abortOnUnmount) {
+        if (getCurrentInstance()) {
+          onScopeDispose(() => {
+            controller?.abort?.()
+          })
+        }
+        controller = typeof AbortController !== 'undefined' ? new AbortController() : {} as AbortController
+      }
+
+      const queryKey = customQueryKey || getQueryKeyInternal(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,
+        lazy: isLazy
+      })
+    }
+    
+    return (client as any)[path][lastArg](...args)
+  })
+}
diff --git a/src/client/getQueryKey.ts b/src/client/getQueryKey.ts
new file mode 100644
index 0000000..a3bcb9a
--- /dev/null
+++ b/src/client/getQueryKey.ts
@@ -0,0 +1,57 @@
+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>;
+
+/**
+ * Method to extract the query key for a procedure
+ * @param procedure - procedure
+ * @param input - input to procedure
+ * @link https://trpc-nuxt.vercel.app/get-started/tips/mutation
+ */
+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 || '')}`
+}
diff --git a/src/client/index.ts b/src/client/index.ts
index 3e01ae6..8527a82 100644
--- a/src/client/index.ts
+++ b/src/client/index.ts
@@ -1,76 +1,11 @@
-import { type CreateTRPCClientOptions, type inferRouterProxyClient, createTRPCProxyClient } from '@trpc/client'
+import { type CreateTRPCClientOptions, createTRPCProxyClient } from '@trpc/client'
 import { type AnyRouter } from '@trpc/server'
-import { createFlatProxy, createRecursiveProxy } from '@trpc/server/shared'
-import { hash } from 'ohash'
+import { createFlatProxy } from '@trpc/server/shared'
 import { type DecoratedProcedureRecord } from './types'
-// @ts-expect-error: Nuxt auto-imports
-import { getCurrentInstance, onScopeDispose, useAsyncData, unref, isRef } from '#imports'
+import { getQueryKey } from './getQueryKey'
+import { createNuxtProxyDecoration } from './decorationProxy'
 
-/**
- * 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 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 `.useMutation` or `.useQuery()`
-    const lastArg = pathCopy.pop()!
-
-    // The `path` ends up being something like `post.byId`
-    const path = pathCopy.join('.')
-
-    const [input, otherOptions] = args
-
-    if (['useQuery', 'useLazyQuery'].includes(lastArg)) {
-      const { trpc, queryKey: customQueryKey, ...asyncDataOptions } = otherOptions || {} as any
-
-      let controller: AbortController
-
-      if (trpc?.abortOnUnmount) {
-        if (getCurrentInstance()) {
-          onScopeDispose(() => {
-            controller?.abort?.()
-          })
-        }
-        controller = typeof AbortController !== 'undefined' ? new AbortController() : {} as AbortController
-      }
-
-      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,
-        lazy: isLazy
-      })
-    }
-
-    return (client as any)[path][lastArg](...args)
-  })
-}
+export { getQueryKey }
 
 export function createTRPCNuxtClient<TRouter extends AnyRouter> (opts: CreateTRPCClientOptions<TRouter>) {
   const client = createTRPCProxyClient<TRouter>(opts)
diff --git a/src/client/types.ts b/src/client/types.ts
index abedebe..8383c66 100644
--- a/src/client/types.ts
+++ b/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