Vue JS: API call request on app.vue in single page application-CodePudding

in my project i'm suffering from delay in API requests and that's because i have huge amount of data in API, so i added a cache but it still appears white page when page creates, so i was thinking of adding API call on app.vue so request will be faster... is there a way to do it? now i'm making API request on each page in my project code below:

//building.vue where buildings api used

<template>
    <b-row >
              
             
              <b-col lg="3" md="6"  v-for="(building, index) in buildings"
              :key="index" >
                
                <button type="button"  @click="GoToBuilding(building._id)"
      >
                  <div>
                    <i ></i>
                <router-link
                  
                  :to="`/tables/${building._id}`"
                >      <span > B info - </span>
                    <span>{{building.building_number}}</span></router-link>
                  </div>
                </button>
              </b-col>
         

            </b-row>
</template>

<script>
import BuildingsService from "../../../services/ApiService"
export default {

    data() {
        return {
  

   
        };
    },
    components: {
      props:
  ['buildings'],
       
      BaseHeader,
      //  buildings:[]
    },
 

    }
}
</script>

app.vue:

<template>
  
<router-view :number="count" @send="getNewCount"   @reset="onReset" :buildings="buildings">

<sidebar :number="count" @reset="onReset"/>

</router-view>
</template>
<script>

export default {
components: {
    sidebar,

  },
    data() {
        return {
         buildings: []
      };
        
    },
         
    created(){
    BuildingsService.getBuildings().then((response) => {
                this.buildings = response.data.response;
                 console.log(this.buildings , "skk")
            });

          }
}
</script>

can i add saved API request array in app.vue and use it on other pages? and is it gonna improve my API call?

thanks in advance

Edit: updated question depending on answer below.. but getting empty data with no console errors

CodePudding user response：

Yes, you can call the API a single time in the component that contains router-view and pass down the results to rendered components through props. The rendered components must declare the props that will be passed down to them, but only if they will be using it.

<template>
    <router-view :number="count" 
        @send="getNewCount" @reset="onReset"
        :buildings="buildings">
        <sidebar :number="count" @reset="onReset"/>
    </router-view>
</template>
<script>
    import BuildingsService from "../../../services/ApiService"
    export default {
        components: {
            sidebar,
        },
        data() {
            return {
                buildings: []
            };
        },
        created(){ 
            BuildingsService.getBuildings().then((response) => {
                this.buildings = response.data.response;
            });
        }
    }
</script>

But if the API call returns a huge amount of data or is really slow, then I really suggest that you check into optimizing the backend queries of your API, paginating results, and loading them progressively with lazy load on scroll or something.

Also it would be good if you can keep something in your state to check if the data is being loaded or not, so that you can show a loader or something rather than a white page until you get the results.

CodePudding user response：

One possible solution is to adapt getBuildings(), such that it will call the backend only once and store the result in a property of BuildingsService, e.g. cachedBuildings.

If cachedBuildings is empty, getBuildings() calls the backend and stores the result in cachedBuildings.

If cachedBuildings is not empty, getBuildings() returns cachedBuildings.

The advantage of this solution is, that you only adapt your code in one place and the caching is transparent for every component.