Apollo useMutation无法传递变量问题排查求助

核心错误点 #

• handleSubmit未声明为async：使用await调用异步函数createUser，但函数本身未标记async，这会触发语法错误，同时干扰TypeScript的类型推断逻辑。
• 未指定useMutation泛型类型：TypeScript无法自动推导mutation的变量和返回数据类型，导致变量参数与预期类型不匹配，抛出类型错误。

修正后的代码 #

import { useMutation, gql } from '@apollo/client';
import { FormEvent } from 'react';

// 定义mutation返回数据的类型
type CreateUserResponse = {
  createUserByEmail: {
    age: number;
  };
};

// 定义mutation接收的变量类型
type CreateUserVariables = {
  hoge: string;
};

const CREATE_USER = gql(/* GraphQL */ `
    mutation createUserByEmail($hoge: String!) {
        createUserByEmail(input: $hoge) {
            age
        }
    }
`);

// 给useMutation指定泛型，明确返回数据和变量类型
const [createUser, { loading, error, data }] = useMutation<CreateUserResponse, CreateUserVariables>(CREATE_USER);

// 标记函数为async，支持await语法
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
  e.preventDefault(); // 阻止表单默认提交行为，避免页面刷新
  try {
    const response = await createUser({ variables: { hoge: 'hoge' } });
    console.log('用户创建成功:', response);
  } catch (err) {
    console.error('用户创建失败:', err);
  }
};

额外注意事项 #

• 若你的GraphQL Schema中createUserByEmail的input参数要求是对象结构（比如input: { email: String! }），需同步调整变量的结构，确保与Schema定义完全一致。
• 显式定义泛型类型后，TypeScript会自动校验变量和返回数据的结构，提前发现类型不匹配问题。

内容的提问来源于stack exchange，提问作者Kazuya Tomita