无法将状态参数传递给突变

Question

我阅读了有关Apollo graphql client 的文档，但仍然有一些关于Apollo 和react 的问题。

考虑一下，我们有一个简单的表单，其中包含 4 个字段和提交按钮。按下提交后，字段中的值将保存到 this.state.data（仔细检查是否正确保存）。

在后端，我有一个 mutation 之类的：userCreate(input: UserInput): User，它肯定接受此字段输入。

问题是：

如何从this.state.data 字段正确绑定值？

到目前为止，我有以下代码：

onChange = e =>
    this.setState({
      data: { ...this.state.data, [e.target.id]: e.target.value }
    });

  handleSubmit = async () => {
    writeToLog(this.state.data)
    const { name, email, externalId, userCode} = this.state.data
    this.props.userCreateQuery({
      input: {
        name,
        email,
        externalId,
        userCode
      }
    })
  }

这就是突变的样子：

const QUERY_PERSON_MUTATION = gql`
mutation userCreateQuery($name: String!, $email: String!, $externalId: String!, $userCode: String!) {
  userCreate(input: {
    Name: $name,
    Email: $email,
    ExternalId: $externalId,
    UserCode: $userCode}) {
    Name
    Email
    ExternalId
    UserCode
  }
}`;

组件包装：

const NewUserFormWithData = graphql(QUERY_PERSON_MUTATION, { name: 'userCreateQuery' })(NewUserForm);

    export default withApollo(NewUserFormWithData)

更新 1：

架构：

const typeDefs = `
type User {
   UserId: Int
   /* other fields */
}

input UserInput {
   UserId: Int
   UserCode: String
   /* other fields */
}

type Mutation {
   userCreate(input: UserInput): User
   userUpdate(userId: Int, input: UserInput): User    
}`;

Answer 1

您必须在 variables 键中使用您的数据：

this.props.userCreateQuery({
  variables: {
      input: {
        name,
        email,
        externalId,
        userCode
      }
  }
})

PS.：我不知道你的 graphql 服务器，但你可能没有使用你的变异作品的关键输入。

我们讨论过的呢：

您的按键输入突变。

 const QUERY_PERSON_MUTATION = gql`
    mutation userCreateQuery($name: String!, $email: String!, $externalId: String!, $userCode: String!) {
      userCreate(
        Name: $name,
        Email: $email,
        ExternalId: $externalId,
        UserCode: $userCode) {
        Name
        Email
        ExternalId
        UserCode
      }
    }`;

this.props.userCreateQuery({
  variables: {
      name,
      email,
      externalId,
      userCode
  }
})