NUXT caching API requests – Software Engineering Stack Exchange


Im developing a project using Nuxt and I need to update the data 15 in 15 seconds, the api is a third party api and has a 100 api calls limit per day. I need to be able to make only 1 api call every 15 seconds without counting the number of users online, so if I have 10k online users It makes only 1 request.

What I’ve tried so far.

On my store I have this

async getData({ commit }) {
 await this.$axios
  .get('/api/breeds/image/random', {
  
  })
  .then(function (response) {
    commit('SET_DATA', response.data)
  })
}

I created a middleware, and I’m making a call on server side so on Network tab on dev tools dont appear any request call, but unfortunately every time I refresh the page It stills counting as 1 request, I need some sort of cache

export default async function ({ store, from }) {
  let isInitialPageLoad = !from

  if (isInitialPageLoad) {
    await store.dispatch('getData')
  }
}

and lastly I enabled the proxy on axios on nuxt.config.js

Any idea how to cache and update without making requests based on online users and without refreshing the page?