React-apollo: 3.1.0 [regression] stopPolling cleanup in effect

Created on 10 Sep 2019  ·  3Comments  ·  Source: apollographql/react-apollo

Intended outcome: stopPolling should be correctly called on effect cleanup

Actual outcome: Error: Uncaught [TypeError: Cannot read property 'stopPolling' of undefined]

How to reproduce the issue:
When using 3.0.1 the following component was successfully unit tested

const TestComponent = () => {
  const { .., startPolling, stopPolling } = useQuery(..);

  useEffect(() => {
    startPolling(..);
    return () => stopPolling();
  }, [startPolling, stopPolling]);

  // ..
};

however, after upgrading to 3.1.0 I get the following error in my unit tests
Error: Uncaught [TypeError: Cannot read property 'stopPolling' of undefined]

Reproduction example https://github.com/mpgon/stopPollingError

Most helpful comment

Hi, this bug is not fully fixed. Here's another case for you to consider and hopefully fix. I have a query hook that I pass skip: true. Then based on some condition, I call startPolling and based on another, I call stopPolling. When the component unmounts, it's still polling in the background. I believe it's because of the skip being set to true initially, but not sure how else to start/stop polling conditionally.

Also, please don't forget to log some sort of warning message because other people won't know why the stopPolling is not working silently.

All 3 comments

Thanks for reporting this @mpgon. This is because of https://github.com/apollographql/react-apollo/pull/3273, which automatically takes care of stopping polling when a component unmounts. You no longer have to call stopPolling in the function returned from your useEffect. That being said, your issue brings two important things to light:

  1. I forgot to mention https://github.com/apollographql/react-apollo/pull/3273 in the Changelog 🤦‍♂.
  2. We should probably throw a more helpful error, or noop the call, if stopPolling is called like you're calling it. That error isn't very helpful.

I'll get these changes in place, but for now you should be okay to just remove your stopPolling call. Thanks!

Alright, I'll do that then. Thank you!

Hi, this bug is not fully fixed. Here's another case for you to consider and hopefully fix. I have a query hook that I pass skip: true. Then based on some condition, I call startPolling and based on another, I call stopPolling. When the component unmounts, it's still polling in the background. I believe it's because of the skip being set to true initially, but not sure how else to start/stop polling conditionally.

Also, please don't forget to log some sort of warning message because other people won't know why the stopPolling is not working silently.

Was this page helpful?
0 / 5 - 0 ratings