FirebaseListObservable becomes Observable after query

Question

I made a small app on firebase. I have been using a type provided by angularfire called a FirebaseListObservable which allows you to observe changes to your data. The problem I'm having is that Angularfire also provides a way to query the data, by attaching / passing in a query object to the request.

The following returns a FirebaseListObservable.

this.resources$ = <FirebaseListObservable<IResource[]>> this.af.list(`/resources/${this.auth.id}`) as FirebaseListObservable<IResource[]>;

//This returns a regular observable.

this.resources$ = <FirebaseListObservable<IResource[]>> this.af.list(`/resources/${this.auth.id}`,
  {
    query: {
      orderByChild: `${property}`
    }
  }
) as FirebaseListObservable<IResource[]>;

But this returns a plain old observable. The issue is that I need a FirebaseListObservable because it has added CRUD functionality and I'm trying to write simple filter / sorting methods.

I can see they have an Open Issue for this but I'm hoping that there is a way around this issue sooner rather than later. The solution discussed in the ticket describes extending the FirebaseListObservable and overriding the lift method to return the custom observable. I attempted to create a CustomFirebaseListObservable that does just that, but I don't seem to have access to the correct properties (observable.source and observable.operator from within my custom observable. I'm hoping for a way to cast an observable to a firebaseListObservable. Any workaround would do really.

Answer 1

If you are still having this issue, maybe you can create the firebase reference with the ordering and then passing that into angularfire?

let refPath = `/resources/${this.auth.id}`,
    ref = firebase.database().ref(refPath).orderByChild(property);
this.resources$ = <FirebaseListObservable<IResource[]>>this.af.list(ref);