title: React Apollo with react-hooks useEffect warning in console
body: <p>The following console warning has been dogging me for days...</p>
  
  <pre><code>Warning: The final argument passed to useEffect changed size between renders. The order and size of this array must remain constant.        react-dom.development.js:530
  
  Previous: [true, 1, , ]
  Incoming: [false, 7, , [object Object], function () { return queryData.afterExecute({ lazy: lazy }); }, 0]
      in SampleQuery (created by App)
      in ApolloProvider (created by App)
      in App
  
  Warning: The final argument passed to useEffect changed size between renders. The order and size of this array must remain constant.        react-dom.development.js:530
  
  Previous: []
  Incoming: [function () {
          return function () { return queryData.cleanup(); };
      }]
      in SampleQuery (created by App)
      in ApolloProvider (created by App)
      in App
  </code></pre>
  
  <p>The code for the app is as follows...</p>
  
  <p><strong>app.tsx</strong></p>
  
  <pre><code>import React from 'react';
  
  import { ApolloClient } from 'apollo-client';
  import { InMemoryCache } from 'apollo-cache-inmemory';
  import { HttpLink } from 'apollo-link-http';
  import {ApolloProvider} from '@apollo/react-hooks';
  
  import SampleQuery from "./sample-query";
  
  interface AppProps {
      compiler: string;
      framework: string;
  }
  
  const App = (props: AppProps) =&gt; {
  
      const cache = new InMemoryCache();
      const link = new HttpLink({
          uri: 'http://localhost:4000/',
      });
  
  
      const client = new ApolloClient({
          // Provide required constructor fields
          cache: cache,
          link: link,
  
          // Provide some optional constructor fields
          name: 'react-web-client',
          version: '1.3',
          queryDeduplication: false,
          defaultOptions: {
              watchQuery: {
                  fetchPolicy: 'cache-and-network',
              },
          }
      });
  
      return (
          &lt;ApolloProvider client={client}&gt;
              &lt;h1&gt;Hello from {props.compiler} and {props.framework}!&lt;/h1&gt;
              &lt;SampleQuery /&gt;
          &lt;/ApolloProvider&gt;
      );
  };
  
  export default App;
  
  </code></pre>
  
  <p><strong>sample-query.tsx...</strong></p>
  
  <pre><code>import React from 'react'
  import { useQuery } from '@apollo/react-hooks';
  import gql from 'graphql-tag'
  
  interface Link {
      id: string;
      description: string;
  }
  
  const SAMPLE_QUERY = gql`{
      feed {
          links {
              id
              description
          }
      }
  }`;
  
  const SampleQuery = () =&gt; {
  
      const { loading, error, data } = useQuery(SAMPLE_QUERY);
  
      if (loading) return &lt;p&gt;Loading ...&lt;/p&gt;;
  
      const links = (data &amp;&amp; data.feed.links) || [];
  
      return (&lt;ul&gt;
            {links.map((link:Link, idx:number) =&gt; {
                return (
                  &lt;li key={idx}&gt;
                      &lt;span&gt;{link.id}&lt;/span&gt;
                      &lt;span&gt; : &lt;/span&gt;
                      &lt;span&gt;{link.description}&lt;/span&gt;
                  &lt;/li&gt;
                );
            })}
        &lt;/ul&gt;)
  };
  
  export default SampleQuery;
  </code></pre>
  
  <p>I'm unsure why I get the warning as I'm pretty close to the examples from the React Apollo docs. Hopefully someone here has experienced this before and could point me in the right direction.</p>