Data from promise never renders in component

user_5195786 0
Viewed 128

In NativeScript-Vue/Firebase, I have a method with a promise that is supposed to get an array of document uids from the current user's associated Firestore document. The uids correspond to documents associated with other users (the users that the current user is following" aka their "circle").

The Firestore data looks like this: Firestore data

Using vue-devtools, it shows in the data for the page that circleList gets populated by the correct array of data. The problem is, it never renders in the Listview, and isLoading never changes to false. My assumption is that the component is trying to render before the data is loaded. I've tried to solve this with async/await for that method, but it makes the userProfile info from Vuex never render either.

The code looks like this:

<template>
   <Page>
        <StackLayout>
            <Label text="Loading" v-if="isLoading"/>
            <Listview for="item in circleList" v-else>
                    <Label :text="item.name"/>
            </Listview>
        </StackLayout>
   </Page>
</template>


<script>
   import { mapState } from "vuex";
   const firebase = require("nativescript-plugin-firebase/app");
   const userDataCollection = firebase.firestore().collection("userDataCollection");

 export default {
    data() {
        return {
            isLoading: true,
            circleList: [],
            item: {}
        }
    },
    created() {
         this.getCircle();
    },
    computed: {
        ...mapState(['userProfile'])
    },
    methods: {
        getCircle() {
            var circle = this.userProfile.circle
            const promises = circle.map(u => userDataCollection.doc(u).get())

            return Promise.all(promises).then(results => {
                results.map(docSnapshot => {
                    this.circleList.push(docSnapshot.data())
                    this.isLoading = false
                })
            })
                                    
        } 
    }
};
nativescript-vue google-cloud-firestore firebase vuex vue.js
1 Answers

Since userProfile is also async, you will have to wait for it to resolve before you can do the first map in getCircle.

The way I like to do this is by creating an action for userProfile that returns a promise. The action would first check if there is a userProfile in the state. If there is, it will just return userProfile, if not, it will fetch it and then return it:

const actions = {
  getUserProfile({state}) {
    return new Promise((resolve, reject) => {
      if (state.userProfile) {
        resolve(state.userProfile);
        
        return;
      }

      // UserProfile is not yet fetched, so fetch it, add it to state.userProfile
      // and resolve the response so you can use it in Vue
    })
  }
}

Since this action now returns a promise, you can await it in Vue: 

created() {
   this.getCircle();
},

methods: {
    ...mapActions(['getUserProfile']),

    async getCircle() {
        let circle = [];

        try {
          const userProfile = await this.userProfile();
          circle = userProfile.circle;
        } catch (error) {
          // Some error handling here
        }
        
        const promises = circle.map(u => userDataCollection.doc(u).get())

        Promise.all(promises).then(results => {
            this.circleList = results.map(docSnapshot => docSnapshot.data())
            this.isLoading = false;
        })                   
    } 
}
user_61788320
Related