fix(vue-query): ensure that invalidateQueries trigger queryFn wit…

…h updated ref values (#6561)

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

@@ -2,6 +2,7 @@ import { describe, expect, test, vi } from 'vitest'
 import { ref } from 'vue-demi'
 import { QueryClient as QueryClientOrigin } from '@tanstack/query-core'
 import { QueryClient } from '../queryClient'
+import { flushPromises } from './test-utils'
 
 vi.mock('@tanstack/query-core')
 
@@ -196,6 +197,8 @@ describe('QueryCache', () => {
         { cancelRefetch: ref(false) },
       )
 
+      await flushPromises()
+
       expect(QueryClientOrigin.prototype.invalidateQueries).toBeCalledWith(
         {
           queryKey: queryKeyUnref,

packages/vue-query/src/queryClient.ts

@@ -171,10 +171,17 @@ export class QueryClient extends QC {
     filters: MaybeRefDeep<InvalidateQueryFilters> = {},
     options: MaybeRefDeep<InvalidateOptions> = {},
   ): Promise<void> {
-    return super.invalidateQueries(
-      cloneDeepUnref(filters),
-      cloneDeepUnref(options),
-    )
+    // (dosipiuk): We need to delay `invalidate` execution to next macro task for all reactive values to be updated.
+    // This ensures that `context` in `queryFn` while `invalidating` along reactive variable change has correct value.
+    return new Promise((resolve) => {
+      setTimeout(async () => {
+        await super.invalidateQueries(
+          cloneDeepUnref(filters),
+          cloneDeepUnref(options),
+        )
+        resolve()
+      }, 0)
+    })
   }
 
   refetchQueries(