Caching requested data

[andresmrm]

Hello! And thanks for creating and maintaining this great lib!

I've read the README and checked the issues, but couldn't find a way to "cache" the data to avoid requesting it again.
For example, my view requests the data. Then I route to another view, and later I come back. The data will be requested again.

One option would be to check in the component, before requesting the data, to see if the data is already there. But instead of each component doing the check, it would be better if the store did it. Maybe the beforeRequest can be used for this?

And sometimes the same endpoint can return data about different elements. I try to store them in an object, like the code bellow. But then, how can I get the element "id" in the onSuccess, so I can store it in the object?

Component

  mounted () {
    this.getYearInfo({ params: { year: this.$route.params.year } })
  },
  computed: mapState({
    yearsInfo: state => state.yearInfo
  }),
  methods: {
    ...mapActions([
      'getYearInfo'
    ])
  }

Store

const year = new Vapi({
  baseURL: baseUrls.year,
  state: {
    yearInfo: {},
  }
}).get({
  action: 'getYearInfo',
  property: 'yearInfo',
  path: ({ year }) => `/info/${year}`,
  onSuccess: (state, payload, axios) => {
    // How do I get the year here?
    state.yearInfo[year] = payload.data
  }
}).getStore()

I saw something about axios being able to cache GET requests. Would it be a better solution for this issue?

[christianmalek]

Hi Andrés,

thanks for your compliments!

Caching

I think the easiest way to provide caching would be to make axios do it for you. https://github.com/RasCarlito/axios-cache-adapter https://github.com/kuitos/axios-extensions#cacheadapterenhancer seems promising. Just create an axios instance with this adapter and pass it to the Vapi constructor (see docs).

Getting the year value in the onSuccess fn

At the moment parameters (like year) aren't easy accessible in the onSuccess and onError fn. I'm sorry. :(

[christianmalek]

Here is an ugly way how you could get the params in the onSuccess fn at the moment:

You could create a new property in the store and save it in the beforeRequest. Then you could call it in the onSuccess fn. It's not pretty but it works.

Example (didn't test it)

{
  beforeRequest: (state, { params, data }) => {
    state.year = params.year
  },
  onSuccess: (state, payload, axios) => {
    const year = state.year
    state.yearInfo[year] = payload.data
  }
}

[andresmrm]

Thanks for the quick replies!

Is it possible to avoid the request from happening from inside beforeRequest? So it can check if the data is already in the store and return it, instead of doing the request.
And about the way of passing the year to the onSuccess using another variable like that, wouldn't it be possible that multiple requests, with delayed or out of order responses, mess up with this method?

Going back to the other alternative... I took a look at both axios caching libs. But I'm a bit worried about how to invalidate some cached items when the user modifies server data.
For example, we loaded a list of posts from /:category/posts, and then the user sends a new post. The cached post list must be invalidated.

• Maybe storing at some place that URL so the next request to it forces an update. But it seems awkward to store URLs for invalidation like this. Data seems easier to invalidate than URLs.
• Maybe doing the non-cached request for the post list just after the user sent a new post. But sometimes the post list isn't needed right now. And if many endpoints depend on the invalidated data, that can mean many unneeded requests.

[christianmalek]

Is it possible to avoid the request from happening from inside beforeRequest? So it can check if the data is already in the store and return it, instead of doing the request.

This is not possible at the moment. If you use https://github.com/kuitos/axios-extensions#cacheadapterenhancer this shouldn't be a problem because the request will only be sent to the server if the cache expires or the response isn't cached yet.

And about the way of passing the year to the onSuccess using another variable like that, wouldn't it be possible that multiple requests, with delayed or out of order responses, mess up with this method?

Yep, race condition. :(

Caching is something I didn't think about during the development of vuex-rest-api. Currently I'm developing version 3 of vuex-rest-api. I'll consider your issues and try to solve it with a new API. Unfortunately I don't think I will change this in the current version. I'm sorry.

[andresmrm]

I feel I would have a better control over the cache doing it at vuex-rest-api level. But since it lacks some features needed for it, I guess I'll try axios-extensions, forcing data reload just after data modification.

Unfortunately I don't think I will change this in the current version. I'm sorry.

I understand, no problem. And thanks for considering it for v3. Feel free to close this issue if you feel so.
Thanks again for all the help!

[christianmalek]

I feel I would have a better control over the cache doing it at vuex-rest-api level.

I think so, too. :)

I understand, no problem. And thanks for considering it for v3. Feel free to close this issue if you feel so.
Thanks again for all the help!

Anytime! Little note: I don't know when I'll release v3. Approximately in 2-3 months without guarantee!

Feel free to open a new issue if you have any questions.

[christianmalek]

I've added the {params, data} as additional parameter in the onSuccess and onError functions so you can access them now. Therefore please update to v2.10.0

[andresmrm]

Wow! Thank you! =D