Avoid new axios request each time vue component is rendered

user_2826653 0
Viewed 4218

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

  1. 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 
 }
}

  2. 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).

  3. The product is shown on it's own in a Product_Single.vue component. So far so good.

But here's the problem...

  1. 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

shopify axios vue-component vue.js javascript
3 Answers

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.

user_104708600

If you are not using Vue Router, and hiding the list page, you can try a simple option.

Instead of v-if, use v-show. The component will be hidden and displayed again. It won't be re-created.

Also, where do you call the API? From created or mounted hook?

user_13647470
user_2437810
Related