title: Handling errors with react-apollo useMutation hook
body: <p>I have been trying to get my head around this problem but haven't found a strong answer to it. I am trying to execute a login mutation using the <code>useMutation</code> hook.</p>
  <p><em><strong>TLDR; I want to know what exactly is the difference between the <code>onError</code> passed in <code>options</code> and <code>error</code> given to me by the <code>useMutation</code></strong></em></p>
  <p>Here's my code snippet</p>
  <pre><code>const [login, { data, loading, error }] = useMutation(LOGIN_QUERY, {
    variables: {
      email,
      password
    },
    onError(err) {
      console.log(err);
    },
  });
  
  </code></pre>
  <p>On the server-side, I have a preset/hardcoded email used for login and I am not using Apollo or any other client. In the resolver of this Login Mutation, I simply throw an error if the email is not same using</p>
  <pre><code>throw new Error('Invalid Email');
  </code></pre>
  <p>Now I want to handle this error on the client-side (React). But my concern is that if I use the 'error' returned from the <code>useMutation</code> hook and try to show the error in this way</p>
  <pre><code>render() {
    ...
    {error &amp;&amp; &lt;div&gt; Error occurred &lt;/div&gt;}
    ...
  }
  </code></pre>
  <p>the error is updated in the UI but then immediately React shows me a screen with:</p>
  <pre><code>Unhandled Rejection (Error): Graphql error: My-custom-error-message
  </code></pre>
  <p>But, if I use <code>onError</code> passed in <code>options</code> to <code>useMutate</code> function, then it doesn't show me this screen and I can do whatever I want with the error.</p>
  <p>I want to know what exactly is the difference between the <code>onError</code> passed in <code>options</code> and <code>error</code> given to me by the <code>useMutation</code> and why does React show me that error screen when <code>onError</code> is <strong>not</strong> used.</p>
  <p>Thanks!</p>