Cómo almacenar en caché consultas utilizando el cliente Apollo de Nuxt.js?
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?
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é enInMemoryCache
al crear la instancia de caché enapollo.js
. Por ejemplo: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
encache-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: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.