title: Best pattern for GraphQL create or update form with React?
body: <p>I am new to GraphQL but have experience in React.</p>
  
  <p>I am trying to build a simple app with React and Apollo where the same form is used to create or update an entity, say a <em>Post</em>.</p>
  
  <p>I don't want to duplicate the form, so i thought i would define a <code>PostForm</code> component and use from both <code>CreatePostPage</code> and <code>UpdatePostPage</code> pages.</p>
  
  <p><strong>CreatePostPage.js (simplified)</strong></p>
  
  <pre><code>const CreatePostPage = ({match}) =&gt; (
    &lt;div&gt;
      &lt;h1&gt;Create Post&lt;/h1&gt;
      &lt;Mutation mutation={POST_CREATE}&gt;
        {(createPost, {data}) =&gt; (
          &lt;PostForm onSubmit={(formData) =&gt; createPost(formData)} /&gt;
        )}
      &lt;/Mutation&gt;
    &lt;/div&gt;
  )
  </code></pre>
  
  <p><strong>UpdatePostPage.js (simplified)</strong></p>
  
  <pre><code>const UpdatePostPage = ({match}) =&gt; (
    &lt;div&gt;
      &lt;h1&gt;Update Post&lt;/h1&gt;
      &lt;Query query={POST_GET} variables={{id: match.params.id}}&gt;
        {({ data, networkStatus }) =&gt; {
          const post = data &amp;&amp; data.post ? omitDeep(data.post, '__typename') : null;
          return (
            &lt;Mutation mutation={POST_UPDATE}&gt;
              {(updatePost, {data}) =&gt; (
                &lt;PostForm post={post} onSubmit={(formData) =&gt; updatePost(formData)} /&gt;
              ))}
            &lt;/Mutation&gt;
          );
        }}
      &lt;/Query&gt;
    &lt;/div&gt;
    )
  </code></pre>
  
  <p>Now <code>PostForm</code> needs to maintain its own state so that the user can edit the post.
  I was planning to use <code>componentWillReceiveProps()</code>, saw that the way to do this now would be <code>getDerivedStateFromProps()</code>, then read multiple time that i <a href="https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html" rel="nofollow noreferrer">Probably Don't Need Derived State</a>...</p>
  
  <p>So i am wondering if this is the right way to do this?</p>
  
  <p>My issue is well described in this <a href="https://medium.com/@ddunderfelt/controlled-forms-with-react-f7ecc1ce6155" rel="nofollow noreferrer">medium article</a>
  and i implemented the solution (which is also proposed by React team)</p>
  
  <p>But it feels quite hacky.
  Is this the right way to do this or should i handle the local state differently? Wondering how Dan Abramov would handle a simple create/update app like this =)</p>
  
  <p>Thanks for helping!</p>