fix(vue-query): Make query options watchers sync (#5929)

* fix: make watcher for queryOptions sync to reflect changes to them immediately

* fix: make option watchers sync for other composibles

* test: improve test for dependent queries

* test: update test to check for dependent query to be called with the correct key

* docs: fix example to use queryKey instead of reactive variable

* test: resolve mock queryFn

* test: keep fetch status checks in test for dependent queries

---------

Co-authored-by: Damian Osipiuk <osipiukd+git@gmail.com>

Author: markbrockhoff

examples/vue/dependent-queries/src/Post.vue

@@ -36,9 +36,9 @@ export default defineComponent({
 
     const { data: author } = useQuery(
       ['author', authorId],
-      () => fetchAuthor(authorId.value),
+      ({ queryKey: [, id] }) => fetchAuthor(id),
       {
-        enabled: computed(() => !!post.value?.userId),
+        enabled: computed(() => !!authorId.value),
       },
     )
 

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

@@ -146,8 +146,6 @@ describe('useQuery', () => {
     })
 
     secondKeyRef.value = 'key8'
-    await flushPromises()
-
     expect(query).toMatchObject({
       status: { value: 'loading' },
       data: { value: undefined },
@@ -172,9 +170,6 @@ describe('useQuery', () => {
     })
 
     enabled.value = true
-
-    await flushPromises()
-
     expect(query).toMatchObject({
       fetchStatus: { value: 'fetching' },
       data: { value: undefined },
@@ -192,16 +187,18 @@ describe('useQuery', () => {
 
     const enabled = computed(() => !!data.value)
 
+    const dependentQueryFn = jest.fn().mockImplementation(simpleFetcher)
     const { fetchStatus, status } = useQuery(
       ['dependant2'],
-      simpleFetcher,
+      dependentQueryFn,
       reactive({
         enabled,
       }),
     )
 
     expect(data.value).toStrictEqual(undefined)
     expect(fetchStatus.value).toStrictEqual('idle')
+    expect(dependentQueryFn).not.toHaveBeenCalled()
 
     await flushPromises()
 
@@ -212,6 +209,10 @@ describe('useQuery', () => {
 
     expect(fetchStatus.value).toStrictEqual('idle')
     expect(status.value).toStrictEqual('success')
+    expect(dependentQueryFn).toHaveBeenCalledTimes(1)
+    expect(dependentQueryFn).toHaveBeenCalledWith(
+      expect.objectContaining({ queryKey: ['dependant2'] }),
+    )
   })
 
   test('should stop listening to changes on onScopeDispose', async () => {
@@ -233,6 +234,34 @@ describe('useQuery', () => {
     expect(status.value).toStrictEqual('loading')
   })
 
+  test('should use the current value for the queryKey when refetch is called', async () => {
+    const fetchFn = jest.fn()
+    const keyRef = ref('key11')
+    const query = useQuery({
+      queryKey: ['key10', keyRef],
+      queryFn: fetchFn,
+      enabled: false,
+    })
+
+    expect(fetchFn).not.toHaveBeenCalled()
+    await query.refetch()
+    expect(fetchFn).toHaveBeenCalledTimes(1)
+    expect(fetchFn).toHaveBeenCalledWith(
+      expect.objectContaining({
+        queryKey: ['key10', 'key11'],
+      }),
+    )
+
+    keyRef.value = 'key12'
+    await query.refetch()
+    expect(fetchFn).toHaveBeenCalledTimes(2)
+    expect(fetchFn).toHaveBeenCalledWith(
+      expect.objectContaining({
+        queryKey: ['key10', 'key12'],
+      }),
+    )
+  })
+
   describe('errorBoundary', () => {
     test('should evaluate useErrorBoundary when query is expected to throw', async () => {
       const boundaryFn = jest.fn()

packages/vue-query/src/useBaseQuery.ts

@@ -102,10 +102,14 @@ export function useBaseQuery<
     { immediate: true },
   )
 
-  watch(defaultedOptions, () => {
-    observer.setOptions(defaultedOptions.value)
-    updateState(state, observer.getCurrentResult())
-  })
+  watch(
+    defaultedOptions,
+    () => {
+      observer.setOptions(defaultedOptions.value)
+      updateState(state, observer.getCurrentResult())
+    },
+    { flush: 'sync' },
+  )
 
   onScopeDispose(() => {
     unsubscribe()

packages/vue-query/src/useIsFetching.ts

@@ -42,9 +42,13 @@ export function useIsFetching(
     isFetching.value = queryClient.isFetching(filters)
   })
 
-  watch(filters, () => {
-    isFetching.value = queryClient.isFetching(filters)
-  })
+  watch(
+    filters,
+    () => {
+      isFetching.value = queryClient.isFetching(filters)
+    },
+    { flush: 'sync' },
+  )
 
   onScopeDispose(() => {
     unsubscribe()

packages/vue-query/src/useIsMutating.ts

@@ -42,9 +42,13 @@ export function useIsMutating(
     isMutating.value = queryClient.isMutating(filters)
   })
 
-  watch(filters, () => {
-    isMutating.value = queryClient.isMutating(filters)
-  })
+  watch(
+    filters,
+    () => {
+      isMutating.value = queryClient.isMutating(filters)
+    },
+    { flush: 'sync' },
+  )
 
   onScopeDispose(() => {
     unsubscribe()

packages/vue-query/src/useMutation.ts

@@ -181,9 +181,13 @@ export function useMutation<
     })
   }
 
-  watch(options, () => {
-    observer.setOptions(queryClient.defaultMutationOptions(options.value))
-  })
+  watch(
+    options,
+    () => {
+      observer.setOptions(queryClient.defaultMutationOptions(options.value))
+    },
+    { flush: 'sync' },
+  )
 
   onScopeDispose(() => {
     unsubscribe()

packages/vue-query/src/useQueries.ts

@@ -206,10 +206,14 @@ export function useQueries<T extends any[]>({
     { immediate: true },
   )
 
-  watch(defaultedQueries, () => {
-    observer.setQueries(defaultedQueries.value)
-    state.splice(0, state.length, ...observer.getCurrentResult())
-  })
+  watch(
+    defaultedQueries,
+    () => {
+      observer.setQueries(defaultedQueries.value)
+      state.splice(0, state.length, ...observer.getCurrentResult())
+    },
+    { flush: 'sync' },
+  )
 
   onScopeDispose(() => {
     unsubscribe()