Minimize the number of axios requests made every time a Vue component is displayed

Question

Minimize the number of axios requests made every time a Vue component is displayed

I am relatively new to Vue, so please bear with me as I may not have all the knowledge in this area.

Within one of my child components (Product_Collection.vue), I am making an axios request to retrieve products from my Shopify store using 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 are 10 t-shirts). When I click on a product, I want to view it in more detail with additional information and images, similar to the experience on Amazon.
The product is then shown individually in a Product_Single.vue component. So far, everything seems to be working fine.

However, here lies the issue...

When I navigate back to the products page (Product_Collection.vue) (the page displaying the 10 t-shirts), the axios request to the Shopify API is triggered again, causing the component to be re-rendered from scratch.

My question is how can I instruct Vue to refrain from fetching data from the Shopify API every time the component is rendered? Thank you for your help.

javascript vue.js axios shopify vue-component

Answer 1

Answer №1

It seems like you are interested in implementing cache-control, a feature that Axios conveniently supports through 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' },
    // enabling cache by default
    adapter: cacheAdapterEnhancer(axios.defaults.adapter)
});

http.get('/users'); // actual HTTP request sent
http.get('/users'); // response retrieved from cache without making another HTTP request
http.get('/users', { cache: false }); // manually disabling cache triggers a new HTTP request

Alternatively, you could create your own caching mechanism by storing results in an object and managing data expiration manually. However, using cache-control headers and expiry provided by the API eliminates the need to handle stale data within the application.

Answer 2

It seems like you are interested in implementing cache-control, a feature that Axios conveniently supports through 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' },
    // enabling cache by default
    adapter: cacheAdapterEnhancer(axios.defaults.adapter)
});

http.get('/users'); // actual HTTP request sent
http.get('/users'); // response retrieved from cache without making another HTTP request
http.get('/users', { cache: false }); // manually disabling cache triggers a new HTTP request

Alternatively, you could create your own caching mechanism by storing results in an object and managing data expiration manually. However, using cache-control headers and expiry provided by the API eliminates the need to handle stale data within the application.

Answer 3

Answer №2

If Vue Router is not in use and you need to conceal the list page, consider utilizing a straightforward alternative.

Opt for v-show over v-if. This allows the component to be concealed and revealed without being recreated.

Furthermore, when do you make the API call? Do you do so within the created or mounted hook?

Answer 4

If Vue Router is not in use and you need to conceal the list page, consider utilizing a straightforward alternative.

Opt for v-show over v-if. This allows the component to be concealed and revealed without being recreated.

Furthermore, when do you make the API call? Do you do so within the created or mounted hook?

Answer 5

Answer №3

If you're working with GraphQL, consider utilizing the Apollo state management method which seamlessly integrates with GraphQL. Take a look at this resource: https://dev.to/n_tepluhina/apollo-state-management-in-vue-application-8k0

Instead of rewriting the application using axios and incorporating Vuex into the mix, Apollo client may offer a more convenient solution.

Answer 6

If you're working with GraphQL, consider utilizing the Apollo state management method which seamlessly integrates with GraphQL. Take a look at this resource: https://dev.to/n_tepluhina/apollo-state-management-in-vue-application-8k0

Instead of rewriting the application using axios and incorporating Vuex into the mix, Apollo client may offer a more convenient solution.

Minimize the number of axios requests made every time a Vue component is displayed

Answer №1

Answer №2

Answer №3

Similar questions

Adjusting or cropping strokes in a JavaScript canvas

What could be causing my HTML elements to shift position based on varying screen sizes or zoom levels?

TestingCompilerFactory is not available as a provider

What is the reason for the initial display of an empty option when using AngularJS to select an

What is causing the TypeError when trying to set a property on undefined in AngularJS?

Tips for Designing a Custom Footer Layout for KoGrid

A guide to resolving the Postgres issue: "The bind message provides 8 parameters while the prepared statement "" only needs 6."

Vue: Load page content only after the route change is complete

A guide on utilizing AngularJS to extract data from a webpage

Guide to retrieving objects in React.js

What are the steps to effectively implement the useEffect hook in React?

Application route is failing to direct to the HTML page

Experience the magic of MFA Firebase combined with the seamless flow of React

Updating checkboxes in Vue.js

Tips for streamlining the transfer of essential features from a main project to its duplicate projects

Encountering an issue while attempting to generate a dialog popup with jQuery

Guide on how to clear and upload personalized information to Stormpath

Is it possible to send a server response without requiring a callback function to be provided from the client side?

Check if the element is not present in the array, then add it to the array

What is the best way to extract specific values from one JSON object and transfer them to another using lodash?