Vuefire: Add a callback when data is ready

[posva]

This would allow SSR
Helpful SO question: http://stackoverflow.com/questions/27978078/how-to-separate-initial-data-load-from-incremental-children-with-firebase/27995609#27995609

68

[shershen08]

The referenced SO post is truely helpfull.
However I could not get new Firebase() with only including
https://gstatic.com/firebasejs/3.5.2/firebase.js for Vuefire.

[jwngr]

new Firebase() is the syntax for the legacy SDKs. You should use firebase.initializeApp() instead. See Add Firebase to your app for more information.

[ruvido]

Is this a necessary feature to show a spinning wheel (Loading...) while waiting for data? I cannot find a way to do that within vuefire.

[shershen08]

@ruvido agree, that could simplify that common case usage.
the solution I took from that stackoverflow post and used looks like this:

//firebase for Vue init
var firebaseApp = firebase.initializeApp(config);
var db = firebaseApp.database();

//..

//firebase loaded callback
db.ref('products').once('value', function() {
  //e.g. some other non-Vue but related to data utils can run here
  extractItemsArray(__app__.products);
  //hide DOM element with preloader 
  $('.preloader').hide();
});

[posva]

@ruvido It's not necessary because as @shershen08 said you can do it yourself. It could however improve the API a bit 🙂

[ruvido]

@shershen08 thanks for the input
@posva yes sure, my question was about vuefire

My strategy is very similar to what @shershen08 posted:

mounted: function () { firebase.database().ref('events/2017-02-sorrento/users/').once('value', snapshot => { this.loading = false }) }

In the component I have a v-if to show/hide the spinner:

<div v-if="loading" class="spinner">...</div>

It'd be neat to do it within vuefire

[posva]

before releasing this I'm making sure this allows SSR

[fergardi]

Any progress in this?

I'm binding an array of data like this:

// ...
firebase: {
  list: database.ref('list')
}
// ...

How can I get the readyCallback() method to know all the data has been fetch from Firebase si I can unhide a progress spinner?

Thank you.

[posva]

This should work:

firebase () {
    return {
        list: {
            source: database.ref('list'),
            readyCallback: () => this.loading = false
        }
    }
}

[fergardi]

Thanks for your quick response. Unfortunately, it gives me the following error:

firebase () {
  return {
    list: database.ref('list', { readyCallback: () => { this.loading = false } })
  }
},

[posva]

oh, lol what am I saying. You need to use the object syntax. Updated my comment. It's all in the Readme: https://github.com/vuejs/vuefire#usage

[fergardi]

Works like a charm. Thank you.

[jremi]

readyCallback 🤯 thx

[caweidmann]

Hi @posva

Is there functionality like this for the lerna branch?

I tried something similar:

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

firestore() {
  return {
    bands: {
      source: db.collection('bands'),
      readyCallback() {
        this.loading = false
      },
    },
  }
},

But that throws an error:

Uncaught (in promise) TypeError: document.onSnapshot is not a function

[posva]

in the new version, bind is a promise, so you wait for the promise :)

[caweidmann]

Not quite sure I follow. Where would I set the loading variable to false?

firestore() {
  // here? this.loading = false
  return {
    bands: db.collection('bands'),
  }
},

[posva]

This has actually been answered in many issues already. Could you look them
up please? 😛
On Fri 16 Nov 2018 at 11:33, Cornelius [e-mail] wrote:

Not quite sure I follow. Where would I set the loading variable to false?

firestore() {
// here? this.loading = false
return {
bands: db.collection('bands'),
}
},

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vuefire/issues/69#issuecomment-439449765, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAoicV4TjGmJBa-4oKe0WuC3GzJ3fihFks5uvujWgaJpZM4LzTmj
.

>

Eduardo San Martin Morote

[caweidmann]

For solution using $bind see: https://github.com/vuejs/vuefire/issues/157#issuecomment-380266815

Sorry for the hassle...