fix(vue): fix variables typing

packages/core/src/utils/request.ts

@@ -147,8 +147,9 @@ export const keyDocument = (node: string | DocumentNode): KeyedDocumentNode => {
 
 /** Creates a `GraphQLRequest` from the passed parameters.
  *
- * @param q - A string of a document or a {@link DocumentNode}
+ * @param query - A string of a document or a {@link DocumentNode}
  * @param variables - A variables object for the defined GraphQL operation.
+ * @param extensions - An objet containing metadata that a GraphQL API may accept for spec extensions.
  * @returns A {@link GraphQLRequest}
  *
  * @remarks
@@ -163,16 +164,16 @@ export const createRequest = <
   Data = any,
   Variables extends AnyVariables = AnyVariables,
 >(
-  _query: DocumentInput<Data, Variables>,
-  _variables: Variables,
+  query: DocumentInput<Data, Variables>,
+  variables: Variables,
   extensions?: RequestExtensions | undefined
 ): GraphQLRequest<Data, Variables> => {
-  const variables = _variables || ({} as Variables);
-  const query = keyDocument(_query);
-  const printedVars = stringifyVariables(variables, true);
-  let key = query.__key;
+  const _variables = variables || ({} as Variables);
+  const _query = keyDocument(query);
+  const printedVars = stringifyVariables(_variables, true);
+  let key = _query.__key;
   if (printedVars !== '{}') key = phash(printedVars, key);
-  return { key, query, variables, extensions };
+  return { key, query: _query, variables: _variables, extensions };
 };
 
 /** Returns the name of the `DocumentNode`'s operation, if any.

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 => {