Updating firebase query

[alekbarszczewski]

In my vue component I have this:

{
  firebase () {
    return {
      routes: Firebase.database().ref(`items/${this.$store.state.user.uid}`).orderByChild('when').limitToLast(5),
    };
  },
}

Now I would like to dynamically update this query to either increase limit or change ordering field.
Here is what I tried:

1. Make firebase () func in component to depend on some data param:

{
  data: { limit: 5 },
  methods: {
    loadMore () { this.limit = 10; },
  }, 
  firebase () {
    return {
      items: Firebase.database().ref(`items/${this.$store.state.user.uid}`).orderByChild('when').limitToLast(this.limit),
    };
  },
}

It does not work, firebase() is no called on data.limit change.

2. Update query using $firebaseRefs

{
  methods: {
    loadMore () { this.$firebaseRefs.items.limitToLast(10); },
  }, 
  firebase () {
    return {
      items: Firebase.database().ref(`items/${this.$store.state.user.uid}`).orderByChild('when').limitToLast(5),
    };
  },
}

It has no effect...

3. Update whole firebase binding dynamically

{
  methods: {
    loadMore () {
      this.$bindAsArray('items', Firebase.database().ref(`items/${this.$store.state.user.uid}`).orderByChild('when').limitToLast(10));
    },
  }, 
  firebase () {
    return {
      items: Firebase.database().ref(`items/${this.$store.state.user.uid}`).orderByChild('when').limitToLast(5),
    };
  },
}

It works, but for a moment "items" is empty array and then loads with updated limit. I would like to avoid such "blink" and just display loader on top of current items (5) and just append new items added by changing limit to (10).

Any idea how I can do this?

[posva]

I see. This is, unfortunately, necessary because when an array is bound, the current variable has to be set to an empty array so it is populated progressively. However, I think I could make it so binding over an existing reference, waits for it to be populated before taking into account the other firebase events responsible for adding children. I'll create a cleaned up issue to track the feature