Create A pagination middleware with Node.js
Hello, guys have you ever wondered how google handles the result returned when you use the google search box, well, google returns data as a result of your search which could be up to thousands, and the question is, do they display all data at a time? NO, because Users can not get lost and can concentrate on a particular amount of content. Hierarchy and paginated structure improve the readability score of the content also, aid The pages to load faster due to the less content on each of them, all of these and more are done with the aid of pagination which makes it possible for them to make available for users to navigate to the next page or the previous page to see more or less result returned.
So, guys in this article we are going to look at Pagination, which is the ability to return just a subset of your result from your API to the user so that they can go page forward or page backwards, we are going to tackle this in three different ways :
first, we are going to build just the most basic pagination you can build inside of an API,
second, we are going to take that a step further and we are going to make a nice middleware for our pagination so that we can apply it to any resources in our API.
lastly, we are going to hook up with a simple section of our pagination to the database so that we can have a real-world MongoDB database that we can paginate with our API. link to completed project GitHub. so let us begin!.
You have to create a folder called node.js pagination or any name of your choice, you can use the terminal to create the folder by typing
mkdir node.js-pagination
after that, you go into the directory we just created by typing
cd node.js-pagination
initialize npm in the folder by typing in the terminal
npm init
make sure you are currently in the node.js-pagination folder,
The next step is to install packages that we will use in this project which include mongoose, nodemon, express In the terminal type
npm install mongoose nodemon express
this is shorthand for installing packages instead of installing them separately.
we will also have to install a vs code extension called RESTCLIENT
after that, you should go on ahead and create a file called server.js
write this code below into the server.js for the server setup.
in the terminal type in npm start you should be able to see this below if so everything is working fine
now you have to open the package.json file we will have to configure the start script to rerun if any change detected instead of stopping and starting the server if any change is made, that is why we installed nodemon.
You have to add this line of code in the scripts object
“start”: “nodemon server.js”,
after that stop the server and start again by typing npm start, and you will see
Let’s set up our first route which should be getting the list of users like I said earlier this is the first stage is to create very simple pagination we don't have to worry about the database, that will come later in this article
Now we can create a file called request.rest earlier we installed a vs code extension called REST CLIENT this extension enables us to run .rest extension which allows us to send a request and get a response from the server.
now in the request.rest file you should type in
GET http://localhost:3000/users
Then you click on the text on top of your URL which says “send request” you should see the response of all the users in JSON format.
We now know that our user is working.maybe we want to be able to pass what page and limit of resources we want and not the whole list you can imagine when we have thousands of users and we don't want to get all the user every single time.
Let's look at our request now, for example, we want to be able to pass a page to be 1 and the limit to be 5
What this is just saying is give me the first page and only five users from the page obviously, this won't do anything now lets quickly go into our server file and start implementing it.
So inside the get users endpoint, we want to be able to get those variables we just passed up. the page and the limit so now we can process the request and get the passed in variables page and limit with this the client should be able to limit the number of data returned.so what we are gonna do is to get the array of the user and condensed them to that specific page and specific users in that limit range the only way we can do this is to create a startIndex and endIndex of where we will be querying
This code will produce the result below because the client requested to get page 1 and a limit of 5
If you change the page variable to be 2 with the limit of 5 then you will get the next five-user in the array see below
startIndex = (page-1)* limit .what this is saying that we know that the page that we are on for example page 1 is 1 page 2 is 2 but since arrays are 0 indexed and the pages are 1 indexed we need to make sure we subtract 1 because page 1 is the same as starting at index 0 in our application. So 1–1 is 0 * our limit will start at index 0
endIndex = page* limit. because we dont need to worry about subtracting one since we want to get the end of the array and not the begining of it. so now that we have our startIndex and endIndex what we can do is just query our user to return just the users between the startIndex and endIndex by just typing user.slice(startIndex,endIndex)
So with what we have done so far, we are able to return a specific page and specific limit of the user array to the client. but when you have a paginated API you would love to let the client know if there is a next page or a previous page.
That will lead us to create an object variable called a “result” that will be housing the request users and previous page or next page if any.but lets quickly convert the page and limit to real number just like this
const page = parseInt(req.query.page);
const limit = parseInt(req.query.limit);
as you can see above we have next and previous with the details of the next page and limit of each of the page, so let implement that.
The conditional block of code above just checks if there is a next page or a previous page so if no next page the next page won't show the same as the previous page but if the request is all the data the previous and next won't show up as like below.
At this juncture, if everything is working fine you have just concluded the basic pagination. Bravo!
Stage two: let's say we have another endpoint called post and we want to pagination code block in the user endpoint, instead what we want to do is to set up a form of middleware that will accept the user or post array and that will do the job for us. So in order to do that let create a function that will handle it for us.
function paginate(model){
}
Inside of the paginate function all we have to do is to return a function that takes in the request, response and next because a middleware those not take in parameters it just a function that returns request, response, and next in our case we are making sure we return a function that takes request, response and next so to properly works as middleware and the way middleware works is that it actually executes before all the code in your endpoint.
So what we are going to do is to copy all codes in the user endpoint to the paginate function and change where we have users to model.
Now we have the result we want to save this so that we can access it in our app.get so want we can do is to save the result to our response and we can call it whatever we want and call next, next() calls the next event in the chain.
res.paginatedResult = result
next()
so now what we have to do is to delete the codes we copied and replace it with
Stage Three: so what if we want to use data from the database to do that, we are going to set up a basic MongoDB database using mongoose if you have not installed MongoDB in your machine follow this link.
We’d clear our boilerplate the post route, users, and posts array. the first thing you have to do in MongoDB and mongoose is to set up a schema that allows us to access MongoDB and save records in a collection. Create a file called usermodel.js and write this code
Next, we connect to our database, open the server.js file, and write
Now that our database is connected will have to add documents to the database, mongoose made it possible to insert document as soon as the database is connected using “mongoose. connection”
Now if have followed these procedures, you have just created a pagination middleware. Bravo!
stay tuned for more articles.
