Next.js搭配Formik提交注册表单触发GraphQL参数校验错误如何解决

报错排查方向 #

1. 先查看具体错误详情 #

你当前的catch块直接吞掉了错误没有打印，首先修改catch代码输出具体校验信息，可以直接定位出错字段：

catch (err: any) {
  console.log('GraphQL错误详情：', err?.graphQLErrors || err)
  return;
}

err.graphQLErrors 中会明确返回哪个字段不符合要求，是缺失、格式错误还是取值不合法。

2. 常见错误原因 #

（1）手机号格式校验失败

你初始化的测试手机号是13位字符串3211231290421，多数后端会对手机号做格式校验，比如要求11位国内手机号、符合E.164国际格式等，不符合规则会直接返回参数校验错误。

（2）type字段取值不匹配

你传的type是固定值member，如果后端该字段是枚举类型，仅支持指定取值（比如MEMBER/USER/ADMIN大小写不匹配，或者取值不在枚举范围内），也会触发校验错误。

（3）密码/邮箱格式不符合后端要求

如果你的regsiterSchema（注意拼写疑似错误，正确拼写为registerSchema）没有和后端校验规则对齐，比如后端要求密码最少8位、邮箱必须符合RFC规范，前端校验漏了的话也会提交失败。

（4）Mutation定义和后端Schema不匹配

你当前的Mutation是把入参拆成了7个独立变量，但如果后端实际的register接口要求接收一个单独的input对象参数，你的Mutation写法就有问题，需要修改为：

export const SIGN_UP = gql`
  mutation register(
    $input: RegisterInput!
  ) {
    register(
      input: $input
    ) {
      token
      user {
        username
        email_verified
        is_verified
      }
    }
  }
`

对应调用时的variables结构也要调整：

const response = await addUser({
  variables: { input: input },
});

3. 快速验证方法 #

你可以先把固定测试值直接写死在variables里提交，排除Formik赋值的问题：

const response = await addUser({
  variables: {
    username: "testuser",
    display_name: "testuser",
    email: "test@test.com",
    password: "Test123456",
    phone: "13800138000",
    type: "member",
    language: "en",
  },
});

如果写死值可以提交成功，说明是Formik表单赋值/前端校验的问题，否则就是Mutation定义或者字段取值不符合后端要求。

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