Avoid new axios request each time vue component is rendered

Question

I'm very much new to Vue so please excuse my lack of knowledge here.

In one of my (child) components (Product_Collection.vue) I make an axios request to get some products from my Shopify store via their GraphQL API:

data: () => {
 return {
   products: null
 }
},
methods: {
 getProducts: function(){
   // 1. axios code here...
   // 2. ...then assign result to "this.products" data property 
 }
}

The products are displayed as thumbnails (let's say there's 10 t-shirts). I then click a product to view it in more detail with more product info and images etc (very much an Amazon-like experience).
The product is shown on it's own in a Product_Single.vue component. So far so good.

But here's the problem...

When I click back to the products page (Product_Collection.vue) (the page with the 10 t-shirts on) the axios request to the Shopify API gets called again and the component is re-rendered from scratch.

My question is how do I tell Vue to stop fetching the data from the Shopify API each time the component is rendered? Thank you

You can use vuex to store data in check if data is available or not. Only request to get data when data is not pulled. vuex.vuejs.org/guide — ittus
This seems like a good idea, and no doubt it would work, but it just seems a bit over-complicated for such a simple problem. I looked into using <keep-alive> on the component as this sounds like it was designed for this type of scenario, but it didn't work as I expected — I'm probably not using it correctly to be honest or I've misunderstood its purpose. — Ben Clarke

AnonymousSB AnonymousSB · Accepted Answer · 2018-11-17T00:26:32

Sounds like you want cache-control, which Axios supports with an extension.

https://github.com/kuitos/axios-extensions

import axios from 'axios';
import { cacheAdapterEnhancer } from 'axios-extensions';

const http = axios.create({
    baseURL: '/',
    headers: { 'Cache-Control': 'no-cache' },
    // cache will be enabled by default
    adapter: cacheAdapterEnhancer(axios.defaults.adapter)
});

http.get('/users'); // make real http request
http.get('/users'); // use the response from the cache of previous request, without real http request made
http.get('/users', { cache: false }); // disable cache manually and the the real http request invoked

Or you could go a more complex route and cache the results yourself into an object, and check if that object exists, but then you'll have to deal with when you want to expire the data in that object.

If you use a cache-control, and cache-control headers and expiry, you can drive all that from the API layer and not have to deal with manually managed stale data in the application.

Avoid new axios request each time vue component is rendered

3 Answers