Ionic: Firebase query returns missing data

Question

I'm trying to setup a pagination system in ıonic for Infinite Scroll. What I am trying to achieve is get data in block with a spesific amount (for example 10 data). Then, when the user reaches to the bottom, it should get another block of data starting from the last data it recorded. However, when I run my code, the query gives a result of a block with 1 data instead of 10.

I tried adding console logs and I tried to understand the problem. I shared the information I have.

feed.page.ts

export class FeedPage implements OnInit {

  ideas: any;
  offset =5;
  nextKey: any;
  prevKeys: any[] = [];
  subscription: any;

  data: any[] = [];

  constructor(private afstore:AngularFirestore,
              private feedsrvc:FeedService) { }

  ngOnInit() {
    this.getIdeas("5dd46790-b369-11e9-bd2b-a7c5019a82a5")
    console.log("baş")
    console.log(this.data)
  }



  loadData(event) {
    setTimeout(() => {
      console.log('Done');
      console.log('Bak bu: '+this.nextKey);
      this.getIdeas(this.nextKey);
      event.target.complete();
    }, 500);
  }

  private getIdeas(key?){

    this.subscription = this.feedsrvc.getIdeas(this.offset,key).valueChanges().subscribe(ideas =>{
                                                                      console.log("Adet: "+this.offset)
                                                                      console.log("Önce")
                                                                      console.log(ideas)
                                                                      //this.ideas = ideas.slice(0,this.offset)
                                                                      this.ideas = ideas
                                                                      this.data=this.data.concat(this.ideas)
                                                                      //console.log("ud"+this.ideas)
                                                                      this.nextKey = `${ideas[this.offset].uuid}`})
                                                                    console.log("Son Key: "+this.nextKey)
  }

}

feed.service.ts

export class FeedService {

    constructor(private afstore:AngularFirestore){}

    getIdeas(offset, startKey?){

       return this.afstore.collection('posts', ref => ref.limit(offset+1).orderBy("uuid").startAt(startKey))
    }
}

rtpHarry · Answer 1 · 2019-08-01T05:25:45.080

0

I think the order of your query is important.

You are collecting {pagesize} + 1 and then later starting at {startkey} which I assume is one before the end.

Try this:

return this.afstore.collection('posts', ref => ref.startAt(startKey).orderBy("uuid").limit(offset+1))

BTW pagination is not well suited to Firebase but when I was experimenting with it a while back I managed to get a nice "load more" button working using the code in this answer. It might help you.

edited Aug 01 '19 at 05:25

answered Aug 01 '19 at 05:19

rtpHarry

13,019
4
43
64

Thanks you sooo much for your answer but unfortunetaly it doesn't work, it does the same thing – onur sertgil Aug 01 '19 at 09:36
Hmm, looking a second time I think actually the orderby should be first, but this isn't your overall issue clearly. Let me review the code again and I'll try to update my answer. – rtpHarry Aug 02 '19 at 04:32
OK I've looked some more. I'm kind of new to it myself but your code looks wrong all over the place. Where are you getting your inspiration for this from, is it a tutorial? Compare the answer that I linked you to, it uses totally different techniques. It looks like you are trying to use a `uuid` from your table as the `startAt()` key but that's [not what you pass in](https://firebase.google.com/docs/firestore/query-data/query-cursors) – rtpHarry Aug 02 '19 at 04:42

Ionic: Firebase query returns missing data

1 Answers1