Working on the Pagination Backend in MEAN Stack
In our previous section, we successfully added the paginator to our frontend. We successfully added a couple of properties to the paginator and added the page event. Now, we have to do work on the backend so that we can use the page data to narrow down the number of items we retrieve from the backend. We will use the following steps to write the backend code for our paginator:
We implement the pagination in the posts.js file, where we created a route for fetching posts. We will do this with the help of so-called query parameters. These are optional parameters or piece of information we can add to our URL. We can add them at the end of the URL, separated from our domain and path by a question mark.
1) We can easily retrieve the piece of information on the backend in our express app by accessing request. We use “request.query”, and this will hold the parsed query parameter information. We will show you how this works. We simple console log the “request.query” object to see what is inside there.
We will save the file, and our backend will restart. We open a new tab on the browser and enter http://localhost:3000/api/posts, which is our post route and then question mark. After that, we add pageSize equals two and page=1 or add another parameter as something equals to good. The query parameter is separated by “&”, so we will separate the pageSize, page, and something by the “&” symbol like this:
http://localhost:3000/api/posts?pagesize=2&page=1&something=good
If we enter, we retrieve all the posts, and it means we still reach that route, and it works as before.
In the log of our server, we see the query object there.
2) So, this is the data we retrieved because we send a request with these query parameters added to the URL. So they are conveniently parsed for us and allow us to use them to change our mongoose query to narrow down which amount of posts we fetch, which can be done very easily. So, we will retrieve that data from the query object in the following way:
3) Now, we want to adjust our mongoose query, and the cool thing is that if we don’t pass the pagesize and currentpage, then pageSize and CurrentPage will be undefined. So, we will check whether PageSize and CurrentPage are not undefined. If they both contain valid values, the “if block” will be executed.
4) Now, we can construct two different queries. The Post.find is the one to fetch all the posts and then an adjusted one to fetch a selected slice of posts for a given page. For this, we will create a new constant, and we will name it postquery because the cool thing about Mongoose is we can structure queries by chaining multiple query methods, which will narrow down our query and by default, our postquery is Post.find(). After creating constant with default postquery, we will replace the postmodel.find with the postquery like this:
5) Now, if we have the valid PageSize and CurrentPage values, we need to manipulate the query, and we will do this in the “if block”. In the “if block”, we will use two useful methods provided by Mongoose. The first one is the skip() method, which means we will not retrieve all posts but will skip the first n posts. So, we will add the “PageSize * [CurrentPage-1]” as an argument.
If we are on page 2 and the page size is ten, it will skip 10(10*2-1=10) posts. In the same way, if we are on page 3 and the page size is ten, then it will skip 20(10*3-1 = 10*2 = 20) posts.
That will skip the previous pages.
6) We also want to narrow down the number of documents we retrieve for the current page. We will do that by chaining another method, i.e., limit() method. This method limits the number of documents we return. In this method, we simply pass the PageSize because if we got ten items per page, then we need to limit the query to only return ten items.
Now, we get the adjusted postquery and try to execute it. We will set the pagesize to 2 and the currentpage to 1. When we press enter, we will get the following error:
7) The reason for getting this error is that we are using an invalid type. The limit field should be numeric. By default, if we are extracting something from these query parameters, it will always be a string because it is coming from the URL. We need to work with numbers here. To convert these to numbers, we simply add a plus sign in front of both the pagesize and currentpage like as:
Now, we save it and try one more time.
Now, our backend code is working well, and in the next section, we will angular to that.