Apollo Client + NextJS fuga de memoria, InMemoryCache

Las recomendaciones oficiales de Apollo y NextJS indican que se debe crear una nueva instancia de ApolloClient cada vez que se deba ejecutar una solicitud GraphQL en caso de usarse SSR.

Esto muestra buenos resultados en cuanto al uso de memoria, la memoria crece hasta cierto punto y luego se restablece al nivel inicial mediante el recolector de basura.

El problema es que el nivel inicial de uso de memoria constantemente aumenta y el depurador muestra que la fuga es causada por el objeto “InMemoryCache” que está adjunto a la instancia de ApolloClient como almacenamiento en caché.

Intentamos usar la misma instancia de “InMemoryCache” para todas las nuevas instancias de Apollo e intentamos desactivar la personalización de políticas de caché en “defaultOptions”, pero la fuga aún está presente.

¿Es posible desactivar por completo la caché? ¿Algo así como establecer un valor “false” para la opción “cache” en la inicialización de ApolloClient? ¿O tal vez es un problema conocido con una solución conocida y se puede resolver mediante la personalización de “InMemoryCache”?

Hemos probado numerosas opciones, como forzar la recolección de basura de la caché, la expulsión de los objetos en la caché, etc., pero nada ha ayudado, la fuga sigue presente.

¡Gracias!

davy.ai

August 6, 2023 at 8:42 am

Solución para la fuga de memoria en Next.js y ApolloClient con InMemoryCache

Si estás utilizando ApolloClient con InMemoryCache en Next.js para la representación del lado del servidor (SSR), es posible que te hayas encontrado con un problema de fuga de memoria. La recomendación oficial es crear una nueva instancia de ApolloClient para cada solicitud de GraphQL para evitar fugas de memoria. Sin embargo, esto puede llevar a un nivel de uso de memoria inicial que crece constantemente, ya que el objeto InMemoryCache causa la fuga.

Para solucionar el problema de la fuga de memoria, puedes intentar personalizar el objeto InMemoryCache ajustando sus políticas de almacenamiento en caché o desactivando por completo la caché. Desactivar la caché es posible estableciendo la opción cache en false al inicializar ApolloClient.

const client = new ApolloClient({
  uri: '/graphql',
  cache: false,
});

Alternativamente, puedes personalizar las políticas de almacenamiento en caché del objeto InMemoryCache para adaptarlas mejor a tus necesidades. Por ejemplo, puedes reducir el tamaño de la caché estableciendo un número máximo de objetos a mantener en la caché usando el parámetro addTypename.

import { InMemoryCache, ApolloClient } from '@apollo/client';

const cache = new InMemoryCache({
  addTypename: false,
  typePolicies: {
    Query: {
      fields: {
        posts: {
          keyArgs: ['filter'] // Almacenar en caché este campo por argumento de filtro
        }
      }
    }
  }
});

const client = new ApolloClient({
  uri: '/graphql',
  cache
});

También puedes intentar realizar la recolección de basura o expulsión de objetos en la caché, pero esto podría no resolver el problema de la fuga. En general, desactivar la caché o personalizar sus políticas puede ayudar a solucionar el problema de la fuga de memoria al utilizar ApolloClient con Next.js para la representación del lado del servidor.

Answer

davy.ai

August 6, 2023 at 8:42 am
Solución para la fuga de memoria en Next.js y ApolloClient con InMemoryCache

Si estás utilizando ApolloClient con InMemoryCache en Next.js para la representación del lado del servidor (SSR), es posible que te hayas encontrado con un problema de fuga de memoria. La recomendación oficial es crear una nueva instancia de ApolloClient para cada solicitud de GraphQL para evitar fugas de memoria. Sin embargo, esto puede llevar a un nivel de uso de memoria inicial que crece constantemente, ya que el objeto InMemoryCache causa la fuga.

Para solucionar el problema de la fuga de memoria, puedes intentar personalizar el objeto InMemoryCache ajustando sus políticas de almacenamiento en caché o desactivando por completo la caché. Desactivar la caché es posible estableciendo la opción cache en false al inicializar ApolloClient.
```
const client = new ApolloClient({
  uri: '/graphql',
  cache: false,
});
```
Alternativamente, puedes personalizar las políticas de almacenamiento en caché del objeto InMemoryCache para adaptarlas mejor a tus necesidades. Por ejemplo, puedes reducir el tamaño de la caché estableciendo un número máximo de objetos a mantener en la caché usando el parámetro addTypename.
```
import { InMemoryCache, ApolloClient } from '@apollo/client';

const cache = new InMemoryCache({
  addTypename: false,
  typePolicies: {
    Query: {
      fields: {
        posts: {
          keyArgs: ['filter'] // Almacenar en caché este campo por argumento de filtro
        }
      }
    }
  }
});

const client = new ApolloClient({
  uri: '/graphql',
  cache
});
```
También puedes intentar realizar la recolección de basura o expulsión de objetos en la caché, pero esto podría no resolver el problema de la fuga. En general, desactivar la caché o personalizar sus políticas puede ayudar a solucionar el problema de la fuga de memoria al utilizar ApolloClient con Next.js para la representación del lado del servidor.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Apollo Client + NextJS fuga de memoria, InMemoryCache

Answer

davy.ai