如何在Reactjs中使用Apollo客户端创建更新表单

Question

我喜欢用Apollo客户端编辑从GraphQL api获取的联系人列表。我看到很多通过突变添加新项目的示例，但我找不到更新现有项目的任何示例。通常我会创建一个状态对象，并使输入字段修改状态对象的属性，但我不知道如何修改我提取的数据。如何更新视图状态？

import React, {Component} from 'react';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';

class EditContact extends Component {
  _update() {
    // Mutation call
  }

  render() {
    if(this.props.contactQuery && this.props.contactQuery.loading) {
      return <div>Loading</div>
    }
    if(this.props.contactQuery && this.props.contactQuery.error) {
      return <div>Error</div>
    }
    const contact = this.props.contactQuery.contact;

    return(
      <div className="contact">
        <input type="text" defaultValue={contact.firstName} onChange={??} />
        <input type="submit" value="Save" onClick={this._update}>
      </div>)
  }
}

const CONTACT_QUERY = gql`
  query contactQuery($id: Int!) {
    contact(id: $id) {
      id
      firstName
      lastName
    }
  }
  `

export default graphql(CONTACT_QUERY, {
  name: 'contactQuery',
  options: ownProps => ({ variables: { id: ownProps.match.params.id } })
})(EditContact);

我知道如何创建和使用变异本身，但如何跟踪表单更改以及如何在表单字段中设置初始数据？

Answer 1

你想使用一个受控输入，我在这里了解到它们：https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/