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

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