如何在 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/

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

How to create an update form with Apollo client in Reactjs

reactjs

react-apollo

apollo-client