chore: pass getters to watch property

wobsoriano · Feb 6, 2024 · 5a0c33d · 5a0c33d
1 parent ab14672
commit 5a0c33d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/playground/pages/reactive.vue b/playground/pages/reactive.vue
@@ -6,7 +6,7 @@ const id = ref(1)
 //   watch: [id]
 // })
 
-const { data: todo, pending, error, refresh } = await $client.todo.getTodo.useQuery(id)
+const { data: todo, pending, error, refresh } = await $client.todo.getTodo.useQuery(() => id.value)
 </script>
 
 <template>
@@ -22,6 +22,6 @@ const { data: todo, pending, error, refresh } = await $client.todo.getTodo.useQu
     Completed: {{ todo?.completed }}
   </div>
   <button @click="id++">
-    Next Todo
+    Next Todo {{ id }}
   </button>
 </template>
diff --git a/src/client/decorationProxy.ts b/src/client/decorationProxy.ts
@@ -5,6 +5,10 @@ import { createRecursiveProxy } from '@trpc/server/shared'
 import { getCurrentInstance, onScopeDispose, useAsyncData, toValue, ref, isRef, toRaw } from '#imports'
 import { getQueryKeyInternal } from './getQueryKey'
 
+function isRefOrGetter<T>(val: T): boolean {
+  return isRef(val) || typeof val === 'function';
+}
+
 function createAbortController(trpc: any) {
   let controller: AbortController | undefined;
 
@@ -46,7 +50,7 @@ export function createNuxtProxyDecoration<TRouter extends AnyRouter> (name: stri
       const controller = createAbortController(trpc);
 
       const queryKey = customQueryKey || getQueryKeyInternal(path, toValue(input))
-      const watch = isRef(input) ? [...(asyncDataOptions.watch || []), input] : asyncDataOptions.watch
+      const watch = isRefOrGetter(input) ? [...(asyncDataOptions.watch || []), input] : asyncDataOptions.watch
       const isLazy = lastArg === 'useLazyQuery' ? true : (asyncDataOptions.lazy || false)
 
       return useAsyncData(queryKey, () => (client as any)[path].query(toValue(input), {