使用 Apollo 客户端运行 GraphQL Mutation答案

【问题标题】：Run GraphQL Mutation using Apollo Client使用 Apollo 客户端运行 GraphQL Mutation
【发布时间】：2021-05-30 00:59:24
【问题描述】：

所以我有这个允许用户创建帐户的 GraphQL Mutation：

mutation {
  register(input: {
    email: "bob@gmail.com"
    password: "bob123"
  }) {
    user {
      id
      email
    }
    errors {
      path
      message
    }
  }
}

我想使用 Apollo 客户端运行这个突变（注意：我使用的是 TypeScript）

const REGISTER: DocumentNode = gql`
mutation Register($type: String!) {
  register(input: {
    email: $type
    password: $type
  }) {
    email
    id
  }
}
`

<form onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    register({ variables: { input: {email: emailValue, password: passwordValue} } })
}}>

我一直遇到这个错误：

任何帮助将不胜感激！提前致谢！

【问题讨论】：

传递的变量 (input) 与查询/突变 (type) 中定义的不同 - 阅读文档 graphql.org/learn/queries/#variables ... 并使用“查询变量”在操场上测试突变
谢谢我已经弄明白了。

标签： reactjs typescript graphql apollo

【解决方案1】：

更新：我通过这样做修复了它：

// GraphQL Mutation to register an account
const REGISTER: DocumentNode = gql`
mutation register($email: String!, $password: String!) {
  register(input: {
    email: $email
    password: $password
  }) {
    user {
      email
      id
    }
    errors {
      path
      message
    }
  }
}
`

【讨论】：

通常更短[更好]的是使用$input: someInputType变量（从API读取类型）并将其传递给register(input: $input)查询