How to handle pagination with Backbone.PageableCollection and a custom Express route

Question

I am writing an app that uses a database called LeanCloud. I have set up a page where I can view all of the users on the database, but LeanCloud is set to only send 100 pieces of data per request.

There are currently 853 users in the DB and I could change a setting so that 1000 pieces of data per request are sent, but I feel that would slow down the app considerably and it's very likely that the number of users will exceed 1000 before too long.

Here is my express get route:

router.get('/', function(req, res, next) {
    var query = new AV.Query(usersObject);
    var pageNumber = req.query.page
    var perPage = req.query.per_page
    query.limit(perPage)
    query.skip((perPage * pageNumber) - perPage)
    query.count(usersObject).then((userCount) => {
        query.find().then(function(userData) {
            res.json({
                userInfo: userData,
                pageInfo: {
                    userCount: userCount,
                    pageCount: Math.ceil(userCount / perPage),
                    currentPage: pageNumber
                }
            });
        });
    });
});

Obviously, the response contains userInfo and pageInfo, which I can view at /api/users?page=1&per_page=30. Why the query string? This brings me to the next part of the question.

I am using a backbone collection and after some research, I found that backbone.paginator is a drop in replacement for a Backbone collection that does pagination. That is what builds the query string.

export var UserCollection = Backbone.PageableCollection.extend({
    model: UserModel,
    url: '/api/users',
    parse: function(response) {
        return response.userInfo
    },
    state: {
        firstPage: 1,
        pageSize: 30,
        totalPages: null,
        totalRecords: null

    },
})

On this page, there is a table that shows state and queryParams and says that these can be set to adapt to the server API which I do not fully understand.

What should I be trying to do here? Is there a way I can set the values from my server response as the values on queryParams or state from backbone.paginator?

Answer 1

and says that these can be set to adapt to the server API which I do not fully understand. What should I be trying to do here?

This is for users that are integrating to an existing API. The API in your case is the express route, which you are developing so you don't have to do any query params mapping.

Let's say you have to use a third party API that understands firstPage as startingIndex, in that case you need to do:

queryParams: {
 firstPage: 'startingIndex'
}

Is there a way I can set the values from my server response as the values on queryParams or state

As mentioned in fetching data and managing states sending a response with the structure

[{ pagination state }, [{}, {} ...]]

will automatically update the pageable collection state. If the response contains state in another structure, you can use parseState(response){ return response.state; } method to return the state object from response