es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo almacenar en caché consultas utilizando el cliente Apollo de Nuxt.js?

27 Jul, 2023 Programación

Mi consulta fetchPolicy está configurada como cache-first. Pero Apollo no almacena en caché las consultas. Por ejemplo, cuando apago mi servidor gql, devuelve un error de red en el servidor del cliente.
¿Dónde puedo ver si la consulta está en caché o no? Tengo la extensión de Chrome Apollo dev tool y puedo ver allí que mi consulta está en caché.

[nuxt.config.js]

export default {
   modules: ['@nuxtjs/apollo'],
   apollo: {
    clientConfigs: {
      default: '~/apollo.js',
    },
  },
}

[apollo.js]

import { InMemoryCache } from 'apollo-cache-inmemory'

export default (context) => {
  return {
    httpEndpoint: 'http://localhost:8000/graphql',
    cache: new InMemoryCache(),
  }
}

[pages/index.vue]

<script>
import getProducts from '~/queries/getProducts.gql'
export default {
  async asyncData({ app }) {
    let client = app.apolloProvider.defaultClient
    const products = await client.query({
      query: getProducts,
      fetchPolicy: 'cache-first',
    })
    return { products }
  },
}
</script>

No importa si la consulta está en el lado del servidor o del cliente, ninguno de ellos almacena en caché las consultas:

  mounted() {
    this.$apollo
      .query({
        query: getProducts,
        prefetch: false,
        fetchPolicy: 'cache-first',
      })
      .then((data) => (this.products = data))
  },

También probé el método especificado por Apollo pero tuve el mismo problema:

  apollo: {
    products: {
      query: getProducts,
      prefetch: true,
      fetchPolicy: 'cache-first',
    },
  },

Cuando uso cache-only, los products están vacíos y no hay nada que mostrar.

¿Cuál es el problema?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    De acuerdo con la información y capturas de pantalla proporcionadas, parece que la consulta está en caché en Apollo. Sin embargo, cuando el servidor de GraphQL está fuera de línea, Apollo aún intenta obtener los datos del servidor en lugar de utilizar los datos en caché. Esto ocurre debido a que la política cache-first solo obtiene los datos de la caché si los datos ya están presentes en la caché y no han caducado.

    Para solucionar este problema, puedes intentar establecer un maxAge más largo para la caché en InMemoryCache al crear la instancia de caché en apollo.js. Por ejemplo:

    import { InMemoryCache } from 'apollo-cache-inmemory'

export default (context) => {
  return {
    httpEndpoint: 'http://localhost:8000/graphql',
    cache: new InMemoryCache({
      addTypename: false,
      resultCaching: true,
      freezeResults: false,
      dataIdFromObject: (obj) => obj.id,
      cacheRedirects: {},
      maxAge: 10 * 60 * 1000, // 10 minutos
    }),
  }
}

    Esto establece el maxAge de la caché en 10 minutos, lo que significa que Apollo usará los datos en caché si aún están actuales (es decir, no son más antiguos de 10 minutos), incluso si el servidor está fuera de línea.

    Si esto no funciona, puedes intentar establecer la política fetchPolicy en cache-and-network, que obtiene los datos de la caché primero y luego los obtiene del servidor si no están en la caché o si los datos en caché han caducado. Por ejemplo:

    <script>
import getProducts from '~/queries/getProducts.gql'

export default {
  async asyncData({ app }) {
    let client = app.apolloProvider.defaultClient
    const products = await client.query({
      query: getProducts,
      fetchPolicy: 'cache-and-network',
    })
    return { products }
  },
}
</script>

    Esto asegurará que Apollo siempre utilice los datos en caché cuando estén disponibles y solo obtenga datos nuevos del servidor si es necesario.

    Espero que esto te ayude. Avísame si tienes alguna otra pregunta.

Comments are closed.