From d35da8fbcb79a603e942d9af84ec8f5764fc28bb Mon Sep 17 00:00:00 2001
From: Jovi De Croock <decroockjovi@gmail.com>
Date: Tue, 18 Jun 2024 14:25:59 +0200
Subject: [PATCH] fix(vue): variables lose reactivity (#3614)

---
 .changeset/curvy-pets-yawn.md          |  5 ++++
 packages/vue-urql/src/useQuery.test.ts | 32 ++++++++++++++++++++++++++
 packages/vue-urql/src/useQuery.ts      |  5 +++-
 3 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/curvy-pets-yawn.md

diff --git a/.changeset/curvy-pets-yawn.md b/.changeset/curvy-pets-yawn.md
new file mode 100644
index 0000000000..68f24297ac
--- /dev/null
+++ b/.changeset/curvy-pets-yawn.md
@@ -0,0 +1,5 @@
+---
+'@urql/vue': patch
+---
+
+Fix variables losing reactivity
diff --git a/packages/vue-urql/src/useQuery.test.ts b/packages/vue-urql/src/useQuery.test.ts
index 5ba38be72f..62abb2d90c 100644
--- a/packages/vue-urql/src/useQuery.test.ts
+++ b/packages/vue-urql/src/useQuery.test.ts
@@ -108,6 +108,38 @@ describe('useQuery', () => {
     );
   });
 
+  it('reacts to variables changing', async () => {
+    const executeQuery = vi
+      .spyOn(client, 'executeQuery')
+      .mockImplementation(request => {
+        return pipe(
+          fromValue({ operation: request, data: { test: true } }),
+          delay(1)
+        ) as any;
+      });
+
+    const variables = {
+      test: ref(1),
+    };
+    const query$ = useQuery({
+      query: '{ test }',
+      variables,
+    });
+
+    await query$;
+
+    expect(executeQuery).toHaveBeenCalledTimes(1);
+
+    expect(query$.operation.value).toHaveProperty('variables.test', 1);
+
+    variables.test.value = 2;
+
+    await query$;
+
+    expect(executeQuery).toHaveBeenCalledTimes(2);
+    expect(query$.operation.value).toHaveProperty('variables.test', 2);
+  });
+
   it('pauses query when asked to do so', async () => {
     const subject = makeSubject<any>();
     const executeQuery = vi
diff --git a/packages/vue-urql/src/useQuery.ts b/packages/vue-urql/src/useQuery.ts
index 70ddd41af2..0020074b9f 100644
--- a/packages/vue-urql/src/useQuery.ts
+++ b/packages/vue-urql/src/useQuery.ts
@@ -1,6 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 
 import type { Ref, WatchStopHandle } from 'vue';
+import { reactive } from 'vue';
 import { isRef, ref, shallowRef, watch, watchEffect } from 'vue';
 
 import type { Subscription, Source } from 'wonka';
@@ -241,10 +242,12 @@ export function useQuery<T = any, V extends AnyVariables = AnyVariables>(
 }
 
 export function callUseQuery<T = any, V extends AnyVariables = AnyVariables>(
-  args: UseQueryArgs<T, V>,
+  _args: UseQueryArgs<T, V>,
   client: Ref<Client> = useClient(),
   stops: WatchStopHandle[] = []
 ): UseQueryResponse<T, V> {
+  const args = reactive(_args) as UseQueryArgs<T, V>;
+
   const data: Ref<T | undefined> = ref();
   const stale: Ref<boolean> = ref(false);
   const fetching: Ref<boolean> = ref(false);