Angularfire: Migration doc missing query

Created on 4 Oct 2017 · 5Comments · Source: angular/angularfire

Version info

Angular 4.4.4
AngularFire 5 RC1
Firebase 4.5

Angular:
4.4.4

Firebase:
4.5.0

AngularFire:
5.0.0-rc.1

How to reproduce these conditions

Using in old version:
this._angularFireDatabase.list('/appData/images', {query: {orderByChild: 'order'}})
then migrated into:
this._angularFireDatabase.list<Images>('/appData/images', {query: {orderByChild: 'order'}}).valueChanges()
But it is not working and not compiling because it is not correct to keep query like {query: {orderByChild: 'order'}}

Expected behavior

Getting the correct way to do the query for the new version.

Actual behavior

Missing.

Source

almothafar

Most helpful comment

Hi @almothafar I get what you mean.

Back in 4.0:

var query = this.database
      .list("items", {
        query: {
          orderByChild: "id",
          equalTo: this.itemID
        }
      })
      .subscribe(result => {
           // You could go through the result just by:
           result.forEach( item =>{
            console.log(item.id);
           });
       });

Now in 5.0:

// If you don't cast your variable to string you'll probably get no result
const query = this.database
      .list("items", ref=> ref.orderByChild('id').equalTo((this.itemID).toString()))
      .valueChanges();
      .subscribe(result => {
           // Now, I can't access to the json keys directly, so I save the object.
           this.myItems=result;
           this.myItems.forEach( item =>{
                console.log(item.id);
           });
       });

You can find more querying lists documentation :smiley:

erikagtierrez on 14 Oct 2017

👍3

All 5 comments

Hey @almothafar! We upgraded the API to work better with RxJS. See the migration guide here. It's not much work to switch and it provides several advantages (the new library is 55% smaller).

However, if you want to stay on the old API for the time being you can use the angularfire2/database-deprecated module. Do know that we will remove it in the future.

davideast on 4 Oct 2017

@davideast thank you for the reply, it is clear, I just want to ask how to migrate the query part, you not including it in migration guide.

almothafar on 4 Oct 2017

👍1

Hi @almothafar I get what you mean.

Back in 4.0:

var query = this.database
      .list("items", {
        query: {
          orderByChild: "id",
          equalTo: this.itemID
        }
      })
      .subscribe(result => {
           // You could go through the result just by:
           result.forEach( item =>{
            console.log(item.id);
           });
       });

Now in 5.0:

// If you don't cast your variable to string you'll probably get no result
const query = this.database
      .list("items", ref=> ref.orderByChild('id').equalTo((this.itemID).toString()))
      .valueChanges();
      .subscribe(result => {
           // Now, I can't access to the json keys directly, so I save the object.
           this.myItems=result;
           this.myItems.forEach( item =>{
                console.log(item.id);
           });
       });

You can find more querying lists documentation :smiley:

erikagtierrez on 14 Oct 2017

👍3

Thanks, a lot @erikagtierrez yeah this is what I was meaning, this is missing from migration guide.

almothafar on 14 Oct 2017

❤1

Hi guys. I did this for multiple parameters:

Before in 4.0:

private itemsObservable$: FirebaseListObservable<any[]>;

this.equalSubject$ = new BehaviorSubject(null);
this.childSubject$ = new BehaviorSubject(null);
this.pageSubject$ = new BehaviorSubject(200);

this.itemsObservable$ = db.list('/items', { 
   query: {
        orderByChild: this.childSubject$,
        equalTo: this.equalSubject$,
        limitToFirst: this.pageSubject$
      }
});

filterByValue(value: any) {
    this.equalSubject$.next(value);
    this.childSubject$.next('items/id');
    this.pageSubject$.next(200);
}

Now in 5.0:

private pagerSubject$: BehaviorSubject<IPager>;

//In constructor:
this.pagerSubject$ = new BehaviorSubject(new Pager(null, 200, null));

//filter by order, limit, value. Firts to validate that child && value is not null
this.cupoObservable = this.pagerSubject$.switchMap(pager =>
   db.list('/items', ref => (pager.child && pager.value) ? 
                              ref.orderByChild(pager.child)
                                   .equalTo(pager.value)
                                   .limitToFirst(pager.limit) : ref)
                                   .valueChanges());

filterByValue(value: any) {
    this.pagerSubject$.next(new Pager('items/id', 200, value));
}

//Model Pager:
export interface IPager {
    child: string;
    limit: number;
    value: any;
}

export class Pager implements IPager {

    constructor(
        public child: string,
        public limit: number,
        public value: any) {
    }
}