React Apollo Query keeps making network requests indefinitely with pollInterval

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

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.

Answer 2

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 }]}