feat(vue-query): let composables accepts enabled as a getter function (#6018)

Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc>
Co-authored-by: Damian Osipiuk <osipiukd+git@gmail.com>

Author: 3 people

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

@@ -253,4 +253,27 @@ describe('useQueries', () => {
       res: [firstResult, secondResult],
     })
   })
+
+  test('should be `enabled` to accept getter function', async () => {
+    const fetchFn = vi.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

@@ -269,6 +269,25 @@ describe('useQuery', () => {
     )
   })
 
+  test('should be `enabled` to accept getter function', async () => {
+    const fetchFn = vi.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('throwOnError', () => {
     test('should evaluate throwOnError when query is expected to throw', async () => {
       const boundaryFn = vi.fn()

packages/vue-query/src/types.ts

@@ -14,6 +14,8 @@ type UnwrapLeaf =
 
 export type MaybeRef<T> = Ref<T> | T
 
+export type MaybeRefOrGetter<T> = MaybeRef<T> | (() => T)
+
 export type MaybeRefDeep<T> = MaybeRef<
   T extends Function
     ? T

packages/vue-query/src/useBaseQuery.ts

@@ -84,13 +84,19 @@ export function useBaseQuery<
   const client = queryClient || useQueryClient()
 
   const defaultedOptions = computed(() => {
+    const clonedOptions = cloneDeepUnref(options as any)
+
+    if (typeof clonedOptions.enabled === 'function') {
+      clonedOptions.enabled = clonedOptions.enabled()
+    }
+
     const defaulted: DefaultedQueryObserverOptions<
       TQueryFnData,
       TError,
       TData,
       TQueryData,
       TQueryKey
-    > = client.defaultQueryOptions(cloneDeepUnref(options as any))
+    > = client.defaultQueryOptions(clonedOptions)
 
     defaulted._optimisticResults = client.isRestoring.value
       ? 'isRestoring'

packages/vue-query/src/useInfiniteQuery.ts

@@ -12,7 +12,12 @@ import type {
 
 import type { UseBaseQueryReturnType } from './useBaseQuery'
 
-import type { DeepUnwrapRef, DistributiveOmit, MaybeRefDeep } from './types'
+import type {
+  DeepUnwrapRef,
+  DistributiveOmit,
+  MaybeRefDeep,
+  MaybeRefOrGetter,
+} from './types'
 import type { QueryClient } from './queryClient'
 
 export type UseInfiniteQueryOptions<
@@ -39,6 +44,16 @@ export type UseInfiniteQueryOptions<
         DeepUnwrapRef<TQueryKey>,
         TPageParam
       >[Property]
+    : Property extends 'enabled'
+    ? MaybeRefOrGetter<
+        InfiniteQueryObserverOptions<
+          TQueryFnData,
+          TError,
+          TData,
+          TQueryData,
+          TQueryKey
+        >[Property]
+      >
     : MaybeRefDeep<
         WithRequired<
           InfiniteQueryObserverOptions<

packages/vue-query/src/useQueries.ts

@@ -186,6 +186,10 @@ export function useQueries<
 
   const defaultedQueries = computed(() =>
     cloneDeepUnref(queries).map((queryOptions) => {
+      if (typeof queryOptions.enabled === 'function') {
+        queryOptions.enabled = queryOptions.enabled()
+      }
+
       const defaulted = client.defaultQueryOptions(queryOptions)
       defaulted._optimisticResults = client.isRestoring.value
         ? 'isRestoring'

packages/vue-query/src/useQuery.ts

@@ -15,6 +15,7 @@ import type {
   DistributiveOmit,
   MaybeRef,
   MaybeRefDeep,
+  MaybeRefOrGetter,
 } from './types'
 import type { QueryClient } from './queryClient'
 
@@ -39,6 +40,16 @@ export type UseQueryOptions<
         TQueryData,
         DeepUnwrapRef<TQueryKey>
       >[Property]
+    : Property extends 'enabled'
+    ? MaybeRefOrGetter<
+        QueryObserverOptions<
+          TQueryFnData,
+          TError,
+          TData,
+          TQueryData,
+          TQueryKey
+        >[Property]
+      >
     : MaybeRefDeep<
         WithRequired<
           QueryObserverOptions<