fix(vue-query): avoid use sync watchers that cause frequent requests (#6043)

* fix(vue-query): avoid use sync watchers that cause frequent requests

* fix: remove unnecessary import

---------

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

Author: Mini-ghost

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 },

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<TData, TError>,
-> = ToRefs<Readonly<Result>> & {
+> = {
+  [K in keyof Result]: Result[K] extends (...args: any[]) => any
+    ? Result[K]
+    : ToRef<Result[K]>
+} & {
   suspense: () => Promise<Result>
 }
 
@@ -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<typeof state['refetch']>) => {
+    updater()
+    return state.refetch(...args)
+  }
+
   const suspense = () => {
     return new Promise<QueryObserverResult<TData, TError>>(
       (resolve, reject) => {
@@ -166,10 +174,17 @@ export function useBaseQuery<
     },
   )
 
-  return {
-    ...(toRefs(readonly(state)) as UseQueryReturnType<TData, TError>),
-    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<TData, TError>
 }
 
 export function parseQueryArgs<

packages/vue-query/src/useInfiniteQuery.ts

@@ -105,11 +105,6 @@ export function useInfiniteQuery<
     arg2,
     arg3,
   ) as InfiniteQueryReturnType<TData, TError>
-  return {
-    ...result,
-    fetchNextPage: result.fetchNextPage.value,
-    fetchPreviousPage: result.fetchPreviousPage.value,
-    refetch: result.refetch.value,
-    remove: result.remove.value,
-  }
+
+  return result
 }

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()

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()

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()

packages/vue-query/src/useQuery.ts

@@ -187,9 +187,5 @@ export function useQuery<
   | UseQueryDefinedReturnType<TData, TError> {
   const result = useBaseQuery(QueryObserver, arg1, arg2, arg3)
 
-  return {
-    ...result,
-    refetch: result.refetch.value,
-    remove: result.remove.value,
-  }
+  return result
 }