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