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

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

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

将状态参数传递给突变

1 个答案: