refactor(vue-query): reduce code duplication (#5908)

Co-authored-by: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
TanStack · Sep 7, 2023 · 29c9b18 · 29c9b18
1 parent 2e9b426
commit 29c9b18
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 22 deletions.
diff --git a/packages/vue-query/src/useIsFetching.ts b/packages/vue-query/src/useIsFetching.ts
@@ -4,7 +4,7 @@ import {
   onScopeDispose,
   ref,
   unref,
-  watch,
+  watchSyncEffect,
 } from 'vue-demi'
 import { useQueryClient } from './useQueryClient'
 import { cloneDeepUnref, isQueryKey } from './utils'
@@ -36,19 +36,15 @@ export function useIsFetching(
   const queryClient =
     filters.value.queryClient ?? useQueryClient(filters.value.queryClientKey)
 
-  const isFetching = ref(queryClient.isFetching(filters))
+  const isFetching = ref()
 
-  const unsubscribe = queryClient.getQueryCache().subscribe(() => {
+  const listener = () => {
     isFetching.value = queryClient.isFetching(filters)
-  })
+  }
+
+  const unsubscribe = queryClient.getQueryCache().subscribe(listener)
 
-  watch(
-    filters,
-    () => {
-      isFetching.value = queryClient.isFetching(filters)
-    },
-    { flush: 'sync' },
-  )
+  watchSyncEffect(listener)
 
   onScopeDispose(() => {
     unsubscribe()

diff --git a/packages/vue-query/src/useIsMutating.ts b/packages/vue-query/src/useIsMutating.ts
@@ -4,7 +4,7 @@ import {
   onScopeDispose,
   ref,
   unref,
-  watch,
+  watchSyncEffect,
 } from 'vue-demi'
 import { useQueryClient } from './useQueryClient'
 import { cloneDeepUnref, isQueryKey } from './utils'
@@ -36,19 +36,15 @@ export function useIsMutating(
   const queryClient =
     filters.value.queryClient ?? useQueryClient(filters.value.queryClientKey)
 
-  const isMutating = ref(queryClient.isMutating(filters))
+  const isMutating = ref()
 
-  const unsubscribe = queryClient.getMutationCache().subscribe(() => {
+  const listener = () => {
     isMutating.value = queryClient.isMutating(filters)
-  })
+  }
+
+  const unsubscribe = queryClient.getMutationCache().subscribe(listener)
 
-  watch(
-    filters,
-    () => {
-      isMutating.value = queryClient.isMutating(filters)
-    },
-    { flush: 'sync' },
-  )
+  watchSyncEffect(listener)
 
   onScopeDispose(() => {
     unsubscribe()