How to build pagination API using Hapi JS and MYSQL - hapi.js

Question

I would like to develop an API using HAPI JS and MYSQL using limit and offset parameters
Could anyone please suggest me resources on how to develop this.
Thanks.
Example: GET /schools?offset=10&limit=20

Answer 1

Paging depends on very basic principles.
First, you need to know in a particular query, which you'll show in the page you have, how many rows do you have?
For example, you listing blog post on your page, get total row
SELECT count(*) FROM blog_post_table; // cosnt numRows = Query....,
Let's say it's 168;
Now, you need to decide how many rows will be shown in a page. On your example, there is a query parameter "limit=20" which answers our question.
const perPage = request.query.limit || 20;
Based on the limit parameter in the query string or at least 20 items per page, validation is your homework, Joi.
Then, we should calculate how many pages will be there based on our perPage information.
const totalPages = Match.ceil(numRows / perPage);
It results in 9, we used Math.ceil, you get it I assume, you can't divide 168 with 20 because there are 8 remaining items. The result w 8.4, means we need one more page to show remaining 8 items.
So far so good, now we have to calculate our offset, where we start from reading data. In the first page, of course, it starts from 0, but what about second or fourth or ninth?
Now we need a current page parameter, and we should carry this information in query strings (I discarded your offset=10 definition on purpose), let's say there is parameter in query string named page
const currentPage = request.query.page || 1; // easy, yet harmful, it needs validation
Now we know our current page, now we can calculate our limit based on those figures.
const offset = perPage * (currentPage - 1);
To realize, put numbers on the places
const offset = 20 * (1-1); // page 1 offset = 0;
const offset = 20 * (2-1); // page 2 offset = 20;
.
.
.
const offset = 20 * (9-1); // page 9 offset = 160;
Now we can make our main query based on our calculations.
const sql = `SELECT * FROM blog_post_table LIMIT ${perPage} OFFSET ${offset}`;
Fetch rows and send to your page. Some additional information will be useful if you want to show a proper paging interface.
Let's say your response data is like this;
const response = {
'results': ['array of elements from db'],
'currentPage': currentPage, // learn object literals, it unnecessary,
'nextPage': currentPage + 1, // don't be that naive, validate this,
'lastPage': totalPages, // it is obvious
'previousPage': currentPage - 1, // what if we're in the very first page, then we can go to 0, validate!
}
BONUS:
Little code that generates previous and next pages, not a perfect solution just made it up quickly.
const getOtherPages = (totalPages, currentPage) => {
previousPage = null
nextPage = null
if currentPage > totalPages or currentPage < 1:
return previousPage, nextPage
if currentPage > 1:
previousPage = currentPage - 1
if (currentPage + 1) < totalPages:
nextPage = currentPage + 1
return [previousPage, nextPage]
}
// Usage
const [previousePage, nextPage] = getOtherPages(totalPages, currentPage);