title: How do I assign values to states once I open my edit form?
body: <p>I'm trying to create my first simple CRUD front-end app in React. I have some problems with the edit form. </p>
  
  <p>Whenever I display the edit form with fields filled with values of a chosen record, I need to edit each of the field in order to save it back to the database. If I don't change any of the fields values - including the id of a record - or change only one value, I get the error: 
  <code>[GraphQL error]: Message: could not convert string to float: , Location: undefined, Path: undefined</code>.
  I am aware of the fact, that I can add <code>Mutation</code> in <code>Query</code> but then I get problems with refetching the updated list of records in the parent component and still get the error message mentioned above.</p>
  
  <pre><code>export class EditForm extends Component {
      constructor(props) {
          super(props);
          this.state = {
              id: '',
              name: '',
              price: '',
              category: ''
          };
          this.handleInputChange = this.handleInputChange.bind(this);
      }
  
      handleInputChange = (event) =&gt; {
          const target = event.target;
          const value = target.value;
          const name = target.name;
  
          this.setState({
              [name]: value
          });
      };
  
      updateSome = async () =&gt; {
        const {id, name, price, category} = this.state;
        await this.props.editOne({
            variables: {
                id,
                name,
                price,
                category
            },
            refetchQueries: [{ query: ones }]
        })
      };
  
      render() {
          return (
              &lt;div&gt;
                  &lt;Query query={GET_ONE} variables={{one: Number(this.props.id)}}&gt;
          {({ loading, error, data, networkStatus }) =&gt; {
              if (loading) return "Loading...";
              if (error) return `Error! ${error.message}`;
              if (networkStatus === 4) return "Refetching!";
              return (
                  &lt;div&gt;
                       {data.ones.map(one =&gt; (
                         &lt;Form key={one.id}&gt;
                      &lt;Row&gt;
                          &lt;Col&gt;
                          &lt;Form.Group&gt;
                          &lt;Form.Label&gt;ID&lt;/Form.Label&gt;
                              &lt;Form.Control
                                  name='id'
                                  defaultValue={one.id}
                                  onChange={this.handleInputChange}
                                  type="text"
                                  placeholder="id"
                              /&gt;
                          &lt;/Form.Group&gt;
                          &lt;/Col&gt;
                          &lt;Col&gt;
                          &lt;Form.Group&gt;
                          &lt;Form.Label&gt;Name&lt;/Form.Label&gt;
                              &lt;Form.Control
                                  name='name'
                                  defaultValue={one.name}
                                  onChange={this.handleInputChange}
                                  type="text"
                                  placeholder="name"
                              /&gt;
                          &lt;/Form.Group&gt;
                          &lt;/Col&gt;
                          &lt;Col&gt;
                          &lt;Form.Group&gt;
                              &lt;Form.Label&gt;Price&lt;/Form.Label&gt;
                              &lt;Form.Control
                                  name='price'
                                  defaultValue={one.price}
                                  onChange={this.handleInputChange}
                                  type="number"
                                  step={0.01}
                                  placeholder="price"
                              /&gt;
                          &lt;/Form.Group&gt;
                          &lt;/Col&gt;
                          &lt;Col&gt;
                          &lt;Form.Group&gt;
                              &lt;Form.Label&gt;Category&lt;/Form.Label&gt;
                              &lt;Query query={twos}&gt;
                                  {({loading, error, data}) =&gt; {
                                      if (loading) return &lt;Spinner animation="border" role="status"&gt;
                                                  &lt;span className="sr-only"&gt;Loading...&lt;/span&gt;
                                              &lt;/Spinner&gt;;
                                      if (error) return `Error! ${error.message}`;
                                      return (
                                          &lt;Form.Control name='category'
                                                        defaultValue={one.category.id}
                                                        onChange={this.handleInputChange}
                                                        as="select"
                                                        placeholder="category"
                                          &gt;
                                              {data.twos.map(two =&gt; (
                                          &lt;option key={two.id} value={two.id}&gt;{two.category}&lt;/option&gt;
                                                  ))}
                                      &lt;/Form.Control&gt;
                                      );
                                  }}
                              &lt;/Query&gt;
                          &lt;/Form.Group&gt;
                          &lt;/Col&gt;
                      &lt;/Row&gt;
                      &lt;ButtonToolbar&gt;
                              &lt;Button
                                  variant="primary"
                                  onClick={() =&gt; this.updateSome()}
                              &gt;Update&lt;/Button&gt;
                          &lt;/ButtonToolbar&gt;
                  &lt;/Form&gt;
                      ))}
                  &lt;/div&gt;
              );
          }}
      &lt;/Query&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>How do I assign initial values of a chosen record to <code>this.state.id</code>, <code>this.state.name</code> and so on, once the <code>Component</code> is displayed? I know how to enter some values to this.state in <code>constructor</code> by hand, but I want to pass the values that are displayed in the form fields to <code>this.state</code>.</p>