Add Firebase New Enhanced Query Support about firebase-element

[jwngr]

The Firebase changelog has details on what changed with Firebase 2.0.0. Updating this repo should not require a large amount of work, although a few methods have been added/changed name.

[chuckh]

Yep. Below is the list. I have forked firebase-element and will give it a go to update some of this. Any suggestions or tips to get me started?

Firebase 2.0.0 Changelog
FEATURE Added Query.orderByChild() for ordering by arbitrary child attributes.
FEATURE Added Query.orderByKey() and Query.orderByPriority() to explicitly set sort order.
FEATURE Added Query.equalTo() for exact-match filtering using arbitrary child attributes.
FEATURE Added Query.limitToFirst() and Query.limitToLast() to explicitly set limit direction.
FEATURE Improved performance of existing query functionality.
CHANGED Changes in priority now raise a child_changed event in addition to a child_moved event.
DEPRECATED Deprecated Firebase.name() in favor of Firebase.key().
DEPRECATED Deprecated DataSnapshot.name() in favor of DataSnapshot.key().
DEPRECATED Deprecated Query.limit() in favor of Query.limitToFirst() or Query.limitToLast().
REMOVED Removed the previously-deprecated Firebase.setOnDisconnect() and Firebase.removeOnDisconnect() methods.
FIXED Firebase.ServerValue.TIMESTAMP now works properly in transactions.
FIXED Transaction callbacks now always return the snapshot from the specific transaction.
FIXED Fixed transactions bug when running on cached data.
FIXED Fixed some cases where child_added events were raised with only partially-complete data.

[chuckh]

So far in my branch I have Firebase.key(), limitToFirst(), limitToLast(), child_moved working. I have added orderByChild, orderByKey, and orderByKey partially working.

When I use my firebase-element:

<firebase-element id="dinosaurOrderByChild" on-data-change="{{dinosaurOrderByChildDataChange}}" data="{{dinosaurOrderByChildData}}" keys="{{dinosaurOrderByChildKeys}}" orderByChild="order" location="https://dinosaur-facts.firebaseio.com/" log></firebase-element>

The console shows that the child-addd have been sorted ok, but the data stored in dinosaurOrderByChildData is not sorted.

Console log messages:
child-added lambeosaurus firebase-element.html:420
child-added stegosaurus firebase-element.html:420
child-added triceratops firebase-element.html:420
child-added pterodactyl firebase-element.html:420
child-added bruhathkayosaurus firebase-element.html:420
child-added linhenykus firebase-element.html:420
acquired value https://dinosaur-facts.firebaseio.com/ firebase-element.html:321

And the object stored in dinosaurOrderByChildData is not sorted.
{bruhathkayosaurus: Object, lambeosaurus: Object, linhenykus: Object, pterodactyl: Object, stegosaurus: Object…}

Anyone have and idea why this is happening?

See full code at:
https://github.com/chuckh/firebase-element/blob/firebase-2.0.0/firebase-element.html
https://github.com/chuckh/firebase-element/blob/firebase-2.0.0/demos/firebase.html (demo)

Requery function

requery: function() {
      // shut-down previous observers (if any)
      this.closeQuery();
      this.closeObserver();
      // construct new query
      var query = this.ref;
      if (query) {
        if (this.start && !this.orderByKey) {
          console.log("requery: startAt", this.start);
          query = query.startAt(this.start);
        }
        if (this.end) {
          query = query.endAt(this.end);
        }
        if (this.limit > 0) {
          query = query.limit(this.limit);
        }
        if (this.limitToFirst > 0) {
          query = query.limitToFirst(this.limitToFirst);
        }
        if (this.limitToLast > 0) {
          query = query.limitToLast(this.limitToLast);
        }
        if (this.orderByChild) {
          console.log("requery: orderByChild", this.orderByChild, this.ref);
          query = query.orderByChild(this.orderByChild);
        }
        if (this.orderByKey) {
          if (this.start) {
            query = query.orderByKey().startAt(this.start);
          } else  {
            query = query.orderByKey();
          }
          // console.log("requery: orderByKey", query);
        }
        if (this.orderByPriority) {
          console.log("requery: orderByPriority", this.ref);
          query = query.orderByPriority();
        }
        this.query = query;
        // console.log("requery: query", this.query)
      }
    },

[jwngr]

Hey @chuckh - thanks for being proactive and opening up your pull request! Great stuff. I also put in a PR to update the bower.json file so hopefully we can get this lib up-to-date together.

The behavior you are seeing is expected. It sounds like the query is returning the results in the sorted order that you expected, which is great. As for the data object itself, it is just a plain old JavaScript object. There is no way to order the keys in the object, since it is just a JavaScript object. So no matter what ordering you specify, it will always be ordered by whatever JavaScript objects are normally ordered by. If you want ordered data, you should use a query, not grab the data object itself. Hopefully that makes sense!

Looks like you are close to finishing off this PR. Keep it up! I'm sure the Polymer folks will be happy with your contribution.

[jwngr]

Also, it looks like you got most of the key changes. The only ones that really needed to be handled in firebase-element are the rename from name() to key(), the rename from limit() to limitToFirst() / limitToLast(), the updated startAt() / endAt() method signatures, and the additional orderBy*() methods. Looks like you already got all those!

[chuckh]

Hey @jwngr thanks for the explanation and reviewing the code. It really helped. Below is an example of using a query for ordering data, based on your suggestion. I am almost done with the PR. Just want to add a demo of using a firebase query displayed as a list.

var ref = new Firebase("https://dinosaur-facts.firebaseio.com/");
      console.log('dinosaur-facts by child order startAt letter s');
      var data = '';
      var query = ref.orderByChild("order").startAt("s").on("child_added", function(snapshot) {
        data = data + snapshot.key() + " was " + snapshot.val().height + " meters tall" + " -- order " + snapshot.val().order + '\n';
      });
      console.log(data);

I also updated the bower.json for firebase 2.0.x since it will be need for the query changes.

{
  "name": "firebase-element",
  "private": true,
  "dependencies": {
    "polymer": "Polymer/polymer#master",
    "firebase": "2.0.x"
  }
}

[chuckh]

I have submit a pull request for this. It is pull #23.

[jwngr]

Fantastic job @chuckh! You are part of the reason why I love the development community. I really appreciate you stepping in and putting together this comprehensive PR. I don't have the power to merge this in, but hopefully it will get merged in soon. Thanks for fixing the Bower dependency version as well. I'll close my open PR which changes it to 1.1.x since that is no longer needed.

[chuckh]

Thanks @jwngr! I am glad I could contribute.

We think Polymer and Firebase are a great combo. We think so highly of the combo we are building an app called Actionplanr using Polymer and Firebase. We plan to be in beta next month.

[kevinpschaaf]

Closing as #23 was merged in 45df802.