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/私は通常どうなるのかを意味したものです