Avoid new axios request each time vue component is rendered

vue js axios cache
axios vue tutorial
vue axios best practices
axios parallel requests
vue ajax
vuejs service
axios tutorial
axios-cancel

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

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?

Avoid This Common Anti-Pattern In Full-Stack Vue/Laravel Apps , If you want your Vue.js single-page app to communicate with a Indeed, Laravel comes with the Axios library loaded in by default. Each page needs data from the backend (e.g. the name of the car Eliminating the AJAX request here would make the page interactive much You can opt-out at any time. Second, Vue will create an entirely new component when we render the second time. Vue will destroy the first one and create a new one. This means that our new my-component will go through all of its lifecycles as normal — created, mounted, and so on. On a side note, you can use nextTick with promises if you prefer that:

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.

Fetching Data from a Third-party API with Vue.js and Axios, First, we'll create a new Vue instance on the element div#app , and mock The v​-for directive is used for rendering our list of results. Axios is a promise-based HTTP client for making Ajax requests, and will work great for our purposes. Instead of creating a method, and calling it every time we need to  It provides inline annotation, built-in machine translating, progress report, and so on. With the v2.0 release, we add a new Review & Collaboration System and a UI Translation Editor. And yes, it supports vue-i18n, vuex-i18n, vue-i18next, etc. Even Laravel, React, Angular and other frameworks!

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

Vue.js Pattern for Async Requests: Using Renderless Components , Using a Vue Renderless Component to handle async requests to abstract the HTTP Note: Axios is used to make HTTP requests in this example, but it works just as well with any other library for AJAX requests. Instead of an HTML tag, these components only renders the HTML snippet it new Vue({ Currently, it does a full form request to add a new reply. In this tutorial, we will create a new Vue component using Axios to perform ajax requests to the Laravel backend. Via these ajax requests, we will submit new replies to the server, and on the client side VueJS will automatically re render the HTML on the page to reflect the new update.

ASP.NET Core 2 and Vue.js: Full Stack Web Development with Vue, , Full Stack Web Development with Vue, Vuex, and ASP. managed to avoid the need for any kind of environment-specific configuration SSR, axios will be unable to determine the base URL path of our API requests when rendering on the server. This isn't an issue when rendering on the client because it has access to the  Vue.js doesn’t ship with a way to do HTTP out of the box so we’re going to see how to send HTTP requests within a Vue.js web application, using many techniques and libraries such the popular Axios http client, the retired vue-resource plugin or the browser's built-in fetch API.

26 Time Saving Tips for Vue, When writing Vue applications, we waste our time by doing things the wrong way, will help you save time, by teaching you how to avoid some common time-​wasters. If you're building a medium to large sized app, your state — all the data you Learn how to integrate axios into your Vue app by reading Vue.js REST API  Vue Axios Post Request Example By Hardik Savani | January 23, 2019 | Category : Vue.JS In this post, we will lean how to send http request using axios in vue js. we will send post request with parameter as array or form data in vue cli npm app. here will be simple example of axios post request in vue js app from scratch.

Data Fetching, For example, before rendering a user profile, you need to fetch the user's data from the the navigation first, and fetch data in the incoming component's lifecycle hook. over the network, and we can also handle loading differently for each view. fetchData() }, watch: { // call again the method if the route changes '$​route':  The best known are Vue Axios, which simply wraps the Axios library and Vue Resource. I'm a fan of Vue Axios, so let's see how to install that. Firstly, install Axios and Vue Axios from the command line: $ npm i axios vue-axios --save Now, import Axios and Vue Axios and install them on the Vue instance: app.js

Comments
  • 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
  • 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.
  • I am using Vue Router unfortunately. Although I do like the idea of just showing/hiding components with v-if and v-show so maybe I'll reconsider using Vue Router and just use conditional logic to display content. I was calling the API from the created hook btw
  • VueRouter does try to reuse same component for the same route. So, you could check which hook you are loading in...
  • I did wonder about this — I thought surely Vue Router is smart enough to know that this component was just displayed and therefore just pull it from a cache. Maybe it's because I'm setting the products data property to null and therefore essentially forcing it to reload?
  • Yes. Should be something like that. (Even when route query params change Vue Router uses the same component, and usually, I have to "watch" the props to react to the changes.)
  • @BenClarke were you able to figure this out? I'm facing a similar problem and even swapping 'created' to 'mounted', I find my components (like your products), are reloading as I navigate back to the main page.
  • This looks promising. It seems ideal for my particular scenario and I'm sure it would work as I need it to, but I can't help thinking that due to my lack of experience with Vue I'm missing something more obvious as to why the component pulls the data from the API every time instead of just reusing the data from the previous render. Maybe I need to educate myself more with computed and watch and see if they can be put to use here. Thank you
  • Even with cache enabled, if you monitor your traffic, it I’ll look like it makes a call, but in reality it’s fetching from the cache. You can use MITM proxy to verify this.
  • Ah, that's interesting — so you're saying that it may currently be fetching from the cache as opposed to doing a new HTTP request every time? I'm using Chrome DevTools (Network tab) to monitor the API calls to the Shopify server and it shows what looks like a fresh (non-cached) request each time, but how can I check where the response is actually coming from? I'm unfamiliar with MITM proxy; is Chrome DevTools not capable of something similar? Thanks
  • Yes, you can see the information in Chrome DevTools as well. Go to the Network Tab, click on the call your interested in and look for Status Code: 200 (from disk cache). If it doesn't say (from disk cache), then check your cache-control maxage
  • I wasn't aware of the Status Code: 200 (from disk cache) thing. That's very useful information, thanks. I also had Disable cache selected in DevTools which was causing the preflight OPTIONS request method to get sent before every POST request. Once I deselected Disable cache the OPTIONS request method stopped getting sent and just the POST request method was logged.