feat: pass input to watched sources if it's a ref

wobsoriano · May 27, 2023 · 892d167 · 892d167
1 parent e15ea6b
commit 892d167
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/playground/pages/reactive.vue b/playground/pages/reactive.vue
@@ -6,9 +6,7 @@ const id = ref(1)
 //   watch: [id]
 // })
 
-const { data: todo, pending, error, refresh } = await $client.todo.getTodo.useQuery(id, {
-  watch: [id],
-})
+const { data: todo, pending, error, refresh } = await $client.todo.getTodo.useQuery(id)
 </script>
 
 <template>

diff --git a/src/client/index.ts b/src/client/index.ts
@@ -4,7 +4,7 @@ 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 } from '#imports'
+import { getCurrentInstance, onScopeDispose, useAsyncData, unref, isRef } from '#imports'
 
 /**
  * Calculates the key used for `useAsyncData` call.
@@ -58,7 +58,10 @@ export function createNuxtProxyDecoration<TRouter extends AnyRouter> (name: stri
       return useAsyncData(queryKey, () => (client as any)[path].query(unref(input), {
         signal: controller?.signal,
         ...trpc
-      }), asyncDataOptions)
+      }), {
+        ...asyncDataOptions,
+        watch: isRef(input) ? [...(asyncDataOptions.watch || []), input] : asyncDataOptions.watch
+      })
     }
 
     return (client as any)[path][lastArg](...args)