feat(colada): partial input key support (#514)

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

## Summary by CodeRabbit

- **Documentation**
- Added a warning to the Pinia Colada integration guide, notifying users
about its unstable status and potential for breaking changes.

- **New Features**
- Enhanced key generation to include a type property, distinguishing
between 'query' and 'mutation' operations.

- **Bug Fixes**
- Improved handling and serialization of input data for key generation,
ensuring more consistent and structured output.

- **Chores**
- Updated `@pinia/colada` dependency versions to `^0.16.0` across
relevant packages.
- Adjusted type assertions and test expectations to align with updated
key structure and input handling.

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

Author: dinwwwh

apps/content/docs/pinia-colada.md

@@ -11,6 +11,10 @@ description: Seamlessly integrate oRPC with Pinia Colada
 This documentation assumes you are already familiar with [Pinia Colada](https://pinia-colada.esm.dev/). If you need a refresher, please review the official Pinia Colada documentation before proceeding.
 :::
 
+::: warning
+[Pinia Colada](https://pinia-colada.esm.dev/) is still in an unstable stage. As a result, oRPC's integration with Pinia Colada may introduce breaking changes in the future to keep up with its ongoing development.
+:::
+
 ## Installation
 
 ::: code-group

apps/content/package.json

@@ -21,7 +21,7 @@
     "@orpc/vue-colada": "workspace:*",
     "@orpc/vue-query": "workspace:*",
     "@orpc/zod": "workspace:*",
-    "@pinia/colada": "^0.15.3",
+    "@pinia/colada": "^0.16.0",
     "@shikijs/vitepress-twoslash": "^3.0.0",
     "@tanstack/react-query": "^5.75.7",
     "@tanstack/solid-query": "^5.72.3",

packages/vue-colada/package.json

@@ -38,15 +38,15 @@
     "type:check": "tsc -b"
   },
   "peerDependencies": {
-    "@pinia/colada": ">=0.13.5",
+    "@pinia/colada": ">=0.16.0",
     "vue": ">=3.3.0"
   },
   "dependencies": {
     "@orpc/client": "workspace:*",
     "@orpc/shared": "workspace:*"
   },
   "devDependencies": {
-    "@pinia/colada": "^0.15.3",
+    "@pinia/colada": "^0.16.0",
     "pinia": "^3.0.2",
     "vue": "^3.5.14"
   }

packages/vue-colada/src/key.test.ts

@@ -2,14 +2,14 @@ import { buildKey } from './key'
 
 describe('buildKey', () => {
   it('works', () => {
-    expect(buildKey(['path'])).toEqual(['path'])
-    expect(buildKey(['path', 'path2'], { input: { a: 1 } }))
-      .toEqual(['path', 'path2', { input: '{"json":{"a":1},"meta":[]}' }])
-    expect(buildKey(['path'], { input: undefined }))
-      .toEqual(['path'])
+    expect(buildKey(['path'])).toEqual([['path'], {}])
+    expect(buildKey(['path', 'path2'], { input: { a: 1 } })).toEqual([['path', 'path2'], { input: { a: 1 } }])
+    expect(buildKey(['path'], { input: undefined })).toEqual([['path'], {}])
+    expect(buildKey(['path', 'path2'], { type: 'query' })).toEqual([['path', 'path2'], { type: 'query' }])
+    expect(buildKey(['path'], { type: undefined })).toEqual([['path'], {}])
+    expect(buildKey(['path', 'path2'], { type: 'query', input: { a: 1 } })).toEqual([['path', 'path2'], { type: 'query', input: { a: 1 } }])
 
     const date = new Date()
-    expect(buildKey(['path', 'path2'], { input: { a: date } }))
-      .toEqual(['path', 'path2', { input: `{"json":{"a":"${date.toISOString()}"},"meta":[[1,"a"]]}` }])
+    expect(buildKey(['path', 'path2'], { input: { a: date } })).toEqual([['path', 'path2'], { input: { a: date.toISOString() } }])
   })
 })

packages/vue-colada/src/key.ts

@@ -1,23 +1,26 @@
+import type { PartialDeep } from '@orpc/shared'
 import type { EntryKey } from '@pinia/colada'
 import { StandardRPCJsonSerializer } from '@orpc/client/standard'
-import { stringifyJSON } from '@orpc/shared'
 
 export interface BuildKeyOptions<TInput> {
-  input?: TInput
+  type?: 'query' | 'mutation'
+  input?: PartialDeep<TInput>
 }
 
 export function buildKey<TInput>(
   path: string[],
-  options?: BuildKeyOptions<TInput>,
+  options: BuildKeyOptions<TInput> = {},
 ): EntryKey {
-  if (options?.input === undefined) {
-    return path
-  }
+  const [json] = new StandardRPCJsonSerializer().serialize(options.input)
 
-  const [json, meta] = new StandardRPCJsonSerializer().serialize(options.input)
+  const withInput = json !== undefined ? { input: json } : {}
+  const withType = options.type !== undefined ? { type: options.type } : {}
 
   return [
-    ...path,
-    { input: stringifyJSON({ json, meta }) },
+    path,
+    {
+      ...withInput,
+      ...withType as any,
+    },
   ]
 }

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

@@ -8,9 +8,7 @@ const controller = new AbortController()
 const signal = controller.signal
 
 beforeEach(() => {
-  buildKeySpy.mockClear()
-
-  buildKeySpy.mockReturnValue(['__mocked__'])
+  vi.clearAllMocks()
 })
 
 it('.call', () => {
@@ -35,9 +33,9 @@ describe('queryOptions', () => {
   it('works', async () => {
     const options = utils.queryOptions({ input: 1 }) as any
 
-    expect(options.key.value).toEqual(['__mocked__'])
+    expect(options.key.value).toBe(buildKeySpy.mock.results[0]!.value)
     expect(buildKeySpy).toHaveBeenCalledTimes(1)
-    expect(buildKeySpy).toHaveBeenCalledWith(['ping'], { input: 1 })
+    expect(buildKeySpy).toHaveBeenCalledWith(['ping'], { input: 1, type: 'query' })
 
     client.mockResolvedValueOnce('__mocked__')
     await expect((options as any).query({ signal })).resolves.toEqual('__mocked__')
@@ -49,9 +47,9 @@ describe('queryOptions', () => {
     const input = ref(1)
     const options = utils.queryOptions({ input }) as any
 
-    expect(options.key.value).toEqual(['__mocked__'])
+    expect(options.key.value).toBe(buildKeySpy.mock.results[0]!.value)
     expect(buildKeySpy).toHaveBeenCalledTimes(1)
-    expect(buildKeySpy).toHaveBeenCalledWith(['ping'], { input: 1 })
+    expect(buildKeySpy).toHaveBeenCalledWith(['ping'], { input: 1, type: 'query' })
 
     client.mockResolvedValueOnce('__mocked__')
     await expect((options as any).query({ signal })).resolves.toEqual('__mocked__')
@@ -65,9 +63,9 @@ describe('queryOptions', () => {
 
     const options = utils.queryOptions({ context: ref({ batch: true }) }) as any
 
-    expect(options.key.value).toEqual(['__mocked__'])
+    expect(options.key.value).toBe(buildKeySpy.mock.results[0]!.value)
     expect(buildKeySpy).toHaveBeenCalledTimes(1)
-    expect(buildKeySpy).toHaveBeenCalledWith(['ping'], { })
+    expect(buildKeySpy).toHaveBeenCalledWith(['ping'], { type: 'query' })
 
     client.mockResolvedValueOnce('__mocked__')
     await expect((options as any).query({ signal })).resolves.toEqual('__mocked__')
@@ -89,9 +87,9 @@ describe('mutationOptions', () => {
   it('works', async () => {
     const options = utils.mutationOptions() as any
 
-    expect(options.key('__input__')).toEqual(['__mocked__'])
+    expect(options.key('__input__')).toBe(buildKeySpy.mock.results[0]!.value)
     expect(buildKeySpy).toHaveBeenCalledTimes(1)
-    expect(buildKeySpy).toHaveBeenCalledWith(['ping'], { input: '__input__' })
+    expect(buildKeySpy).toHaveBeenCalledWith(['ping'], { input: '__input__', type: 'mutation' })
 
     client.mockResolvedValueOnce('__mocked__')
     await expect(options.mutation(1)).resolves.toEqual('__mocked__')
@@ -107,9 +105,9 @@ describe('mutationOptions', () => {
 
     const options = utils.mutationOptions({ context: ref({ batch: true }) }) as any
 
-    expect(options.key('__input__')).toEqual(['__mocked__'])
+    expect(options.key('__input__')).toBe(buildKeySpy.mock.results[0]!.value)
     expect(buildKeySpy).toHaveBeenCalledTimes(1)
-    expect(buildKeySpy).toHaveBeenCalledWith(['ping'], { input: '__input__' })
+    expect(buildKeySpy).toHaveBeenCalledWith(['ping'], { input: '__input__', type: 'mutation' })
 
     client.mockResolvedValueOnce('__mocked__')
     await expect(options.mutation(1)).resolves.toEqual('__mocked__')

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

@@ -22,7 +22,7 @@ export interface ProcedureUtils<TClientContext extends ClientContext, TInput, TO
     ...rest: MaybeOptionalOptions<
       QueryOptionsIn<TClientContext, TInput, TOutput, TError, UInitialData>
     >
-  ): QueryOptions<TOutput, TError, UInitialData>
+  ): NoInfer<QueryOptions<TOutput, TError, UInitialData>>
 
   /**
    * Generate options used for useMutation/...
@@ -33,7 +33,7 @@ export interface ProcedureUtils<TClientContext extends ClientContext, TInput, TO
     ...rest: MaybeOptionalOptions<
       MutationOptionsIn<TClientContext, TInput, TOutput, TError, UMutationContext>
     >
-  ): MutationOptions<TInput, TOutput, TError, UMutationContext>
+  ): NoInfer<MutationOptions<TInput, TOutput, TError, UMutationContext>>
 }
 
 export interface CreateProcedureUtilsOptions {
@@ -49,15 +49,15 @@ export function createProcedureUtils<TClientContext extends ClientContext, TInpu
 
     queryOptions(...[{ input, context, ...rest } = {}]) {
       return {
-        key: computed(() => buildKey(options.path, { input: toValue(input) })),
+        key: computed(() => buildKey(options.path, { type: 'query', input: toValue(input) as any })),
         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 }),
+        key: input => buildKey(options.path, { type: 'mutation', input: input as any }),
         mutation: input => client(input, { context: toValue(context) as any }),
         ...(rest as any),
       }

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

@@ -9,23 +9,23 @@ import type { RouterUtils } from './router-utils'
 it('RouterUtils', () => {
   const utils = {} as RouterUtils<RouterClient<typeof router, { batch?: boolean }>>
 
-  expectTypeOf(utils).toMatchTypeOf<GeneralUtils<unknown>>()
-  expectTypeOf(utils.nested).toMatchTypeOf<GeneralUtils<unknown>>()
+  expectTypeOf(utils).toExtend<GeneralUtils<unknown>>()
+  expectTypeOf(utils.nested).toExtend<GeneralUtils<unknown>>()
 
-  expectTypeOf(utils.ping).toMatchTypeOf<GeneralUtils<{ input: number }>>()
-  expectTypeOf(utils.nested.ping).toMatchTypeOf<GeneralUtils<{ input: number }>>()
+  expectTypeOf(utils.ping).toExtend<GeneralUtils<{ input: number }>>()
+  expectTypeOf(utils.nested.ping).toExtend<GeneralUtils<{ input: number }>>()
 
-  expectTypeOf(utils.ping).toMatchTypeOf<
+  expectTypeOf(utils.ping).toExtend<
     ProcedureUtils<{ batch?: boolean }, { input: number }, { output: string }, ErrorFromErrorMap<typeof baseErrorMap>>
   >()
-  expectTypeOf(utils.nested.ping).toMatchTypeOf<
+  expectTypeOf(utils.nested.ping).toExtend<
     ProcedureUtils<{ batch?: boolean }, { input: number }, { output: string }, ErrorFromErrorMap<typeof baseErrorMap>>
   >()
 
-  expectTypeOf(utils.pong).toMatchTypeOf<
+  expectTypeOf(utils.pong).toExtend<
     ProcedureUtils<{ batch?: boolean }, unknown, unknown, Error>
   >()
-  expectTypeOf(utils.nested.pong).toMatchTypeOf<
+  expectTypeOf(utils.nested.pong).toExtend<
     ProcedureUtils<{ batch?: boolean }, unknown, unknown, Error>
   >()
 })

packages/vue-colada/tests/e2e.test.tsx

@@ -49,7 +49,7 @@ it('case: with useQuery', async () => {
   await vi.waitFor(() => expect(mounted.vm.query.data.value).toEqual({ output: '123' }))
 
   expect(
-    mounted.vm.queryCache.getQueryData(orpc.nested.ping.key({ input: { input: 123 } })),
+    mounted.vm.queryCache.getQueryData(orpc.nested.ping.key({ type: 'query', input: { input: 123 } })),
   ).toEqual({ output: '123' })
 
   mounted.vm.setId(456)