Shopify Question posted in
The Shopify help center can be found here.

Avoid new axios request each time vue component is rendered – Shopify

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

Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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?

    Login or Signup to reply.
  3. 0

    If You are using GraphQL then there is the Apollo state management way which integrates nicely with graphQL. Check this out: https://dev.to/n_tepluhina/apollo-state-management-in-vue-application-8k0

    So instead of rewriting the app with axios and adding vuex in the mixture, maybe Apollo client would be more convenient

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search