React-apollo: Changing pollInterval seems to create multiple poll timers for each unique value set

[bjeanes]

Intended outcome:
Variable pollInterval (poll more frequently when we're expecting an upcoming change, poll less frequently when we are not)

Actual outcome:
Changing the polling interval any of 3 ways I tried resulted in _multiple_ poll timers (one for each unique interval).

I tried:

1. Specifying options as a function and changing the pollInterval based on a prop passed in from above
2. Using startPolling() with a new interval from within the props config in the graphql() call
3. Using startPolling() with a new interval from within a function passed to the component and triggered based on results of the GraphQL query
4. Above two but with also explicitly calling stopPolling() before-hand

How to reproduce the issue:
https://codesandbox.io/s/62q7qpwq7k is an example.

I couldn't think of a great way to demonstrate this but hopefully this works...

It starts with a pollInterval of 5000 and hits a GraphQL endpoint which always has different data (essentially it is just Math.random()) so that every query update forces a component update.
The component is gross and stateful but prints out the timings (in seconds) between the queries.

It starts out querying my random gql server every 5000ms. As expected, queries happen more-or-less every 5s (with some jitter). When I change it to 3, we see close to 3000 ticks with the occasional ~1 or ~2 second tick:

Left running I even saw some 0.9 second response.

I think what is happening here is:

| 1s tick | 5000ms | 3000ms | observed |
|---------|--------|--------|---|
| 0 | x | x | xx |
| 1 | | | |
| 2 | | | |
| 3 | | x | x |
| 4 | | | |
| 5 | x | | x |
| 6 | | x | x |
| 7 | | | |
| 8 | | | |
| 9 | | x | x |
| 10 | x | | x |
| 11 | | | |
| 12 | | x | x |
| 13 | | | |
| 14 | | | |
| 15 | x | x | xx |

In that demo, the issue is particularly observable if you set a very low timeout then set it high again. It's as if the higher interval is ignored.

This demo doesn't really make the issue crystal clear, but I can't think of a simple way to visualise this. I noticed this in my app with 5s and 3s intervals and noticing every that the timing between polls was erratic and often I'd see two requests for the same query happen at exactly the same time.

Version

• [email protected]
• [email protected]

[bjeanes]

I changed demo a bit. There's now a button to randomly set the interval between 2 seconds and 10 seconds. If you mash that button 10-20 times and then leave it alone for a few seconds, every query response seems to be coming in every 600-700ms (though there's request latency built into these timings and I am in Australia).

In that screenshot, the interval was never less than 2s and yet most of the graphql updates towards the end were coming it at under 2 seconds.

The more unique pollInterval's used the more erratic the timing is:

[stale[bot]]

This issue has been automatically labled because it has not had recent activity. If you have not received a response from anyone, please mention the repository maintainer (most likely @jbaxleyiii). It will be closed if no further activity occurs. Thank you for your contributions to React Apollo!

[stale[bot]]

This issue has been automatically closed because it has not had recent activity after being marked as no recent activyt. If you belive this issue is still a problem or should be reopened, please reopen it! Thank you for your contributions to React Apollo!

[bjeanes]

Sorry I was on vacation for the past month. This is still something I'd like to see resolved. I haven't tested this with the latest Apollo but I go back to work tomorrow and do so if that is what is required to move this forward.