diff --git a/packages/vue-query/src/useIsFetching.ts b/packages/vue-query/src/useIsFetching.ts index d46f9215fb..8c235ce13d 100644 --- a/packages/vue-query/src/useIsFetching.ts +++ b/packages/vue-query/src/useIsFetching.ts @@ -1,6 +1,5 @@ -import { computed, onScopeDispose, ref, watch } from 'vue-demi' +import { onScopeDispose, ref, watchSyncEffect } from 'vue-demi' import { useQueryClient } from './useQueryClient' -import { cloneDeepUnref } from './utils' import type { Ref } from 'vue-demi' import type { QueryFilters as QF } from '@tanstack/query-core' import type { MaybeRefDeep } from './types' @@ -12,18 +11,17 @@ export function useIsFetching( fetchingFilters: MaybeRefDeep = {}, queryClient?: QueryClient, ): Ref { - const filters = computed(() => cloneDeepUnref(fetchingFilters)) const client = queryClient || useQueryClient() - const isFetching = ref(client.isFetching(filters)) + const isFetching = ref() - const unsubscribe = client.getQueryCache().subscribe(() => { - isFetching.value = client.isFetching(filters) - }) + const listener = () => { + isFetching.value = client.isFetching(fetchingFilters) + } - watch(filters, () => { - isFetching.value = client.isFetching(filters) - }) + const unsubscribe = client.getQueryCache().subscribe(listener) + + watchSyncEffect(listener) onScopeDispose(() => { unsubscribe()