Memory leak from SSR Next 14.1.3

[zim-sang-fe]

I am using

"@apollo/client": "^3.10.5",
"@apollo/experimental-nextjs-app-support": "^0.11.2",

I deployed and I saw the memory is always high then the app will crash. I follow your configuration https://github.com/apollographql/apollo-client-nextjs, but it seems that it's still happening. Could you help me fix it?

My config below

import { ApolloLink, Observable, split } from '@apollo/client';
import {
  ApolloClient,
  InMemoryCache,
  registerApolloClient,
} from '@apollo/experimental-nextjs-app-support';

...

export const { getClient, query, PreloadQuery } = registerApolloClient(
  async () => {
    const client = new ApolloClient({
      cache: new InMemoryCache(),
      link: splitLink,
      credentials: 'include'
    });

    return client;
  }
);

import {
  ApolloClient,
  ApolloNextAppProvider,
  InMemoryCache,
  SSRMultipartLink
} from '@apollo/experimental-nextjs-app-support';

...

export function makeClient() {
  return new ApolloClient({
    cache: new InMemoryCache(),
    link:
      typeof window === 'undefined'
        ? ApolloLink.from([
            new SSRMultipartLink({
              stripDefer: true
            }),
            splitLink
          ])
        : splitLink
  });
}

export function ApolloWrapper({ children }: React.PropsWithChildren) {
  return (
    <ApolloNextAppProvider makeClient={makeClient}>
      {children}
    </ApolloNextAppProvider>
  );
}

[phryneas]

Hmm. Your setup here seems right to me.
Your Apollo Client instances are short-lived, too, like they should be: an ApolloClient instance will be created for every new request and then be discarded afterwards, so nothing on the Apollo Client side will exist for a long time.
What environment are you running this in? Is there any chance you can replicate this in a project that I can take a look at?

[zim-sang-fe]

I am running it on Node 18.17 and Next 14.1.3. I deployed my project to ECS with 1 CPU, 2GB, and max 3 tasks. All memory in each task is often full and then crashed.

[zim-sang-fe]

On the page, I write

import {  query } from '@/apolloClientRSC';

function generateStaticParams() {
  const res = await query({
    query: GET_PRODUCTS,
    variables: {
      input: {
        limit: 1,
        page: 1,
      }
    },
    fetchPolicy: 'cache-first'
  });
...
}


function generateMetadata() {
  const res = await query({
    query: GET_METADATA,
    variables: {
      slug
    }
  });
...
}

export const revalidate = 86400;

...
 const res = await  query({
    query: GET_DETAIL,
    variables: {
      slug
    },
    context: {
      headers: {
        authorization: `Bearer ${token.value}`
      }
    },
    fetchPolicy: 'cache-first'
  });

[phryneas]

Can you narrow it down to any of those specifically - if you remove them bit by bit, does it stop leaking at some point?

[zim-sang-fe]

I will try and tell you soon

[zim-sang-fe]

I removed the apollo and the apollo is not the problem. I am using fetch instead, I will check NextJS 14, maybe the problem is opengraph image of Next 14

vercel/next.js#63796
vercel/next.js#65451

Thank you for your support

[phryneas]

Thank you for keeping me updated!

As it seems that this is not an Apollo Client issue, I'm going to close the issue here. I hope you'll find the memory leak soon!

[github-actions]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.