Cache Nuxt Get Request with Axios

Viewed 37

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
  })
0 Answers
Related