Merge pull request #131 from wobsoriano/mutations

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 

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($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

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/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)
+  })
+}

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 || '')}`
+}

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)

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