Pagination with firebase? How

Question
#1

Hi there does anyone have any information on pagination with firebase?
I have watched firebases video on pagination but i need some help implementing in appgyver.
one of my fist questions is how to triger an event when user goes in the end of the page
and how to make the requests for more data.
Thank you in advance

1 Like
#2

Did you find out how to do this?

#3

hi if youre using firestore its already implement it here

image
image1755Ɨ711 44.6 KB

if you use realtime database i havent figured it out yet

#4

I use xano as a backend, thank you very much though

#5

Hi @Dimos_Vamvourellis ,
Iā€™m really new to AppGyver and Firestore and want to paginate my data entries with a ā€œLoad Moreā€ button. Could you please share how you did it?
The object bindings in your image donā€™t show in my data variable. I think youā€™ve used the pageSize and pageToken parameter, right?
But I really donā€™t know how to work with those parameters. So it would be really helpful if you could show your data configuration and if you changed something at firestore etc.
Thanks :blush:

#6

hi you dont need to change anything in firebase,
in order to make the load more option, (and not the next page button), its a bit diy and its main purpose, is to make it that you dont download all the data at once if the user doesnt need it.

some general info, the fist parameter, in pagination i dont know what it does exactly, but i use the page index parameter, as for the page size, is the no of components shown in each page and the page no is the no of the page, to understand how this works, (from what i have understood) is that firebase takes your list, devides it in the number of the pagesize parameter and then dipending on the pageno that you ask it sends the package, with that number ex if pagesize is 5 and pageno 2 it will devide your list in packages of 5 and then send you the second package, meaning that it will send from no6 to no11
you can think it as you have one list and then just adding new packages in it

To do it, there are two ways, the first is to make an ā€˜infiniteā€™ list and you need to make a page variable called list, mapped as your data variable, then make a repeated list from the page variable, and then have a button connected to a page variable called pageNo with the formula pageno+1 , and connected to pagination variable, so at first your pageno is 1 so you set page variable list as the data variable. then when the user goest to the bottom and presses the button you get the data variable with the package no 2 and the only think you have to do is to add the new list (package) to the list of your page variable you could use this formula UNION

As for the second way, where you make a list that has an exact number of ā€˜packagesā€™ that can be added,(ex you want the most three times for the button to be pressed) is to make three of the same lists and under each list, have a button that makes the (next) list no2 visible and activates the downloading process of the list no2 where pagination variable pageno=2 this way is more complicated and you can think as you have invisible lists one under the other and when you need them you download the data and make visibility true.

I would propose the first option, i hope you undestand

Also what you mean by The object bindings in your image donā€™t show in my data variable ?

#7

Thanks for your fast response @Dimos_Vamvourellis
Iā€™ve tried your first method, but firebase doesnā€™t accept the parameter page index (Method: projects.databases.documents.list Ā |Ā  Firebase). So this didnā€™t work for me.
Nevertheless Iā€™ve found another way to make it work:
Iā€™ve added a pageSize parameter that is bound to a page variable. The initial value of the variable is 20 and every time the ā€œLoad Moreā€ button is pressed, the flow node ā€œget record collectionā€ is triggered and the pageSize is set to

ADD(pageVars.pageSize,20)

Then Iā€™ve set the data variable to the output of the previous node.

Anyway, thanks again for your response :smiley:

1 Like
#8

I guess that does work only for the Firestore, right?

@Dimos_Vamvourellis Were you able to do pagination on Firebase Realtime DB? This one seems a bit tricky to be as I need to filter by something within so I am using equalTo and orderBy parameters and cannot add another ā€œstartAtā€ as they cannot be combined. Do you have any workaround in mind, please? I am afraid I will have to do it on FE. Thanks

#9

Hi youre right pagination is intergraded in appgyver only for firestore.
As for realtime db, my understanding, is that you need to make the right database structure based on your app, and that way you only get the data you need or some more(meaning not a lot more) so you can filter and sort in the app frontend.
On the other hand, more specifically for pagination, there is a variable you can use in the request url, so you only get a certain number of ā€˜documentsā€™.
https://firebase.google.com/docs/database/rest/retrieve-data#limit-queries

I hope it helps.