React Apollo Query keeps making network requests indefinitely with pollInterval - reactjs

Question

So I've run into an issue with Apollo where I'm trying to dynamically add/update/remove to a list of topics in my app, however my pollInterval in my Query keeps making network requests over and over, even after I have the data in my Apollo cache. I know there are ways to manually trigger a refetch, but that after playing around with it, it's a lot of extra steps to get it the way I want. Is there something I'm missing here?
Here is the code for the component:
import React from 'react';
import { gql } from 'apollo-boost';
import { Query, Mutation } from 'react-apollo';
import TopicForm from "./TopicForm";
import { Link, withRouter} from "react-router-dom";
const REMOVE_TOPIC = gql`
mutation REMOVE_TOPIC(
$id: String!
) {
removeTopic(id: $id) {
id
}
}
`
const GET_TOPICS = gql`
{
topics {
id
name
}
}
`;
class Topics extends React.Component {
removeTopic(id, removeTopicById) {
removeTopicById({
variables: {
id
}
}).then(result => {
// Redirect to main topics page
this.props.history.push('/topics');
})
}
componentDidMount() {
}
render() {
const RemoveButton = props => {
return <Mutation mutation={REMOVE_TOPIC}>
{(removeTopicById, { loading }) => {
return <button type="button" onClick={(e) => {
e.preventDefault();
this.removeTopic(props.id, removeTopicById);
}}>X</button>
}}
</Mutation>
}
const TopicList = () => {
return (<Query query={GET_TOPICS} pollInterval={40}>
{(({ data: { topics }, loading }) => {
if (loading || !topics) {
return <div>Loading ...</div>;
}
return topics.map(({ id, name }) => {
return <div><Link to={`/topics/${id}`}>{name}<RemoveButton id={id} /></Link></div>
})
})
}
</Query>)
}
return (<div>
{this.props.match.params.topicId ? <h2>Update Topic</h2> : <h2>Add Topic</h2>}
<TopicForm topicId={this.props.match.params.topicId}/>
<TopicList />
</div>)
}
}
export default withRouter(Topics)
The main part I'm talking about is inside the TopicList function

Answer 1

pollInterval is doing what it is meant to
refetchQueries isn't too complex. In this case I think it would be:
<Mutation
mutation={REMOVE_TOPIC}
refetchQueries={[{ query: GET_TOPICS }]}

Answer 2

With hooks you can do the following:
Use the startPolling and stopPolling dependencies like this for example:
useEffect(() => {
startPolling(10000);
return () => {
stopPolling();
};
}, [startPolling, stopPolling]);
This will refetch every 10 seconds and stopPolling when component unmount.