title: Apollo's MockedProvider doenst work when a component has multiple useQuery's?
body: <p>I have a simple Apollo set up. In this CodeSandbox example I'm using the  <code>MockedProvider</code> but the live one also works:</p>
  <p><a href="https://codesandbox.io/s/winter-glitter-o8ug5?file=/src/App.js:0-1164" rel="noreferrer">https://codesandbox.io/s/winter-glitter-o8ug5?file=/src/App.js:0-1164</a></p>
  <pre><code>import { ApolloClient, InMemoryCache } from &quot;@apollo/client&quot;;
  import { gql, useQuery, ApolloProvider } from &quot;@apollo/client&quot;;
  import { MockedProvider } from &quot;@apollo/client/testing&quot;;
  
  const client = new ApolloClient({
    uri: &quot;https://48p1r2roz4.sse.codesandbox.io&quot;,
    cache: new InMemoryCache()
  });
  
  const EXCHANGE_RATES_1 = gql`
    query GetExchangeRates {
      rates(currency: &quot;USD&quot;) {
        rate
      }
    }
  `;
  
  const mocks = [
    {
      request: {
        query: EXCHANGE_RATES_1
      },
      result: {
        data: {
          rates: [
            {
              __typename: &quot;ExchangeRate&quot;,
              rate: &quot;123&quot;
            }
          ]
        }
      }
    }
  ];
  
  const MyComponent = () =&gt; {
    const { data: data1, loading: loading1 } = useQuery(EXCHANGE_RATES_1);
    if (loading1) return &lt;p&gt;Loading...&lt;/p&gt;;
    return (
      &lt;div&gt;
        &lt;h1&gt;{data1?.rates[0].rate}&lt;/h1&gt;
      &lt;/div&gt;
    );
  };
  
  const AppMocked = () =&gt; {
    return (
      &lt;MockedProvider addTypename={false} mocks={mocks}&gt;
        &lt;MyComponent /&gt;
      &lt;/MockedProvider&gt;
    );
  };
  
  const AppLive = () =&gt; {
    return (
      &lt;ApolloProvider client={client}&gt;
        &lt;MyComponent /&gt;
      &lt;/ApolloProvider&gt;
    );
  };
  
  export default AppMocked;
  </code></pre>
  <p>I need to have an additional <code>useQuery</code> in <code>MyComponent</code>. I know this is a weird example as it should just be one query but it illustrates the issue I'm running into.</p>
  <p><a href="https://codesandbox.io/s/magical-dewdney-j451d?file=/src/App.js:0-1630" rel="noreferrer">https://codesandbox.io/s/magical-dewdney-j451d?file=/src/App.js:0-1630</a></p>
  <pre><code>import { ApolloClient, InMemoryCache } from &quot;@apollo/client&quot;;
  import { gql, useQuery, ApolloProvider } from &quot;@apollo/client&quot;;
  import { MockedProvider } from &quot;@apollo/client/testing&quot;;
  
  const client = new ApolloClient({
    uri: &quot;https://48p1r2roz4.sse.codesandbox.io&quot;,
    cache: new InMemoryCache()
  });
  
  const EXCHANGE_RATES_1 = gql`
    query GetExchangeRates {
      rates(currency: &quot;USD&quot;) {
        rate
      }
    }
  `;
  const EXCHANGE_RATES_2 = gql`
    query GetExchangeRates {
      rates(currency: &quot;USD&quot;) {
        currency
      }
    }
  `;
  
  const mocks = [
    {
      request: {
        query: EXCHANGE_RATES_1
      },
      result: {
        data: {
          rates: [
            {
              __typename: &quot;ExchangeRate&quot;,
              rate: &quot;123&quot;
            }
          ]
        }
      }
    },
    {
      request: {
        query: EXCHANGE_RATES_2
      },
      result: {
        data: {
          rates: [
            {
              __typename: &quot;ExchangeRate&quot;,
              currency: &quot;YOLO&quot;
            }
          ]
        }
      }
    }
  ];
  
  const MyComponent = () =&gt; {
    const { data: data1, loading: loading1 } = useQuery(EXCHANGE_RATES_1);
    const { data: data2, loading: loading2 } = useQuery(EXCHANGE_RATES_2);
    if (loading1 || loading2) return &lt;p&gt;Loading...&lt;/p&gt;;
    return (
      &lt;div&gt;
        &lt;h1&gt;{data1?.rates[0].rate}&lt;/h1&gt;
        &lt;h2&gt;{data2?.rates[0].currency}&lt;/h2&gt;
      &lt;/div&gt;
    );
  };
  
  const AppMocked = () =&gt; {
    return (
      &lt;MockedProvider addTypename={false} mocks={mocks}&gt;
        &lt;MyComponent /&gt;
      &lt;/MockedProvider&gt;
    );
  };
  
  const AppLive = () =&gt; {
    return (
      &lt;ApolloProvider client={client}&gt;
        &lt;MyComponent /&gt;
      &lt;/ApolloProvider&gt;
    );
  };
  
  export default AppMocked;
  </code></pre>
  <p>The live version works fine but the mocked version has an empty H1. When I log out <code>data1</code> I can see that it initially does have data but on subsequent renders becomes 'undefined'</p>
  <p>I couldn't see anything in the docs to explain why the mocking isnt working: <a href="https://www.apollographql.com/docs/react/development-testing/testing/" rel="noreferrer">https://www.apollographql.com/docs/react/development-testing/testing/</a></p>