Memory leak when using apollo-client in an iframe.

[KutnerUri]

Hello,

It seems that closing an iframe, while Apollo is loading a request inside, together with user interaction, is causing the iframe to crush.
Sounds niche, but my app is heavily reliant on iframes to operate and separate user code from our main site.

Some hints I found trying to debug it:

• It happens only in Chrome. (which most our users have)
• Happens in standalone projects and different GQL servers.
• It does not happen if I implement the request with fetch and useState() instead of @apollo/client
• It only happens together with user interaction.
• It happens less in "production" mode. (Might be preventable by some Webpack optimization?)

Intended outcome:
Apollo client should gracefully shut itself down and free resources when closing. (maybe using the window onunload event)

Actual outcome:
Chrome freezes. :(
No errors are emitted to the log.

How to reproduce the issue:
I managed to reproduce the bug using the code in this gist:
https://gist.github.com/KutnerUri/5b65a2893c30a40646fe99726847a072
Paste it in a create-react-app to reproduce it yourself. (I used React 16)

Does not happen using fetch and react state:

I could not make a live website using CodeSandbox, as it didn't allow iframes.

Versions

  @apollo/client:  3.3.6
  react: 16.13.1
  react-dom: 16.13.1

  System:
    OS: macOS 11.1
  Binaries:
    Node: 12.19.0 - ~/.nvm/versions/node/v12.19.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v12.19.0/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v12.19.0/bin/npm
  Browsers:
    Chrome: 88.0.4324.146
    Edge: 88.0.705.56
    Firefox: 84.0.2
    Safari: 14.0.2

[KutnerUri]

The bug seems to be solved in React 17, and is indeed cause by some loose setState() (or similar) after unmouting.
See here - facebook/react#19220
And the underlying bug in chrome here - https://bugs.chromium.org/p/chromium/issues/detail?id=956832

I still think it's relevant and fixable since some projects still run on React 16 (React Native Web, for example)
For these projects I've created an ultralight GQL hook (see docs here)

Otherwise, I'm pushing React 17 to my projects and hope it's the last I see of it. :)

[hwillson]

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

[KutnerUri]

Most certainly still happening. @hwillson
I just checked it now with @apollo/client: 3.3.20, and react: 16.14.0

[hwillson]

Thanks @KutnerUri - any chance you could share a runnable reproduction that shows this, to make it easier for maintainers to take a look? Also, would you mind trying with @apollo/client@beta?

[KutnerUri]

yes - copy this to a CRA's app.js, and click on toggle repeatedly.
https://gist.github.com/KutnerUri/5b65a2893c30a40646fe99726847a072

Make sure to use React16.

[KutnerUri]

I can confirm it still happens in @apollo/client version 3.4.0-rc.6

[brainkim]

Here’s a reproduction https://github.com/apollographql/react-apollo-error-template/tree/memory-leak-iframe