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

Question

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

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

在后端，我有一个 mutation 像：userCreate(input: UserInput): User 肯定会接受这个字段输入。

问题是：

How to execute mutation properly binding values from a this.state.data fields?

截至目前，我有以下代码：

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

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

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
  }
})

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

Unable to pass state parameters to mutation

reactjs

graphql

apollo-client