Pagination for infinite scrolling

[sharoonamjid]

I'm interested to know how could one implement pagination/infinite scrolling with moor for the following scenario:

Backend API would return the following data for each page.

{ 
    "data": [
        {
            "id": 1,
            "name": "Eladio Schroeder Sr.",
            "email": "[email protected]",
        },

       {
            "id": 2,
            "name": "Schroeder.",
            "email": "[email protected]",
        },

    ],

    "meta":{
        "current_page": 1,
        "per_page": 15,
        "total_pages": 10
      } 
}

Notice the meta field which I'll be receiving in each response with data. I will be saving this response in db (only data not meta) . From db I would like to get the n numbers of data (paginated) so once I reached to the last item in ui list, I will fetch more items from db so the ui is filled with the persisted data as soon as possible and along with that I will also make the Api request to refresh the same data requested from db by providing next_page_number in the request. Like in the same time both the db and api request will be made. Data from Api will be used to refresh the db data. And data from db will be used to fill the ui with data ASAP and will be refrehed as soon the api reponse is saved successfully. Once the data is saved in db, it will always be there and will only be refreshed from Api according to what is currently displayed in the ui. Through state management of app I will be deciding which chunck of data is needed from db and what page should be requested from Api to refresh the db's specific data.
This is what I'm currently thinking to be able to achieve for my need. But would love to know how would you go for it.

[simolus3]

Your general approach of loading pages from the database and the backend sounds reasonable to me.

You can use limit to implement pagination on queries. Basically, limit(pageSize, offset: pageSize * i) load's the ith page. To know how many entries there are in the database, you can use countAll:

final amountExpr = countAll();
final query = selectOnly(yourTable)..addColumns([amountExpr]);

return query.map((row) => row.read(amountExpr)).getSingle();

Then, divide the amount of rows by the page size and round up to know how many pages there are in the database. I hope that helps!

[sharoonamjid]

Thank you so much. Your suggestions are really helpful for the queries part.