fix(vue): variables lose reactivity (#3614)

Author: JoviDeCroock

.changeset/curvy-pets-yawn.md

@@ -0,0 +1,5 @@
+---
+'@urql/vue': patch
+---
+
+Fix variables losing reactivity

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

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);