Vuefire and async fetch() in NuxtJS: Fails on page refresh

Question

I am trying to use Vuefire in Nuxt's fetch method. It works on initial page load, however, if you refresh the browser, it will fail with the following console error:

Here is the relevant code:

  async fetch() {
    await this.$bind(
      'comments',
      this.$fireStore
        .collection('comments')
        .where('photoId', '==', this.photo.id),
      {
        wait: true
      }
    )
  },
data() {
    return {
      comments: []
    }
  },

Anyone have any tips on how I can fix this so it also works if you refresh the browser? I am probably not writing the above code correctly. Thank you!

Answer 1

I don't know what you are trying to do with this.$bind, but I guess you can make that work this way:

data() {
  return {
    comments: []
  }
},

async fetch() {
  this.comments = await this.$fireStore
    .collection('comments')
    .where('photoId', '==', this.photo.id),
  {
    wait: true
  }
},

fetchOnServer: false

You can check an example in the Nuxt documentation.

Answer 2

You have to declare this.comments on fetch()

Now the firestore API in nuxt firestore module changed to this.$fire.firestore https://firebase.nuxtjs.org/community/migrate

Answering Sergio: this.$bind came from Vuefire

https://vuefire.vuejs.org/api/vuefire.html#bind

async fetch() {
    this.comments = await this.$bind(
      'comments',
      this.$fire.firestore
        .collection('comments')
        .where('photoId', '==', this.photo.id),
      {
        wait: true
      }
    )
  },
data() {
    return {
      comments: []
    }
  },