How to stop polling in angular apollo client?

Question

I have a dashboard preview page on which various visuals get their data using graphql queries. I have enabled polling in query options to keep on polling for any data change and update it on the preview. Everything works as expected so far.

The problem is that when I change the route (say I go back to the admin page for instance), the graphql polling doesn't stop. From the documentation of apollo client for angular, I couldn't find anything to stop polling on route change. There is a bit of detail for apollo's react client to stop polling here, but I couldn't get it.

Would be great if anyone can tell me how to stop graphql polling in angular.

Let me know in case any further details are required.

Answer 1

This is probably too late to help the original poster, but this is what I do. The hope is that it may help others. And this is for Angular 8, so may vary for earlier versions.

apollo.watchquery(....) returns a QueryRef instance. The valueChanges property on this QueryRef instance returns the query data that we use in our views. Store the returned QueryRef instance in your component or service. Then call stopPolling() on it through one of the Angular component lifecycle hooks that is invoked during routing navigation - probably using ngOnDestroy. I have not needed to stop polling on navigation, but when the query displays a 'stable' state indicating it is 'done' and won't change in the future.

In my application, I have an Angular service class that runs the graphql query. In the query call, I have code like:

this.my_qRef = this.apollo.watchQuery<any>({
    query: MY_QUERY,
    variables: {
      MY_VARIABLEs: my_variables
    },
    pollInterval: 1000
})
return this.my_qRef.valueChanges

Then, the service also exposes a stopPolling method like:

stopStatusPolling() {
  this.my_qRef.stopPolling()
}

Since the view component has the service instance as a private data member, the stopStatusPolling method can be called on it whenever the right condition is met, e.g., when navigating away from the component - in the ngOnDestroy() method/lifecycle-hook (or when the polling query result 'stabilizes' and is not expected to change).