feat(vue-query): enabled accepts getter function (#6004)

* feat(vue-query): `useBaseQuery` accepts `enabled` as a getter function

* feat(vue-query): `useQueries` accepts `enabled` as a getter function

---------

Co-authored-by: Damian Osipiuk <[email protected]>

Author: Mini-ghost

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

@@ -1,4 +1,4 @@
-import { onScopeDispose, reactive } from 'vue-demi'
+import { onScopeDispose, reactive, ref } from 'vue-demi'
 
 import { useQueries } from '../useQueries'
 import { useQueryClient } from '../useQueryClient'
@@ -231,4 +231,28 @@ describe('useQueries', () => {
 
     expect(useQueryClient).toHaveBeenCalledTimes(0)
   })
+
+  test('should be `enabled` to accept getter function', async () => {
+    const fetchFn = jest.fn()
+
+    const checked = ref(false)
+
+    useQueries({
+      queries: [
+        {
+          queryKey: ['enabled'],
+          queryFn: fetchFn,
+          enabled: () => checked.value,
+        },
+      ],
+    })
+
+    expect(fetchFn).not.toHaveBeenCalled()
+
+    checked.value = true
+
+    await flushPromises()
+
+    expect(fetchFn).toHaveBeenCalled()
+  })
 })

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

@@ -267,6 +267,25 @@ describe('useQuery', () => {
     )
   })
 
+  test('should be `enabled` to accept getter function', async () => {
+    const fetchFn = jest.fn()
+    const checked = ref(false)
+
+    useQuery({
+      queryKey: ['enabled'],
+      queryFn: fetchFn,
+      enabled: () => checked.value,
+    })
+
+    expect(fetchFn).not.toHaveBeenCalled()
+
+    checked.value = true
+
+    await flushPromises()
+
+    expect(fetchFn).toHaveBeenCalled()
+  })
+
   describe('errorBoundary', () => {
     test('should evaluate useErrorBoundary when query is expected to throw', async () => {
       const boundaryFn = jest.fn()

packages/vue-query/src/types.ts

@@ -32,6 +32,8 @@ export type MaybeRefDeep<T> = MaybeRef<
 
 export type MaybeRef<T> = Ref<T> | T
 
+export type MaybeRefOrGetter<T> = MaybeRef<T> | (() => T)
+
 export type DeepUnwrapRef<T> = T extends UnwrapLeaf
   ? T
   : T extends Ref<infer U>
@@ -70,6 +72,16 @@ export type VueQueryObserverOptions<
         TQueryData,
         DeepUnwrapRef<TQueryKey>
       >[Property]
+    : Property extends 'enabled'
+    ? MaybeRefOrGetter<
+        QueryObserverOptions<
+          TQueryFnData,
+          TError,
+          TData,
+          TQueryData,
+          TQueryKey
+        >[Property]
+      >
     : MaybeRef<
         QueryObserverOptions<
           TQueryFnData,
@@ -104,6 +116,16 @@ export type VueInfiniteQueryObserverOptions<
         TQueryData,
         DeepUnwrapRef<TQueryKey>
       >[Property]
+    : Property extends 'enabled'
+    ? MaybeRefOrGetter<
+        QueryObserverOptions<
+          TQueryFnData,
+          TError,
+          TData,
+          TQueryData,
+          TQueryKey
+        >[Property]
+      >
     : MaybeRef<
         InfiniteQueryObserverOptions<
           TQueryFnData,

packages/vue-query/src/useBaseQuery.ts

@@ -226,7 +226,13 @@ export function parseQueryArgs<
     options = { ...plainArg2, queryKey: plainArg1 }
   }
 
-  return cloneDeepUnref(options) as WithQueryClientKey<
+  const clondedOptions = cloneDeepUnref(options)
+
+  if (typeof clondedOptions.enabled === 'function') {
+    clondedOptions.enabled = clondedOptions.enabled()
+  }
+
+  return clondedOptions as WithQueryClientKey<
     QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>
   >
 }

packages/vue-query/src/useQueries.ts

@@ -148,9 +148,17 @@ export function useQueries<T extends any[]>({
     }
   }
 
-  const unreffedQueries = computed(
-    () => cloneDeepUnref(queries) as UseQueriesOptionsArg<T>,
-  )
+  const unreffedQueries = computed(() => {
+    const clonedQueries = cloneDeepUnref(queries)
+
+    ;(clonedQueries as any[]).map((query) => {
+      if (typeof query.enabled === 'function') {
+        query.enabled = query.enabled()
+      }
+    })
+
+    return clonedQueries as UseQueriesOptionsArg<T>
+  })
 
   const queryClientKey = unreffedQueries.value[0]?.queryClientKey
   const optionsQueryClient = unreffedQueries.value[0]?.queryClient as