feat: add reactive inputs

playground/pages/reactive.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const route = useRoute()
+const { $client } = useNuxtApp()
+const id = ref(1)
+// const { data: todo, pending, error } = await useAsyncData(() => $client.todo.getTodo.query(id.value), {
+// watch: [id]
+// })
+
+const { data: todo, pending, error, refresh } = await $client.todo.getTodo.useQuery(id, {
+ watch: [id],
+})
+</script>
+
+<template>
+ <div v-if="pending">
+ Loading...
+ </div>
+ <div v-else-if="error?.data?.code">
+ Error: {{ error.data.code }}
+ </div>
+ <div v-else>
+ ID: {{ todo?.id }} <br>
+ Title: {{ todo?.title }} <br>
+ Completed: {{ todo?.completed }}
+ </div>
+ <button @click="id++">
+ Next Todo
+ </button>
+</template>

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 } from '#imports'
+import { getCurrentInstance, onScopeDispose, useAsyncData, unref } from '#imports'
 
 /**
  * Calculates the key used for `useAsyncData` call.
@@ -54,8 +54,8 @@ export function createNuxtProxyDecoration<TRouter extends AnyRouter> (name: stri
  controller = typeof AbortController !== 'undefined' ? new AbortController() : {} as AbortController
  }
 
- const queryKey = getQueryKey(path, input)
- return useAsyncData(queryKey, () => (client as any)[path].query(input, {
+ const queryKey = getQueryKey(path, unref(input))
+ return useAsyncData(queryKey, () => (client as any)[path].query(unref(input), {
  signal: controller?.signal,
  ...trpc
  }), asyncDataOptions)

src/client/types.ts

@@ -19,6 +19,7 @@ import type {
  KeysOf,
  PickFrom,
 } from 'nuxt/dist/app/composables/asyncData'
+import type { Ref } from 'vue'
 
 interface TRPCRequestOptions extends _TRPCRequestOptions {
  abortOnUnmount?: boolean
@@ -44,6 +45,8 @@ type SubscriptionResolver<
  ]
 ) => Unsubscribable
 
+type MaybeRef<T> = T | Ref<T>
+
 type DecorateProcedure<
  TProcedure extends AnyProcedure,
  TRouter extends AnyRouter,
@@ -55,7 +58,7 @@ type DecorateProcedure<
  DataT = ResT,
  PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
  >(
- input: inferProcedureInput<TProcedure>,
+ input: MaybeRef<inferProcedureInput<TProcedure>>,
  opts?: AsyncDataOptions<ResT, DataT, PickKeys> & { trpc?: TRPCRequestOptions },
  ) => AsyncData<PickFrom<DataT, PickKeys>, DataE>,
  query: Resolver<TProcedure>