React Apollo with react-hooks useEffect warning in console - reactjs

Question

The following console warning has been dogging me for days...
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
The code for the app is as follows...
app.tsx
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) => {
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 (
<ApolloProvider client={client}>
<h1>Hello from {props.compiler} and {props.framework}!</h1>
<SampleQuery />
</ApolloProvider>
);
};
export default App;
sample-query.tsx...
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 = () => {
const { loading, error, data } = useQuery(SAMPLE_QUERY);
if (loading) return <p>Loading ...</p>;
const links = (data && data.feed.links) || [];
return (<ul>
{links.map((link:Link, idx:number) => {
return (
<li key={idx}>
<span>{link.id}</span>
<span> : </span>
<span>{link.description}</span>
</li>
);
})}
</ul>)
};
export default SampleQuery;
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.