title: Why does Apollo useQuery hook cause an infinite re-render on error?
body: <p>I'm using Apollo's <code>useQuery</code> hook along with the <code>graphql.macro</code> library to load queries from .graphql files. This is in a create-react-app project, so no custom webpack configuration.</p>
  <p>The component always starts out in the loading state and works if the network request is successful. However, if the network request is unsuccessful, the component re-renders and retries the request infinitely. The solution is to move the call to <code>loader</code> outside of the <code>useData</code> custom hook, but why is that? Is the <code>useQuery</code> hook internally memoizing requests based on the DocumentNode? If so, why does this only occur in the error state and not when the request succeeds?</p>
  <p><strong>useData.ts</strong></p>
  <pre><code>export const useData = (dataID: string = '') =&gt; {
    const dataQuery = loader('../graphql/queryData.graphql');
    const { data, error, loading } = useQuery&lt;IData&gt;(dataQuery, {
      variables: { id: dataID },
    });
  
    return { data, error, loading };
  };
  
  </code></pre>
  <p><strong>component.tsx</strong></p>
  <pre><code>export const ViewData: React.FunctionComponent&lt;Props&gt; = ({ dataID }) =&gt; {
    const { data, error, loading } = useData(dataID);
  
    if (loading) {
      return &lt;div&gt;Loading Data...&lt;/div&gt;;
    }
  
    if (error) {
      return (
        &lt;div&gt;
          {`Failed to find data ${dataID}, please check the ID and try again.`}
        &lt;div/&gt;
      );
    }
  
    const { name, type } = data;
  
    return (
      &lt;div&gt;
        { `Displaying ${name} of ${type}` }
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>Thanks for the help!</p>