From cff1322e4a4ce34bcbb55947bf7d1378f8b3f0ef Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Tue, 19 Dec 2023 22:16:29 +0100
Subject: [PATCH] fix(vue-query): ensure that `invalidateQueries` trigger
 `queryFn` with updated ref values

---
 .../vue-query/src/__tests__/queryClient.test.ts   |  3 +++
 packages/vue-query/src/queryClient.ts             | 15 +++++++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/vue-query/src/__tests__/queryClient.test.ts b/packages/vue-query/src/__tests__/queryClient.test.ts
index 940cf1affd..6d9684a6ed 100644
--- a/packages/vue-query/src/__tests__/queryClient.test.ts
+++ b/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,
diff --git a/packages/vue-query/src/queryClient.ts b/packages/vue-query/src/queryClient.ts
index b74b3daea3..faa7a63c37 100644
--- a/packages/vue-query/src/queryClient.ts
+++ b/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(