title: Managing multiple calls to the same Apollo mutation
body: <p>So taking a look at the Apollo useMutation example in the docs <a href="https://www.apollographql.com/docs/react/data/mutations/#tracking-loading-and-error-states" rel="noreferrer">https://www.apollographql.com/docs/react/data/mutations/#tracking-loading-and-error-states</a></p>
  
  <pre><code>function Todos() {
  ...
    const [
      updateTodo,
      { loading: mutationLoading, error: mutationError },
    ] = useMutation(UPDATE_TODO);
  ...
  
    return data.todos.map(({ id, type }) =&gt; {
      let input;
  
      return (
        &lt;div key={id}&gt;
          &lt;p&gt;{type}&lt;/p&gt;
          &lt;form
            onSubmit={e =&gt; {
              e.preventDefault();
              updateTodo({ variables: { id, type: input.value } });
  
              input.value = '';
            }}
          &gt;
            &lt;input
              ref={node =&gt; {
                input = node;
              }}
            /&gt;
            &lt;button type="submit"&gt;Update Todo&lt;/button&gt;
          &lt;/form&gt;
          {mutationLoading &amp;&amp; &lt;p&gt;Loading...&lt;/p&gt;}
          {mutationError &amp;&amp; &lt;p&gt;Error :( Please try again&lt;/p&gt;}
        &lt;/div&gt;
      );
    });
  }
  </code></pre>
  
  <p>This seems to have a major flaw (imo), updating any of the todos will show the loading state for every single todo, not just the one that has the pending mutation. </p>
  
  <p><a href="https://i.stack.imgur.com/mUf2I.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/mUf2I.gif" alt="enter image description here"></a></p>
  
  <p>And this seems to stem from a larger problem: there's no way to track the state of multiple calls to the same mutation. So even if I did want to only show the loading state for the todos that were actually loading, there's no way to do that since we only have the concept of "is loading" not "is loading for todo X". </p>
  
  <p>Besides manually tracking loading state outside of Apollo, the only decent solution I can see is splitting out a separate  component, use that to render each Todo instead of having that code directly in the Todos component, and having those components each initialize their own mutation. I'm not sure if I think that's a good or bad design, but in either case it doesn't feel like I should have to change the structure of my components to accomplish this.</p>
  
  <p>And this also extends to error handling. What if I update one todo, and then update another while the first update is in progress. If the first call errors, will that be visible at all in the <code>data</code> returned from <code>useMutation</code>? What about the second call? </p>
  
  <p>Is there a native Apollo way to fix this? And if not, are there options for handling this that may be better than the ones I've mentioned? </p>
  
  <p>Code Sandbox: <a href="https://codesandbox.io/s/v3mn68xxvy" rel="noreferrer">https://codesandbox.io/s/v3mn68xxvy</a></p>