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

【问题标题】：How to create an update form with Apollo client in Reactjs如何在 Reactjs 中使用 Apollo 客户端创建更新表单
【发布时间】：2018-06-04 01:57:30
【问题描述】：

我喜欢使用 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);

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

【问题讨论】：

标签： reactjs react-apollo apollo-client

【解决方案1】：

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

【讨论】：

这就是我通常会做的事情的意思。但是数据是异步获取的，并且 this.props.contactQuery.contact 在构造函数中不可用。那么加载时如何设置初始数据呢？
我通常用空字符串初始化状态，然后在 componentWillReceiveProps 中查看联系人何时可用，并使用联系人调用初始化函数，用正确的值更新状态。
有时答案很简单。我检查 this.props.contactQuery 和 this.props.contactQuery.contact 是否在 componentWillReceiveProps 中设置，然后按照您的建议设置状态。谢谢老兄。