feat(vue-query): add support for getters in query keys (#7608)

* feat(vue-query): add support for getters in query keys

* add support for nested queries

* fix type test

* don't export helper function

* fix useQueries types

* fix lint issue

Author: suneettipirneni

packages/vue-query/src/__tests__/useQueries.test.ts

@@ -275,4 +275,96 @@ describe('useQueries', () => {
 
     expect(fetchFn).toHaveBeenCalled()
   })
+
+  test('should allow getters for query keys', async () => {
+    const fetchFn = vi.fn()
+    const key1 = ref('key1')
+    const key2 = ref('key2')
+
+    useQueries({
+      queries: [
+        {
+          queryKey: ['key', () => key1.value, () => key2.value],
+          queryFn: fetchFn,
+        },
+      ],
+    })
+
+    expect(fetchFn).toHaveBeenCalledTimes(1)
+
+    key1.value = 'key3'
+
+    await flushPromises()
+
+    expect(fetchFn).toHaveBeenCalledTimes(2)
+
+    key2.value = 'key4'
+
+    await flushPromises()
+
+    expect(fetchFn).toHaveBeenCalledTimes(3)
+  })
+
+  test('should allow arbitrarily nested getters for query keys', async () => {
+    const fetchFn = vi.fn()
+    const key1 = ref('key1')
+    const key2 = ref('key2')
+    const key3 = ref('key3')
+    const key4 = ref('key4')
+    const key5 = ref('key5')
+
+    useQueries({
+      queries: [
+        {
+          queryKey: [
+            'key',
+            key1,
+            () => key2.value,
+            { key: () => key3.value },
+            [{ foo: { bar: () => key4.value } }],
+            () => ({
+              foo: {
+                bar: {
+                  baz: () => key5.value,
+                },
+              },
+            }),
+          ],
+          queryFn: fetchFn,
+        },
+      ],
+    })
+
+    expect(fetchFn).toHaveBeenCalledTimes(1)
+
+    key1.value = 'key1-updated'
+
+    await flushPromises()
+
+    expect(fetchFn).toHaveBeenCalledTimes(2)
+
+    key2.value = 'key2-updated'
+
+    await flushPromises()
+
+    expect(fetchFn).toHaveBeenCalledTimes(3)
+
+    key3.value = 'key3-updated'
+
+    await flushPromises()
+
+    expect(fetchFn).toHaveBeenCalledTimes(4)
+
+    key4.value = 'key4-updated'
+
+    await flushPromises()
+
+    expect(fetchFn).toHaveBeenCalledTimes(5)
+
+    key5.value = 'key5-updated'
+
+    await flushPromises()
+
+    expect(fetchFn).toHaveBeenCalledTimes(6)
+  })
 })

packages/vue-query/src/__tests__/useQuery.test.ts

@@ -287,6 +287,90 @@ describe('useQuery', () => {
     expect(fetchFn).toHaveBeenCalled()
   })
 
