I have the following setup for caching Axios Requests on my Vue2 Nuxt App. Leaning on (this Github Issue). Though, I can still see requests heading out to the API on the Network console tab. How do I make this start caching the GET requests?
AxCache.js
import LRU from "lru-cache"
export default function(_moduleOptions) {
const ONE_HOUR = 1000 * 60 * 60
const axCache = new LRU({ maxAge: ONE_HOUR })
this.nuxt.hook("vue-renderer:ssr:prepareContext", ssrContext => {
ssrContext.$axCache = axCache
})
}
Axios.js
import { cacheAdapterEnhancer } from "axios-extensions"
import LRU from "lru-cache"
const ONE_HOUR = 1000 * 60 * 60
export default function({ $axios, ssrContext }) {
const defaultCache = process.server
? ssrContext.$axCache
: new LRU({ maxAge: ONE_HOUR })
const defaults = $axios.defaults
// https://github.com/kuitos/axios-extensions
defaults.adapter = cacheAdapterEnhancer(defaults.adapter, {
enabledByDefault: false,
cacheFlag: "useCache",
defaultCache
})
}
Then my API call is just a simple one to Reddit.
this.$axios.get(https://www.reddit.com/r/funny/hot.json', { useCache: true })
.then((response) => {
this.reddit = response.data.data.children
})