title: Prefill React Form with values
body: <p>I would like to create edit Form in react for Post, so my workflow is this fetch post, setState of the form, and show it... Im trying to make this in functional component since its easy for me to use graphql there</p>
  
  <pre><code>import React, { useState } from 'react';
  import gql from 'graphql-tag';
  import { useQuery } from '@apollo/react-hooks';
  import useForm from 'react-hook-form';
  
  const GET_POST = gql`
  query getPost($id: String!) {
      getPost(id: $id) {
        id
        title
        content
        excerpt
        author {
            name
        }
      }
    }
  `;
  
  const EditPost = (props) =&gt; {
       //  here Im using postId to fetch post
      const PostID = props.history.location.state.id;
        // Im using react-hook-form
      const { register, errors, reset, handleSubmit } = useForm();
      let POST = { title: '', author: '', content: '', image: '', excerpt: '' };
      //set initial state of form
      const [values, setValues] = useState({
          title: POST.title, author: POST.author, content: POST.content, image: POST.image, excerpt: POST.excerpt
      });
  
  
      const { data, loading, error } = useQuery(GET_POST, {
          variables: { id: PostID },
      });
  
      if (loading) return &lt;p&gt;LOADING&lt;/p&gt;;
      if (error) return &lt;p&gt;ERROR&lt;/p&gt;;
  
      const fetchedPost = data.getPost;
      // here is a problem I would like when post is fetched to set those values to state &amp; then use it to make form reactive ???
     if (fetchedPost) {
          const { title, author, content, image, excerpt } = fetchedPost;
  
      }
  
      return (
          &lt;div className="edit-form"&gt;
              &lt;h2&gt;Edit Post&lt;/h2&gt;
              &lt;fieldset&gt;
                  &lt;form&gt;
                      &lt;p className="form-group"&gt;
                          &lt;label htmlFor="title"&gt;Post Title: &lt;/label&gt;
                          &lt;input type="text" name="title" id="name"
                              value={values.title}
                              aria-invalid={errors.title ? 'true' : 'false'}
                              aria-describedby="error-title-required error-title-maxLength"
                              ref={register({ required: true, maxlength: 20 })}
                              placeholder="Name" /&gt;
                          &lt;span&gt;{errors.title &amp;&amp; 'Title is required'} &lt;/span&gt;
                      &lt;/p&gt;
  
                  &lt;/form&gt;
              &lt;/fieldset&gt;
  
          &lt;/div&gt;);
  }
  
  
  export default EditPost;
  </code></pre>
  
  <p>The problem is when I fetch the Post I do not know how to set state for the form &amp; how to make the form reactive ???</p>