+  test('should allow getters for query keys', async () => {
+    const fetchFn = vi.fn()
+    const key1 = ref('key1')
+    const key2 = ref('key2')
+
+    useQuery({
+      queryKey: ['key', () => key1.value, () => key2.value],
+      queryFn: fetchFn,
+    })
+
+    expect(fetchFn).toHaveBeenCalledTimes(1)
+
+    key1.value = 'key3'
+
+    await flushPromises()
+
+    expect(fetchFn).toHaveBeenCalledTimes(2)
+
+    key2.value = 'key4'
+
+    await flushPromises()
+
+    expect(fetchFn).toHaveBeenCalledTimes(3)
+  })
+
+  test('should allow arbitrarily nested getters for query keys', async () => {
+    const fetchFn = vi.fn()
+    const key1 = ref('key1')
+    const key2 = ref('key2')
+    const key3 = ref('key3')
+    const key4 = ref('key4')
+    const key5 = ref('key5')
+
+    useQuery({
+      queryKey: [
+        'key',
+        key1,
+        () => key2.value,
+        { key: () => key3.value },
+        [{ foo: { bar: () => key4.value } }],
+        () => ({
+          foo: {
+            bar: {
+              baz: () => key5.value,
+            },
+          },
+        }),
+      ],
+      queryFn: fetchFn,
+    })
+
+    expect(fetchFn).toHaveBeenCalledTimes(1)
+
+    key1.value = 'key1-updated'
+
+    await flushPromises()
+
+    expect(fetchFn).toHaveBeenCalledTimes(2)
+
+    key2.value = 'key2-updated'
+
+    await flushPromises()
+
+    expect(fetchFn).toHaveBeenCalledTimes(3)
+
+    key3.value = 'key3-updated'
+
+    await flushPromises()
+
+    expect(fetchFn).toHaveBeenCalledTimes(4)
+
+    key4.value = 'key4-updated'
+
+    await flushPromises()
+
+    expect(fetchFn).toHaveBeenCalledTimes(5)
+
+    key5.value = 'key5-updated'
+
+    await flushPromises()
+
+    expect(fetchFn).toHaveBeenCalledTimes(6)
+  })
+
   describe('throwOnError', () => {
     test('should evaluate throwOnError when query is expected to throw', async () => {
       const boundaryFn = vi.fn()

packages/vue-query/src/useQueries.ts

@@ -5,6 +5,7 @@ import {
   onScopeDispose,
   readonly,
   shallowRef,
+  unref,
   watch,
 } from 'vue-demi'
 
@@ -268,22 +269,26 @@ export function useQueries<
 
   const client = queryClient || useQueryClient()
 
-  const defaultedQueries = computed(() =>
-    cloneDeepUnref(queries as MaybeRefDeep<UseQueriesOptionsArg<any>>).map(
-      (queryOptions) => {
-        if (typeof queryOptions.enabled === 'function') {
-          queryOptions.enabled = queryOptions.enabled()
-        }
+  const defaultedQueries = computed(() => {
+    // Only unref the top level array.
+    const queriesRaw = unref(queries) as ReadonlyArray<any>
 
-        const defaulted = client.defaultQueryOptions(queryOptions)
-        defaulted._optimisticResults = client.isRestoring.value
-          ? 'isRestoring'
-          : 'optimistic'
+    // Unref the rest for each element in the top level array.
+    return queriesRaw.map((queryOptions) => {
+      const clonedOptions = cloneDeepUnref(queryOptions)
 
-        return defaulted
-      },
-    ),
-  )
+      if (typeof clonedOptions.enabled === 'function') {
+        clonedOptions.enabled = queryOptions.enabled()
+      }
+
+      const defaulted = client.defaultQueryOptions(clonedOptions)
+      defaulted._optimisticResults = client.isRestoring.value
+        ? 'isRestoring'
+        : 'optimistic'
+
+      return defaulted
+    })
+  })
 
   const observer = new QueriesObserver<TCombinedResult>(
     client,

packages/vue-query/src/utils.ts

@@ -17,13 +17,20 @@ export function updateState(
   })
 }
 
-export function cloneDeep<T>(
+// Helper function for cloning deep objects where
+// the level and key is provided to the callback function.
+function _cloneDeep<T>(
   value: MaybeRefDeep<T>,
-  customize?: (val: MaybeRefDeep<T>) => T | undefined,
+  customize?: (
+    val: MaybeRefDeep<T>,
+    key: string,
+    level: number,
+  ) => T | undefined,
+  currentKey: string = '',
+  currentLevel: number = 0,
 ): T {
   if (customize) {
-    const result = customize(value)
-    // If it's a ref of undefined, return undefined
+    const result = customize(value, currentKey, currentLevel)
     if (result === undefined && isRef(value)) {
       return result as T
     }
@@ -33,24 +40,56 @@ export function cloneDeep<T>(
   }
 
   if (Array.isArray(value)) {
-    return value.map((val) => cloneDeep(val, customize)) as unknown as T
+    return value.map((val, index) =>
+      _cloneDeep(val, customize, String(index), currentLevel + 1),
+    ) as unknown as T
   }
 
   if (typeof value === 'object' && isPlainObject(value)) {
     const entries = Object.entries(value).map(([key, val]) => [
       key,
-      cloneDeep(val, customize),
+      _cloneDeep(val, customize, key, currentLevel + 1),
     ])
     return Object.fromEntries(entries)
   }
 
   return value as T
 }
 
-export function cloneDeepUnref<T>(obj: MaybeRefDeep<T>): T {
-  return cloneDeep(obj, (val) => {
+export function cloneDeep<T>(
+  value: MaybeRefDeep<T>,
+  customize?: (
+    val: MaybeRefDeep<T>,
+    key: string,
+    level: number,
+  ) => T | undefined,
+): T {
+  return _cloneDeep(value, customize)
+}
+
+export function cloneDeepUnref<T>(
+  obj: MaybeRefDeep<T>,
+  unrefGetters = false,
+): T {
+  return cloneDeep(obj, (val, key, level) => {
+    // Check if we're at the top level and the key is 'queryKey'
+    //
+    // If so, take the recursive descent where we resolve
+    // getters to values as well as refs.
+    if (level === 1 && key === 'queryKey') {
+      return cloneDeepUnref(val, true)
+    }
+
+    // Resolve getters to values if specified.
+    if (unrefGetters && isFunction(val)) {
+      // Cast due to older TS versions not allowing calling
+      // on certain intersection types.
+      return cloneDeepUnref((val as Function)(), unrefGetters)
+    }
+
+    // Unref refs and continue to recurse into the value.
     if (isRef(val)) {
-      return cloneDeepUnref(unref(val))
+      return cloneDeepUnref(unref(val), unrefGetters)
     }
 
     return undefined
@@ -66,6 +105,10 @@ function isPlainObject(value: unknown): value is Object {
   return prototype === null || prototype === Object.prototype
 }
 
+function isFunction(value: unknown): value is Function {
+  return typeof value === 'function'
+}
+
 export function shouldThrowError<T extends (...args: Array<any>) => boolean>(
   throwOnError: boolean | T | undefined,
   params: Parameters<T>,