useQuery pollInterval props still triggered even after unmount

[jemmyphan]

Intended outcome:
after component is unmounted useQuery pollInteval shouldn't be triggered again.

Actual outcome:
useQuery still refetch data even after unmount

How to reproduce the issue:
https://codesandbox.io/s/apollo-client-pollinterval-bug-1d0ns?file=/src/App.js

Versions
this issue still exist on 3.0.0-rc1

[thomas81528262]

I got the same issue

Version:
"@apollo/client": "^3.0.0-rc.9"

[hwillson]

Let us know if this is still a concern with @apollo/client@latest - thanks!

[sjdemartini]

@hwillson Thanks for checking in. I still see this same behavior when using @apollo/client 3.3.16. Here's a forked version of the original CodePen that is using 3.3.16 instead, which demonstrates the problem: https://codesandbox.io/s/apollo-client-pollinterval-bug-forked-m6wrw

To see the bug, you'll have to:

• Click the Toggle button in the UI
• See in your developer tools Network tab that it's making a GQL query every 1000ms, thanks the the Left component which is now mounted
• Click Toggle again (unmounting the Left component that has useQuery)
• Notice that in your Network tab, it continues to make GQL queries every 1000ms 🐛

If you toggle more times, you'll see it keeps adding yet more polling instances on top of the original (so it'll be polling more often than every second). This issue should be re-opened. I tried myself to investigate how to fix in the Apollo code a few months ago but had a bit of trouble wrapping my head around a lot of the Apollo client internals. Would greatly appreciate a fix 🙏 (This has outright prevented my team from using pollInterval anywhere in our Apollo code, sadly.)

[sjdemartini]

(There's this other issue from October that may also be related #7221)

[jaredgorski]

I'm also experiencing this.

Seems like there's some movement on it, but this has already been a long-term bug. Will there be a fix soon?

[sjdemartini]

This comment (on a related polling issue) #7221 (comment) seems to be relevant here as well. Adding <React.StrictMode> around the rendered elements here

apollo-client/src/react/hooks/__tests__/useQuery.test.tsx

Lines 588 to 592 in 67fe4e8

	render(
	<MockedProvider mocks={CAR_MOCKS} link={mockLink}>
	<Component />
	</MockedProvider>
	);

fails this existing should stop polling when the component is unmounted test.

Similarly, removing StrictMode from the CodePen I linked above gets rid of the continued polling after unmount.

Presumably this is due to React double-invoking lifecycle methods to help detect unwanted side-effects (https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects).

So this particular bug will seemingly occur in development only right now, though is potentially indicative of some other issues with the hook. IMO definitely still worth solving (esp since folks are very unlikely to have confidence in this working properly if development has bugs).

[sjdemartini]

Seems there's another StrictMode-related issue that has gotten a fair amount of attention/upvotes but no traction toward a solution: #6037