feat(vue-query)!: make .key return reactive value

unnoq · Feb 9, 2025 · e3c0b80 · e3c0b80
1 parent fca153f
commit e3c0b80
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/packages/vue-query/src/general-utils.test.ts b/packages/vue-query/src/general-utils.test.ts
@@ -13,7 +13,7 @@ describe('createGeneralUtils', () => {
 
   it('.key', () => {
     expect(
-      utils.key({ input: computed(() => ({ search: ref('__search__') })), type: 'infinite' }),
+      utils.key({ input: computed(() => ({ search: ref('__search__') })), type: 'infinite' }).value,
     ).toEqual([['path'], { input: { search: '__search__' }, type: 'infinite' }])
     expect(buildKeySpy).toHaveBeenCalledTimes(1)
     expect(buildKeySpy).toHaveBeenCalledWith(['path'], { input: { search: '__search__' }, type: 'infinite' })

diff --git a/packages/vue-query/src/general-utils.ts b/packages/vue-query/src/general-utils.ts
@@ -1,19 +1,20 @@
 import type { QueryKey } from '@tanstack/vue-query'
 import type { BuildKeyOptions, KeyType } from './key'
 import type { MaybeRefDeep } from './types'
+import { computed, type ComputedRef } from 'vue'
 import { buildKey } from './key'
 import { unrefDeep } from './utils'
 
 export interface GeneralUtils<TInput> {
-  key<UType extends KeyType = undefined>(options?: MaybeRefDeep<BuildKeyOptions<UType, TInput>>): QueryKey
+  key<UType extends KeyType = undefined>(options?: MaybeRefDeep<BuildKeyOptions<UType, TInput>>): ComputedRef<QueryKey>
 }
 
 export function createGeneralUtils<TInput>(
   path: string[],
 ): GeneralUtils<TInput> {
   return {
     key(options) {
-      return buildKey(path, unrefDeep(options as any))
+      return computed(() => buildKey(path, unrefDeep(options as any)))
     },
   }
 }
diff --git a/packages/vue-query/src/router-utils.test.ts b/packages/vue-query/src/router-utils.test.ts
@@ -22,7 +22,7 @@ describe('createRouterUtils', () => {
     expect(procedureUtilsSpy).toHaveBeenCalledTimes(1)
     expect(procedureUtilsSpy).toHaveBeenCalledWith(client, ['__base__'])
 
-    expect(utils.key()).toEqual(generalUtilsSpy.mock.results[0]!.value.key())
+    expect(utils.key().value).toEqual(generalUtilsSpy.mock.results[0]!.value.key().value)
     expect(utils.queryOptions().queryKey.value).toEqual(procedureUtilsSpy.mock.results[0]!.value.queryOptions().queryKey.value)
 
     vi.clearAllMocks()
@@ -33,7 +33,7 @@ describe('createRouterUtils', () => {
     expect(procedureUtilsSpy).toHaveBeenCalledTimes(1)
     expect(procedureUtilsSpy).toHaveBeenCalledWith(client.key, ['__base__', 'key'])
 
-    expect(keyUtils.key()).toEqual(generalUtilsSpy.mock.results[0]!.value.key())
+    expect(keyUtils.key().value).toEqual(generalUtilsSpy.mock.results[0]!.value.key().value)
     expect(keyUtils.queryOptions().queryKey.value).toEqual(procedureUtilsSpy.mock.results[0]!.value.queryOptions().queryKey.value)
 
     vi.clearAllMocks()
@@ -47,7 +47,7 @@ describe('createRouterUtils', () => {
     expect(procedureUtilsSpy).toHaveBeenNthCalledWith(1, client.key, ['__base__', 'key'])
     expect(procedureUtilsSpy).toHaveBeenNthCalledWith(2, client.key.pong, ['__base__', 'key', 'pong'])
 
-    expect(pongUtils.key()).toEqual(generalUtilsSpy.mock.results[1]!.value.key())
+    expect(pongUtils.key().value).toEqual(generalUtilsSpy.mock.results[1]!.value.key().value)
     expect(pongUtils.queryOptions().queryKey.value).toEqual(procedureUtilsSpy.mock.results[1]!.value.queryOptions().queryKey.value)
   })