8

I want to make pagination with data what is stored in cloud Firestore. It looks like that:

enter image description here

Note, It is different from load more or infinite loading. Lets assume that, When user click at pager 3, I need to make a request to my Firestore to get 25 items from position 50 to 75(25 items per page).

I should do like that:

db.collection("cities")
    .orderBy("population")
      .startAfter(lastVisible)
        .limit(25);

The problem here is I do not have lastVisible. I know we can get lastVisible by getting first 50 items but it is so dumb because if I do like that, why don't I just get first 75 items and filter what we want in client.

The question is: How to get a number of items from an index to other index by query in Firestore?

Any help would be appreciated! Thanks so much!

Duannx
  • 7,501
  • 1
  • 26
  • 59

3 Answers3

5

Updated answer:

You can maintain an array of size as the decided count of your pages. Value at each index would denote the startAt field value of your cities field.

Additionally you will also maintain a count of your documents. This will help you give the limit value (count / numberOfPages).

You will maintain both of these with help of cloud function triggers, as already described here.

Abdul Wasae
  • 3,614
  • 4
  • 34
  • 56
  • Thanks for your reply. Distributed Counters is new to me. I will take a look at it and comeback with the result – Duannx Jan 12 '18 at 05:24
  • You're welcome. Distributed Counters is just a technique that works around the limitation of firestore that you cannot edit a firestore document more than once per second. So if you know your 'items' count will likely change more than once per second, storing the count in one document will be a problem. So, you solve this by using several sub-counters (and then calculate the total count by aggregating the values of the sub-counters every time). – Abdul Wasae Jan 12 '18 at 05:38
  • Lets assume that, i have total of items = 100. I will show 25 items per page so will have 4 pages. But how do i determine `startAfter` (or `endBefore`) for every page? – Duannx Jan 12 '18 at 06:40
  • You know you have 100 items. You know you have decided to have 4 pages. You now simply save an integer array (let's say, denoting endBefore): [25, 50, 75, 100]. This array now contains the endBefore values at indices corresponding to you page number. You can possibly even maintain this array in your count document directly. – Abdul Wasae Jan 12 '18 at 06:54
  • Assume that, i have all these data above in my hand. But i can not get 25 items from position 50 to 75 because i do not know the item at position 50 nor 75. The only way is get all 100 items and do the `splice`. – Duannx Jan 12 '18 at 07:09
  • I thought that the whole point was not having to retrieve all 100 items in the client if all you need is to show items 50-74 on page 3. – Abdul Wasae Jan 12 '18 at 07:11
  • Ya. It is exactly my problem because the items will be very big number and get all items will take the quota, the time and the performance – Duannx Jan 12 '18 at 07:15
  • Yeah. So do as discussed above. Maintain an array of endBefore values. Now simply get this array and use `db.collection("cities")...` query to get exactly the range of items that is suitable for the page. – Abdul Wasae Jan 12 '18 at 07:18
0

Classic Pagination is great in combination with tables, unfortunately this is not well supported Firestore at the time. Classic Pagination

I would suggest you to switch your approach of limiting data to Infinte-Scroll

Infinite Scrolling

In combination with powerful filtering options you can archive even a better user experience

You can find a handy example in Firebase documentation: https://firebase.google.com/docs/firestore/query-data/query-cursors#paginate-a-query

More Information:
https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1

Saint Play
  • 1,083
  • 10
  • 12
  • Thanks for your suggestion but i just want to find the solution for Pagination because it is the best choice in my case. – Duannx Jan 27 '18 at 01:52
0

You can push the document id to an array and query the collections using

firebase.firestore().collection("users").where(firebase.firestore.FieldPath.documentId(), "in", array)

you can further retrieve the array where array's index is between(pages10 and pages-110) where page is your current page

John Pachuau
  • 73
  • 1
  • 1
  • 6