diff --git a/packages/vue-query/src/__tests__/useQuery.test.ts b/packages/vue-query/src/__tests__/useQuery.test.ts index 0f92de41fc..90e77c2e04 100644 --- a/packages/vue-query/src/__tests__/useQuery.test.ts +++ b/packages/vue-query/src/__tests__/useQuery.test.ts @@ -146,6 +146,8 @@ describe('useQuery', () => { }) secondKeyRef.value = 'key8' + await flushPromises() + expect(query).toMatchObject({ status: { value: 'loading' }, data: { value: undefined }, @@ -170,6 +172,9 @@ describe('useQuery', () => { }) enabled.value = true + + await flushPromises() + expect(query).toMatchObject({ fetchStatus: { value: 'fetching' }, data: { value: undefined }, diff --git a/packages/vue-query/src/useBaseQuery.ts b/packages/vue-query/src/useBaseQuery.ts index 3d52f4e330..9244411b6d 100644 --- a/packages/vue-query/src/useBaseQuery.ts +++ b/packages/vue-query/src/useBaseQuery.ts @@ -15,7 +15,7 @@ import { shouldThrowError, updateState, } from './utils' -import type { ToRefs } from 'vue-demi' +import type { ToRef } from 'vue-demi' import type { QueryFunction, QueryKey, @@ -31,7 +31,11 @@ export type UseQueryReturnType< TData, TError, Result = QueryObserverResult, -> = ToRefs> & { +> = { + [K in keyof Result]: Result[K] extends (...args: any[]) => any + ? Result[K] + : ToRef +} & { suspense: () => Promise } @@ -106,19 +110,23 @@ export function useBaseQuery< { immediate: true }, ) - watch( - defaultedOptions, - () => { - observer.setOptions(defaultedOptions.value) - updateState(state, observer.getCurrentResult()) - }, - { flush: 'sync' }, - ) + const updater = () => { + observer.setOptions(defaultedOptions.value) + updateState(state, observer.getCurrentResult()) + } + + watch(defaultedOptions, updater) onScopeDispose(() => { unsubscribe() }) + // fix #5910 + const refetch = (...args: Parameters) => { + updater() + return state.refetch(...args) + } + const suspense = () => { return new Promise>( (resolve, reject) => { @@ -166,10 +174,17 @@ export function useBaseQuery< }, ) - return { - ...(toRefs(readonly(state)) as UseQueryReturnType), - suspense, + const object: any = toRefs(readonly(state)) + for (const key in state) { + if (typeof state[key as keyof typeof state] === 'function') { + object[key] = state[key as keyof typeof state] + } } + + object.suspense = suspense + object.refetch = refetch + + return object as UseQueryReturnType } export function parseQueryArgs< diff --git a/packages/vue-query/src/useInfiniteQuery.ts b/packages/vue-query/src/useInfiniteQuery.ts index 63cd709f56..021f90299c 100644 --- a/packages/vue-query/src/useInfiniteQuery.ts +++ b/packages/vue-query/src/useInfiniteQuery.ts @@ -105,11 +105,6 @@ export function useInfiniteQuery< arg2, arg3, ) as InfiniteQueryReturnType - return { - ...result, - fetchNextPage: result.fetchNextPage.value, - fetchPreviousPage: result.fetchPreviousPage.value, - refetch: result.refetch.value, - remove: result.remove.value, - } + + return result } diff --git a/packages/vue-query/src/useIsFetching.ts b/packages/vue-query/src/useIsFetching.ts index bbeb10e07a..cb1237b0f4 100644 --- a/packages/vue-query/src/useIsFetching.ts +++ b/packages/vue-query/src/useIsFetching.ts @@ -4,7 +4,7 @@ import { onScopeDispose, ref, unref, - watchSyncEffect, + watchEffect, } from 'vue-demi' import { useQueryClient } from './useQueryClient' import { cloneDeepUnref, isQueryKey } from './utils' @@ -44,7 +44,7 @@ export function useIsFetching( const unsubscribe = queryClient.getQueryCache().subscribe(listener) - watchSyncEffect(listener) + watchEffect(listener) onScopeDispose(() => { unsubscribe() diff --git a/packages/vue-query/src/useIsMutating.ts b/packages/vue-query/src/useIsMutating.ts index 695d03a983..c9d6b67dfb 100644 --- a/packages/vue-query/src/useIsMutating.ts +++ b/packages/vue-query/src/useIsMutating.ts @@ -4,7 +4,7 @@ import { onScopeDispose, ref, unref, - watchSyncEffect, + watchEffect, } from 'vue-demi' import { useQueryClient } from './useQueryClient' import { cloneDeepUnref, isQueryKey } from './utils' @@ -44,7 +44,7 @@ export function useIsMutating( const unsubscribe = queryClient.getMutationCache().subscribe(listener) - watchSyncEffect(listener) + watchEffect(listener) onScopeDispose(() => { unsubscribe() diff --git a/packages/vue-query/src/useMutation.ts b/packages/vue-query/src/useMutation.ts index a7d696cac3..5e75dc1d0d 100644 --- a/packages/vue-query/src/useMutation.ts +++ b/packages/vue-query/src/useMutation.ts @@ -181,13 +181,9 @@ export function useMutation< }) } - watch( - options, - () => { - observer.setOptions(queryClient.defaultMutationOptions(options.value)) - }, - { flush: 'sync' }, - ) + watch(options, () => { + observer.setOptions(queryClient.defaultMutationOptions(options.value)) + }) onScopeDispose(() => { unsubscribe() diff --git a/packages/vue-query/src/useQuery.ts b/packages/vue-query/src/useQuery.ts index 0d9bbd86b4..dc574c309a 100644 --- a/packages/vue-query/src/useQuery.ts +++ b/packages/vue-query/src/useQuery.ts @@ -187,9 +187,5 @@ export function useQuery< | UseQueryDefinedReturnType { const result = useBaseQuery(QueryObserver, arg1, arg2, arg3) - return { - ...result, - refetch: result.refetch.value, - remove: result.remove.value, - } + return result }