使用TypeScript在Apollo Client执行GraphQL注册Mutation报错求助

• Mutation的GraphQL变量定义完全偏离后端schema约定：原定义中声明$type: String!作为唯一变量，将同一个字符串同时赋值给email、password字段，和实际业务需要传两个独立字段的结构完全脱节。
• 提交时传递的变量结构与Mutation定义不匹配：表单提交时传入的是{ input: {email, password} }结构，但Mutation文档中没有定义接收该input对象的对应变量，反而要求传入独立的字符串类型参数，必然触发类型校验报错。
• 返回字段的选取层级与后端定义不匹配：原生可运行的register接口返回结构为嵌套在user对象下的id、email字段，以及独立的errors字段集合，但原定义的Mutation直接在register返回根层级选取id、email，缺失user嵌套层级，会触发字段不存在的报错。

1. 修正GraphQL Mutation文档定义 #

按照后端schema的入参和返回结构重写Mutation定义，移除无意义的单字符串变量，对齐实际的接口要求：

import { gql, DocumentNode } from '@apollo/client';

const REGISTER: DocumentNode = gql`
  mutation Register($input: RegisterInput!) {
    register(input: $input) {
      user {
        id
        email
      }
      errors {
        path
        message
      }
    }
  }
`

• 变量定义对齐后端入参规则：直接将整个注册入参对象作为$input变量传入，移除冗余的重复变量定义
• 严格匹配返回字段的嵌套层级，和可正常运行的原生查询逻辑保持一致
• 完整选取errors字段，支持前端完成表单校验提示

2. 修正组件内的Mutation触发逻辑 #

通过useMutation Hook绑定上述修正后的Mutation定义，表单提交时传入的变量结构和Mutation定义完全对齐：

import { useMutation } from '@apollo/client';

// 组件内部逻辑
const [register] = useMutation(REGISTER);

return (
  <form 
    onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
      e.preventDefault()
      register({ 
        variables: { 
          input: {
            email: emailValue, 
            password: passwordValue
          } 
        } 
      })
    }}
  >
  {/* 表单控件 */}
  </form>
)

3. 补充TypeScript类型定义消除类型报错 #

为Mutation绑定明确的输入输出类型，通过TS的静态检查拦截结构不匹配的问题：

// 定义注册入参类型
type RegisterInput = {
  email: string;
  password: string;
}

// 定义Mutation返回值类型
type RegisterPayload = {
  user: {
    id: string;
    email: string;
  } | null;
  errors: Array<{
    path: string;
    message: string;
  }>
}

// 将类型绑定到useMutation，自动完成变量、返回值的类型校验
const [register] = useMutation<RegisterPayload, { input: RegisterInput }>(REGISTER);

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