Paginate data from Firestore

[petoma]

I was wondering about the appropriate way to paginate data from Firestore in React Studio. I have a big collection and what I have done is to limit the number of documents to a dataSlot that I can change with a picker, but the behavior is not exactly as I would like. When the user loads the screen, it shows a default 50 documents which is limited with the query options. If the user changes that 50 to 100 in the picker, it will show 100 documents as expected but I have the impression that it loads again the first 50 docs and so on.

What would be the right way to do it?

[Antti_Neonto]

I’d check this and would try to achieve it it by using data slots and startAfter.

Note that I havent tested it but I would guess that it would overwrite the Data sheet so that previous rows are not visible.

Paginate data with query cursors  |  Firebase

[petoma]

Thank you for your answer and I am sorry if this is a silly question. I understand the process but how can I save a “document” within a dataSlot so I can use the startAfter method?

[petoma]

I keep thinking about this and I am not able to get the solution by myself. I would really appreciate if anyone familiar with pagination from Firestore can guide me in some way. I understand the concept of fetching the lastViewedDoc but I don’t know where I should write the query script or store that lastDoc. Probably they are basic concepts but the lack of understanding is retaining me from solving the issue.

Thank you!

[Antti_Neonto]

I thought about this a bit and if your app is not having thousands of users I would still be using .limit() in the query. This means that every time you update the value in Data slot the whole list is reloaded but it should not be a big deal if you’re not expecting thousands of page loads.

If you want to load only the next n-number of documents it would require custom coding and managing the Data sheets in the custom code. This could potentially break some stuff in the Delete/Update interactions…

This video explains it: https://www.youtube.com/watch?v=poqTHxtDXwU

On my example i’m using Data slot for querying n-number of rows with .limit(DATASLOT). Then when I simply update the data slot value used inside the .limit() with a button click or other interaction. It’s the same approach as you already had with a picker.

[petoma]

Thank you so much for your answer. That kind of solution is the one that I already have in the project. I established a limit and I have a picker where the student can change the number of documents to be shown. I don’t have too many users. I am not worried about reads. But it is not comfortable that the user gets to the bottom of the list, click the button to show more or change the picker and the list go back to the top so you have to scroll down again to see the new added documents. It would be great to avoid that behavior and not to read again the first batch of documents.

After reading Firestore documentation, I have certain idea about how it should be done, but I need some guidance. I know that I would need to take a “snapshot” of the first batch and store that snapshot or variable with the last document viewed in a dataSlot. I understand that I would need to have that slot ready, but I don’t know where I should write the script to store the snapshot in that dataSlot.

As the query would change after clicking the “Show more” button, I don’t know if I have to create different dataSheets with different queries, or I need to write a specific script in the list options. I know my knowledge is a lack but I consider this to be a very basic thing in the app and that’s why I would like to learn to do it so I can apply it in several screens as I have many views of different collections (list of documents, list of scores, list of users, etc.).

Thank you!

[petoma]

I have changed the picker option and include a button just as like @Antti_Neonto’s project. The behavior is similar and I don’t mind about reading again the documents that were already shown but what I would like to solve is the scrolling to top feature. Here I leave a video where you can see how it scrolls to top of the list every time you click the button:

ScrollingIssue

I have noticed that if I use a mobile device it behaves correctly. It does not scroll up to top and it stays in its place loading the new documents below and the student can go ahead and scrolls down. However, I use a specific browser for my app (Web Midi Browser) which behaves the same that the browser in a computer being what you can see in the video. What can I do to force it not to scroll up to top no matter the browser or device that I use?

[petoma]

I leave here the behavior of the loadMore button in the list when I use it in a mobile device:

loadMore

That is exactly the kind of behavior that I would like in any other browser from any device. However, as you can see in the previous post, there are some browser in the mobile device and if you run it in the computer that it loads the entire list again and it goes up to the top of the list.
I would really appreciate some guidance about how to achieve this.
Thank you!

[Antti_Neonto]

Hi, this will be fixed in the next release. There was a small bug in the code which takes care of updating the data sheet. Basically the Data sheet was cleared out in the wrong place in code.

[petoma]

Hey! That’s great news! I am looking forward for that new release. This fix will improve my students experience a lot. Thank you!

[petoma]

Indeed this is fixed! I just tried the last beta version and it is working great! Thank you so much.

Just one more detail: How can I make the button “Show more” not to show if all of the documents are there? If the user gets to the last document, the button should not be there to be clicked anymore.

[Antti_Neonto]

I dont think Firestore offers information about the last document but I would look into their docs. You should probably query the last document based on the created_date field (or any field which you can use for this purpose) and then compare that into the last document in list. Then if the your list reached the last document then store “end-of-list” value into Data slot and use that for button’s “enabled” property.

[petoma]

Now everything is working great with the button “Show more” and my documents are perfectly paginated. One small detail would make it just perfect: Is it difficult to get the button “Show more” not to be shown or be hidden if the list gets to the last of the documents?