fix(vue): fix variables typing

- Revert the definitions of MaybeRefObj, UseQueryArgs, and UseSubscriptionArgs introduced in d07602d to resolve issue urql-graphql#3733
- Rename MaybeRef, MaybeRefObj, unwrap to MaybeRefOrGetter, MaybeRefOrGetterObj, and toValue for consistency with Vue 3.3+
- Replace deep unwrapping (introduced in 068df71) of variables with a simple toValue
- Revert test changes introduced in 068df71
- Fix 'reacts to variables changing' test by wrapping variables in reactive() since deep unwrapping is no longer performed

Author: arkandias

packages/vue-urql/src/useMutation.test.ts

@@ -1,5 +1,5 @@
 import { OperationResult, OperationResultSource } from '@urql/core';
-import { readonly } from 'vue';
+import { reactive } from 'vue';
 import { vi, expect, it, beforeEach, describe } from 'vitest';
 
 vi.mock('./useClient.ts', async () => {
@@ -30,13 +30,15 @@ describe('useMutation', () => {
         () => subject.source as OperationResultSource<OperationResult>
       );
 
-    const mutation = useMutation(gql`
-      mutation {
-        test
-      }
-    `);
+    const mutation = reactive(
+      useMutation(gql`
+        mutation {
+          test
+        }
+      `)
+    );
 
-    expect(readonly(mutation)).toMatchObject({
+    expect(mutation).toMatchObject({
       data: undefined,
       stale: false,
       fetching: false,
@@ -48,18 +50,18 @@ describe('useMutation', () => {
 
     const promise = mutation.executeMutation({ test: true });
 
-    expect(mutation.fetching.value).toBe(true);
-    expect(mutation.stale.value).toBe(false);
-    expect(mutation.error.value).toBe(undefined);
+    expect(mutation.fetching).toBe(true);
+    expect(mutation.stale).toBe(false);
+    expect(mutation.error).toBe(undefined);
 
     expect(clientMutation).toHaveBeenCalledTimes(1);
 
     subject.next({ data: { test: true }, stale: false });
-
-    await promise;
-    expect(mutation.fetching.value).toBe(false);
-    expect(mutation.stale.value).toBe(false);
-    expect(mutation.error.value).toBe(undefined);
-    expect(mutation.data.value).toHaveProperty('test', true);
+    await promise.then(function () {
+      expect(mutation.fetching).toBe(false);
+      expect(mutation.stale).toBe(false);
+      expect(mutation.error).toBe(undefined);
+      expect(mutation.data).toEqual({ test: true });
+    });
   });
 });

packages/vue-urql/src/useMutation.ts

@@ -15,8 +15,11 @@ import type {
 } from '@urql/core';
 
 import { useClient } from './useClient';
-import type { MaybeRef } from './utils';
-import { createRequestWithArgs, useRequestState } from './utils';
+import {
+  createRequestWithArgs,
+  type MaybeRefOrGetter,
+  useRequestState,
+} from './utils';
 
 /** State of the last mutation executed by {@link useMutation}.
  *
@@ -132,7 +135,7 @@ export function useMutation<T = any, V extends AnyVariables = AnyVariables>(
 }
 
 export function callUseMutation<T = any, V extends AnyVariables = AnyVariables>(
-  query: MaybeRef<DocumentInput<T, V>>,
+  query: MaybeRefOrGetter<DocumentInput<T, V>>,
   client: Ref<Client> = useClient()
 ): UseMutationResponse<T, V> {
   const data: Ref<T | undefined> = shallowRef();
@@ -156,7 +159,7 @@ export function callUseMutation<T = any, V extends AnyVariables = AnyVariables>(
 
       return pipe(
         client.value.executeMutation<T, V>(
-          createRequestWithArgs({ query, variables }),
+          createRequestWithArgs<T, V>({ query, variables }),
           context || {}
         ),
         onPush(result => {