Nuxtjs getting firestore data within asyncData

Question

I'm trying to convert my VueJS app to NuxtJS to work with SSR. I'm stuck trying to get data loaded with asyncData. When I add my query to a 'mounted() {}' function it works fine but I can't get it to work with asyncData(){} so that I can use SSR.

Does anyone have any idea how to fix this.

My code:

 <ul>
   <li v-for='province in provinces' v-bind:key="province.id"> {{province.name_nl}}</li>
      </ul>

  asyncData () {
    return { msg: 'Welcome to my  new app' }
    const moment = require("moment");
    var date = moment(new Date()).format("YYYY-MM-DD");
    let housesArray = []
    let provincesArray = []

    return firebase.firestore()
      .collection('provinces')
      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(doc => {
        provincesArray.push(doc.data());
        });
        return {provinces: provincesArray}
      });
  },

Or is there another way I should be doing this? Keeping in mind that it does have to work with SSR.

PS: Yes this code is inside my pages folder, not the component, I know that's not allowed.

Im not getting any errors, but i also cant console.log or debug the code. So it doesn’t show anything. So i’m not sure where to start. — jonas
– jonas, Commented Sep 8, 2018 at 23:15
you have a return at top of asyncData so no code past that executed — Aldarund
– Aldarund, Commented Sep 8, 2018 at 23:17
Thanks, I didn't realise that the code after a return doesn't get executed. Still trying to learn. But then I still can't return the firestore data because I need to execute 2 calls to firestore, but if I return both with return {provinces: provincesArray, houses: housesArray} the firestore function isn't always executed before the return, any idea on what I have to do to wait for the response, or some documentation anyone knows of that could point me in the correct direction? — jonas
– jonas, Commented Sep 9, 2018 at 15:12
@pmanning yes of course, sorry. Should have thought of that myself. :) Anyway I added my solution now. Just let me know if it isn't clear. — jonas
– jonas, Commented Sep 15, 2018 at 17:29

jonas · Accepted Answer · 2018-09-15 17:28:18Z

9

When using asyncDate() you can add the async and await keywords to wait for the response(s) before returning them.

How I solved it:

 async asyncData () {
    const moment = require("moment");
    var date = moment(new Date()).format("YYYY-MM-DD");
    let housesArray = []
    let provincesArray = []

await firebase.firestore()
  .collection('provinces')
  .orderBy('name_nl')
  .get()
  .then(querySnapshot => {
    querySnapshot.forEach(doc => {
      provincesArray.push(doc.data());
    });
  });

await firebase.firestore()
  .collection("houses")
  .where("valid_until", ">", date)
  .get()
  .then(querySnapshot => {
    querySnapshot.forEach(doc => {
      housesArray.push(doc.data());
    });
  });

return {
  provinces: provincesArray,
  houses: housesArray
}
  },

answered Sep 15, 2018 at 17:28

jonas

4115 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hkchakladar Over a year ago

how do you import firebase/firestore in .vue?

jonas Over a year ago

Have a look at the tutorial here: medium.com/@anas.mammeri/… It's from a while back but I think everything is still relevant.

Collectives™ on Stack Overflow

Nuxtjs getting firestore data within asyncData

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related