memory leak while updating InMemoryCache

[CollinMonahanLab49]

Intended outcome:
Sequence of

• const records = client.cache.readQuery(queryOptions),
• nextRecords = records.map(updateClientSideFields)
• client.cache.writeQuery({...queryOptions, data: nextRecords})
  does not use additional memory over time.

Actual outcome:
App begins at 200Mb "memory footprint" in Chrome Task Manager and proceeds steadily to 5Gb, Aw Snap page.

How to reproduce the issue:

• Seems to show prompt memory growth with more fields and records, 1600 records, 17 service side fields, 5 @client fields.
• use queryOptions { fetchPolicy: 'network-only', nextFetchPolicy: 'cache-only' }
• Create react component with useQuery to get this data and render something
• use setTimeout on mount to call a function that does:
  • const records = client.cache.readQuery(queryOptions)
  • const nextRecords = records.map(addRandomClientSideUpdates)
  • client.cache.writeQuery({...queryOptions, data: nextRecords})
  • setTimeout(thisFunction, 0)

I wanted to get a better repro but I'm not sure how to set it up without the service response. I tried the restore method on the new cache instance but it didn't seem to result in the same internal cache structure - when I get the service response I have an array of references to records.

The draft minimal repro project is only dependent on @apollo/client, graphql, react, react-dom.

Versions
System:
OS: macOS 11.5.2
Binaries:
Node: 14.17.4 - ~/.nvm/versions/node/v14.17.4/bin/node
Yarn: 1.22.11 - ~/.nvm/versions/node/v14.17.4/bin/yarn
npm: 6.14.14 - ~/.nvm/versions/node/v14.17.4/bin/npm
Browsers:
Chrome: 93.0.4577.63
Safari: 14.1.2
npmPackages:
@apollo/client: ^3.4.11 => 3.4.11

[CollinMonahanLab49]

I created this repro with the magic of json-graphql-server (yes, very deprecated)

[benjamn]

@CollinMonahanLab49 Thanks so much for the awesome reproduction! Still investigating/diagnosing, but I should have more findings to share soon.