title: Get & update the form data in react
body: <p>I'm using React &amp; Apollo client to fetch the data from GraphQL server.<br>
  Now I have written following component in react.  </p>
  
  <ol>
  <li>Component for listing all the item - working.  </li>
  <li>Component for creating an item - working.   </li>
  <li>Component for updating the item - not working (not sure how to do that).    </li>
  </ol>
  
  <p>I have 2 component files.  </p>
  
  <ol>
  <li>UpdateAudio.js.   </li>
  <li>AudioForm.js.   </li>
  </ol>
  
  <p>Now.   </p>
  
  <ol>
  <li>I need to get the data from GraphQL server for given audioID (will get from the path params).   </li>
  <li>then set that audio in state.   </li>
  <li>and pass the audio state to AudioForm component.    </li>
  </ol>
  
  <p>I'm initializing the audio with blank fields initially in state.<br>
  I can get the data using Query but I'm not sure how to update the audio state which will be passed to AudioForm and populated the data further.</p>
  
  <p>UpdateAudio.js</p>
  
  <pre><code>import React, { Component, Fragment } from 'react';
  import { withRouter } from 'react-router-dom';
  import { Mutation, Query, graphql } from 'react-apollo';
  import { UpdateAudioQuery, GetAudio } from '../query';
  import { Button, Grid, LinearProgress } from '@material-ui/core';
  import AudioForm from '../components/AudioForm';
  
  
  class UpdateAudio extends Component {
      constructor(props) {
          super(props);
          this.state = {
              site: "5d517862-0630-431c-94b1-bf34de6bfd8b",
              audio: {
              site: "5d517862-0630-431c-94b1-bf34de6bfd8b",
              title: '',
              description: '',
  
              }
          };
          this.updateCache = this.updateCache.bind(this);
          this.handleChange = this.handleChange.bind(this);
      }
  
      updateCache = (cache, { data }) =&gt; {
          if (data.createAudio.audio.guid) {
              console.log("redirecting...")
              this.props.history.push('/audios')
          }
      }
  
      handleChange = event =&gt; {
          const { name, value } = event.target;
  
          this.setState(prevState =&gt; ({
              audio: {
              ...prevState['audio'],
              [name]: value,
              }
          }));
      };
  
      render() {
          return (
              &lt;Fragment&gt;
                  &lt;AudioForm audio={this.state.audio} handleChange={this.handleChange}  /&gt;
                  &lt;Grid container alignItems="center" justify="center"&gt;
                      &lt;Grid item&gt;
                          &lt;Mutation mutation={UpdateAudioQuery} update={this.updateCache}&gt;
                              {(Update, {loading, data, error}) =&gt; {
                              if (loading) {
                                  return &lt;Button variant="contained" size="large" color="secondary" disabled&gt;Save&lt;/Button&gt;
                              }
                              else if (error) {
                                  return &lt;div&gt;{error}&lt;/div&gt;
                              }
                              else {
                                  return &lt;Button variant="contained" size="large" color="secondary" onClick={() =&gt; Update({variables: this.state.audio})}&gt;Update&lt;/Button&gt;
                              }
                              }}
                          &lt;/Mutation&gt;
                      &lt;/Grid&gt;
                  &lt;/Grid&gt;
              &lt;/Fragment&gt;
          )
      }
  }
  
  UpdateAudio = withRouter(UpdateAudio)
  
  export default graphql(GetAudio,
      {
          name:'Get',
          options: ownProps =&gt; ({ variables: {site: "5d517862-0630-431c-94b1-bf34de6bfd8b", guid: ownProps.match.params.guid} })
      })(UpdateAudio);
  </code></pre>
  
  <p>AudioForm.js</p>
  
  <pre><code>import React, {Fragment} from 'react';
  import { TextField, Grid } from '@material-ui/core';
  
  
  class AudioForm extends React.Component {
  
    render() {
      console.log(this.props.audio.title);
  
      return (
        &lt;Fragment&gt;
        &lt;form  noValidate autoComplete="off"&gt;
          &lt;Grid container spacing={24} alignItems="center" justify="center"&gt;
            &lt;Grid item md={4} xs={12}&gt;
              &lt;TextField
                id="audio-title"
                name="title"
                label="Title"
                margin="normal"
                variant="outlined"
                InputLabelProps={{ shrink: true }}
                fullWidth
                defaultValue={this.props.audio.title}
                onChange={this.props.handleChange}
                required
              /&gt;
            &lt;/Grid&gt;
            &lt;Grid item md={4} xs={12}&gt;
              &lt;TextField
                id="audio-description"
                name="description"
                label="Description"
                margin="normal"
                variant="outlined"
                InputLabelProps={{ shrink: true }}
                fullWidth
                defaultValue={this.props.audio.description}
                onChange={this.props.handleChange}
              /&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
        &lt;/form&gt;
        &lt;/Fragment&gt;
      );
    }
  }
  
  
  export default AudioForm;
  </code></pre>
  
  <p>query.js</p>
  
  <pre><code>    import gql from 'graphql-tag';
  
  
      export const GetAudio = gql`
          query Get($site: String!, $guid: String!) {
          getAudio(site: $site, guid: $guid){
              guid
              siteGuid
              title
              description
          }
      }`
  
      export const UpdateAudio = gql`
          mutation Update($site: String!, $guid: String!, $title: String, $description: String) {
          updateAudio(
              input:{
                  guid: $guid,
                  site: $site,
                  title: $title,
                  description: $description
              }
          ) {
              audio{
                  guid
                  siteGuid
                  title
                  status
              }
          }
      }`;
  </code></pre>