title: graphql cache DataIdFromObject not causing React re-render
body: <p>I have two mutations <code>onLike</code> and <code>onSubmit</code> defined in one react component. For <code>onLike</code> mutation, I can use cache with <code>DataIdFromObject</code> to update the data without refetching the data with either <code>this.props.data.refetch()</code> or <code>refetchQueries: []</code>. BUT not for <code>onSubmit</code> mutation. </p>
  
  <p>// --- React component</p>
  
  <pre><code>onSubmit(e) {
      e.preventDefault();
      this.props
          .addLyricQuery({
              variables: {
                  content: this.state.content,
                  songId: this.props.params.id,
              },
          });
  }
  
  onLike(id, likes) {
      this.props.likeLyricQuery({
          variables: { id },
          optimisticResponse: {
              __typename: "Mutation",
              likeLyric: {
                  id,
                  __typename: "LyricType",
                  likes: likes + 1,
              },
          },
      });
  }
  
  &lt;button onClick={() =&gt; this.onLike(lyric.id, lyric.likes)}&gt;
  
  &lt;button onClick={e =&gt; this.onSubmit(e)}&gt;Submit&lt;/button&gt;
  </code></pre>
  
  <p>// --- apollo connect</p>
  
  <pre><code>const enhancer = compose(
      graphql(fetchSongQuery, {
          options: props =&gt; ({
              variables: {
                  id: props.params.id,
              },
          }),
      }),
      graphql(addLyricQuery, { name: "addLyricQuery" }),
      graphql(likeLyricQuery, { name: "likeLyricQuery" })
  );
  export default enhancer(SongDetail);
  </code></pre>
  
  <p>// --- addLyric Query</p>
  
  <pre><code>import gql from "graphql-tag";
  
  export default gql`
      mutation AddLyricToSong($content: String, $songId: ID) {
          addLyricToSong(content: $content, songId: $songId) {
              id
              title
              lyrics {
                  id
                  content
              }
          }
      }
  `;
  </code></pre>
  
  <p>// --- like query</p>
  
  <pre><code>import gql from "graphql-tag";
  
  export default gql`
      mutation LikeLyric($id: ID!) {
          likeLyric(id: $id) {
              id
              likes
              content
          }
      }
  `;
  </code></pre>
  
  <p>// --- apollo store</p>
  
  <pre><code>const client = new ApolloClient({
      dataIdFromObject: o =&gt; o.id
  });
  </code></pre>
  
  <p><strong>What do I expect to see?</strong></p>
  
  <p>I expect the behavior between <code>onSubmit</code> and <code>onLike</code> to be the same. So when I click on either button, it should only query once, without needing to refetch the data.</p>
  
  <p><strong>What do I see?</strong></p>
  
  <p><code>onLike</code> works as expected. When clicked, it only issues one mutation, and the react component is rendered immediately. </p>
  
  <p><code>onSubmit</code> leads me to a blank page, then once I refresh the page, the new data displays. I can make it work by using <code>refetch</code> or <code>refetchQueries: []</code> but that is besides the point.</p>