potential memory leak issue in subscription

Hi, I have this test code to test out if Apollo cache is causing the memory leak issue. I have a subscription resolver that will keep publishing at the interval of 10ms .

import { useMutation, useQuery, useSubscription } from '@apollo/client'
import { QUERY_TEST, SUB_TEST, MUTATE_TEST } from './documentNodes'

export default function Home() {
  const { data, loading } = useQuery(QUERY_TEST);
  const [startTest] = useMutation(MUTATE_TEST)
  useSubscription(SUB_TEST)

  if (loading) return null
  return (
    <div>
      <div><button onClick={() => startTest()}>start test</button></div>
      {JSON.stringify(data, null, 2)}
    </div>
  )
}

Intended outcome:

The heap memory in use should not keep increasing and not dropping at all.

Actual outcome:

This screenshot is taken when the page is active for a few minutes, when it’s started the heap size is around 30mb. How to reproduce the issue:

https://github.com/lsping8/apollo-memory-test I have created this repo to reproduce the issue, clone the repo and follow the setup process. In the app I have added a button to start interval process, click on the start test button at the left top corner and monitor the memory in chrome.

Versions

System: OS: Linux 4.15 Ubuntu 16.04.7 LTS (Xenial Xerus) Binaries: Node: 12.21.0 - /usr/bin/node Yarn: 1.22.5 - /usr/bin/yarn npm: 6.14.11 - /usr/bin/npm Browsers: Firefox: 86.0 npmPackages: @apollo/client: ^3.3.11 => 3.3.11 apollo-server: ^2.21.0 => 2.21.0 apollo-upload-client: ^14.1.3 => 14.1.3

[brainkim]

Hey @lsping8! Thank you so much for creating a reproduction, and I wanted to tell you I’m looking into this. I tried running your example and I need to look a bit deeper into it, but it seems like Chrome will collect the memory at some point, creating a saw-tooth pattern in terms of memory usage. So my question is, have you noticed the sample application or your actual code crashing from running out of memory? If you haven’t seen this, I’m hesitant to call this a leak, so much as maybe using too much memory. I, of course, could be wrong about this!

Also note that if you want more consistent memory usage, the cache abstraction provides some utility methods to reclaim and evict objects as described in the following document https://www.apollographql.com/docs/react/caching/garbage-collection/

Again, thanks for opening this issue, and just wanted to let you know this issue is seen and heard.

[lsping8]

Hi @brainkim, thank you for the reply. To answer your question if the application is crashing, the answer is yes. Well not the sample repo, but the production application we have.

Firefox seem to be less tolerance at this issue. As for workaround, we just set all subscription to no-cache fetchPolicy and it seem to resolve the issue.