feat(vue-colada)!: remove deep ref in input & context options (#238)

to match with other options

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Refactor**
- Simplified value handling by replacing extra reactivity wrappers with
direct and function-based inputs for query and mutation configurations.
- Updated internal processing to streamline how values and contexts are
managed.

- **Tests**
- Revised test cases to align with the new, simplified input and context
handling.
  - Removed legacy tests related to deep reactive reference unwrapping.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: dinwwwh

packages/vue-colada/src/procedure-utils.test-d.ts

@@ -3,7 +3,7 @@ import type { ErrorFromErrorMap } from '@orpc/contract'
 import type { baseErrorMap } from '../../contract/tests/shared'
 import type { ProcedureUtils } from './procedure-utils'
 import { useMutation, useQuery } from '@pinia/colada'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 
 describe('ProcedureUtils', () => {
   type UtilsInput = { search?: string, cursor?: number } | undefined
@@ -63,9 +63,14 @@ describe('ProcedureUtils', () => {
 
     it('works with ref', () => {
       utils.queryOptions({
-        input: computed(() => ({ cursor: ref(1) })),
+        input: computed(() => ({ cursor: 1 })),
         context: computed(() => ({ batch: true })),
       })
+
+      utils.queryOptions({
+        input: () => ({ cursor: 1 }),
+        context: () => ({ batch: true }),
+      })
     })
 
     describe('works with useQuery', () => {
@@ -109,6 +114,16 @@ describe('ProcedureUtils', () => {
       utils.mutationOptions({ context: { batch: 'invalid' } })
     })
 
+    it('works with ref', () => {
+      utils.mutationOptions({
+        context: computed(() => ({ batch: true })),
+      })
+
+      utils.mutationOptions({
+        context: () => ({ batch: true }),
+      })
+    })
+
     it('works with useMutation', () => {
       const mutation = useMutation(utils.mutationOptions({
         onSuccess: (data, input) => {

packages/vue-colada/src/procedure-utils.test.ts

@@ -63,7 +63,7 @@ describe('queryOptions', () => {
     const client = vi.fn((...[input]) => Promise.resolve(input?.toString()))
     const utils = createProcedureUtils(client, { path: ['ping'] })
 
-    const options = utils.queryOptions({ context: { batch: ref(true) } }) as any
+    const options = utils.queryOptions({ context: ref({ batch: true }) }) as any
 
     expect(options.key.value).toEqual(['__mocked__'])
     expect(buildKeySpy).toHaveBeenCalledTimes(1)
@@ -105,7 +105,7 @@ describe('mutationOptions', () => {
     )
     const utils = createProcedureUtils(client, { path: ['ping'] })
 
-    const options = utils.mutationOptions({ context: { batch: ref(true) } }) as any
+    const options = utils.mutationOptions({ context: ref({ batch: true }) }) as any
 
     expect(options.key('__input__')).toEqual(['__mocked__'])
     expect(buildKeySpy).toHaveBeenCalledTimes(1)

packages/vue-colada/src/procedure-utils.ts

@@ -2,9 +2,8 @@ import type { Client, ClientContext } from '@orpc/client'
 import type { MaybeOptionalOptions } from '@orpc/shared'
 import type { _EmptyObject } from '@pinia/colada'
 import type { MutationOptions, MutationOptionsIn, QueryOptions, QueryOptionsIn } from './types'
-import { computed } from 'vue'
+import { computed, toValue } from 'vue'
 import { buildKey } from './key'
-import { unrefDeep } from './utils'
 
 export interface ProcedureUtils<TClientContext extends ClientContext, TInput, TOutput, TError extends Error> {
   call: Client<TClientContext, TInput, TOutput, TError>
@@ -35,16 +34,16 @@ export function createProcedureUtils<TClientContext extends ClientContext, TInpu
 
     queryOptions(...[{ input, context, ...rest } = {}]) {
       return {
-        key: computed(() => buildKey(options.path, { input: unrefDeep(input) })),
-        query: ({ signal }) => client(unrefDeep(input) as any, { signal, context: unrefDeep(context) as any }),
+        key: computed(() => buildKey(options.path, { input: toValue(input) })),
+        query: ({ signal }) => client(toValue(input) as any, { signal, context: toValue(context) as any }),
         ...(rest as any),
       }
     },
 
     mutationOptions(...[{ context, ...rest } = {}]) {
       return {
         key: input => buildKey(options.path, { input }),
-        mutation: input => client(input, { context: unrefDeep(context) as any }),
+        mutation: input => client(input, { context: toValue(context) as any }),
         ...(rest as any),
       }
     },

packages/vue-colada/src/types.test-d.ts

@@ -1,27 +1,19 @@
 import type { ClientContext } from '@orpc/client'
-import type { AnyFunction, SetOptional } from '@orpc/shared'
+import type { SetOptional } from '@orpc/shared'
 import type { UseMutationOptions, UseQueryOptions } from '@pinia/colada'
-import type { MaybeRef } from 'vue'
-
-export type MaybeRefDeep<T> = MaybeRef<
-  T extends AnyFunction
-    ? T
-    : T extends object
-      ? { [K in keyof T]: MaybeRefDeep<T[K]> }
-      : T
->
+import type { MaybeRefOrGetter } from 'vue'
 
 export type UseQueryFnContext = Parameters<UseQueryOptions<any>['query']>[0]
 
 export type QueryOptionsIn<TClientContext extends ClientContext, TInput, TOutput, TError extends Error, TInitialData extends TOutput | undefined> =
-  & (undefined extends TInput ? { input?: MaybeRefDeep<TInput> } : { input: MaybeRefDeep<TInput> })
-  & (Record<never, never> extends TClientContext ? { context?: MaybeRefDeep<TClientContext> } : { context: MaybeRefDeep<TClientContext> })
+  & (undefined extends TInput ? { input?: MaybeRefOrGetter<TInput> } : { input: MaybeRefOrGetter<TInput> })
+  & (Record<never, never> extends TClientContext ? { context?: MaybeRefOrGetter<TClientContext> } : { context: MaybeRefOrGetter<TClientContext> })
   & SetOptional<QueryOptions<TOutput, TError, TInitialData>, 'key' | 'query'>
 
 export type QueryOptions<TOutput, TError extends Error, TInitialData extends TOutput | undefined> = UseQueryOptions<TOutput, TError, TInitialData>
 
 export type MutationOptionsIn<TClientContext extends ClientContext, TInput, TOutput, TError extends Error, TMutationContext extends Record<any, any>> =
-  & (Record<never, never> extends TClientContext ? { context?: MaybeRefDeep<TClientContext> } : { context: MaybeRefDeep<TClientContext> })
+  & (Record<never, never> extends TClientContext ? { context?: MaybeRefOrGetter<TClientContext> } : { context: MaybeRefOrGetter<TClientContext> })
   & SetOptional<UseMutationOptions<TOutput, TInput, TError, TMutationContext>, 'mutation'>
 
 export type MutationOptions<TInput, TOutput, TError extends Error, TMutationContext extends Record<any, any>> = UseMutationOptions<TOutput, TInput, TError, TMutationContext>

packages/vue-colada/src/types.ts

@@ -1,6 +1,6 @@
 import { isDefinedError } from '@orpc/client'
 import { useMutation, useQuery, useQueryCache } from '@pinia/colada'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { orpc as client } from '../../client/tests/shared'
 import { orpc } from './shared'
 
@@ -23,7 +23,7 @@ it('.call', () => {
 describe('.queryOptions', () => {
   it('useQuery', () => {
     const query = useQuery(orpc.ping.queryOptions({
-      input: computed(() => ({ input: ref(123) })),
+      input: computed(() => ({ input: 123 })),
     }))
 
     if (isDefinedError(query.error.value) && query.error.value.code === 'OVERRIDE') {

packages/vue-colada/src/utils.test-d.ts

@@ -18,7 +18,7 @@ it('case: with useQuery', async () => {
       const id = ref(123)
 
       const queryCache = useQueryCache()
-      const query = useQuery(orpc.nested.ping.queryOptions({ input: computed(() => ({ input: id })) }))
+      const query = useQuery(orpc.nested.ping.queryOptions({ input: computed(() => ({ input: id.value })) }))
 
       const setId = (value: number) => {
         id.value = value