Memory leak when using apollo-client in an iframe.

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

[brainkim]

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

[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.