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!

What is this.$bind doing here? async fetch() will run server side or client side depending on the curcumstance, my guess is that this code does not work server side. — Dylan
– Dylan, Commented Sep 10, 2020 at 16:11
then I will lose the whole point of Server side rendering for SEO. — redshift
– redshift, Commented Sep 30, 2020 at 14:53

Beto Garcia · Accepted Answer · 2021-01-02 23:29:01Z

1

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: []
    }
  },

answered Jan 2, 2021 at 23:29

Beto Garcia

566 bronze badges

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

Comments

Sergio Cerrutti · Accepted Answer · 2020-09-30 10:54:14Z

0

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.

answered Sep 30, 2020 at 10:54

Sergio Cerrutti

4042 silver badges9 bronze badges

1 Comment

redshift Over a year ago

Thanks. However, I need to render the comments on server side for SEO. Thus, I don't think setting false willwork for me.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related