I am trying to create a blog website with pagination using MongoDB and express where users will be able to get pages with limit on how many posts on every page sorted by newest to oldest
My implementation of the pagination is as follows...
For example, if a client want to make request to get posts for the third page, with page size of 5 posts per page, he will make the following request to the server
GET// {serverUrl}/posts?pagesize=5&pagenumber=3
this is the code in node/express
app.get('/posts', async function(req, res, next) {
const pagesize = req.query.pagesize || 0; //5
const pagenumber = req.query.pagenumber || 0; //3
const postsToSkip = (pagenumber -1) * pagesize; //10
try {
// skip 10 and limit 5
const posts = await posts.find().sort({date: -1}).skip(postsToSkip).limit(pagesize)
return res.status(200).send(posts.toArray());
} catch(error) {
return res.status(500).send('something went wrong');
}
});
The code works perfectly fine, the problem is as follows
for simplicity peruse lat's say that there are 100 posts in the database, and they all have an ID 1-100, so the oldest post has an ID of 1 and the newest post has an ID of 100
let's say that a user is going to the blog posts website (build by React, for example) the React make a request to the server
GET// {serverUrl}/posts?pagesize=5&pagenumber=1
the server then makes a request to MongoDB to get the newest 5 posts (ID's 96-100)
posts.find().skip(0).limit(5)
and then he sends it back to React, and react render them on to the page, now if for example before the user goes to the next page, 5 new posts are added to the database by a different user (they all get ID's of 101-105), now when the user goes to the next page, React will make a request to the server get the second page
GET// {serverUrl}/posts?pagesize=5&pagenumber=2
the server will now make a request to MongoDB to get page number 2
posts.find().skip(5).limit(5)
but now the second page will be identical to first page, since when the user first went to the website and was on the first page the 5 newest posts were with ID of 96-100, but when he went to the second page after the addition of the 5 posts, the 5 newest posts were ID 101-105 and the second 5 newest posts will be the posts with ID's of 96-100 same as were on the first page when the user first went to the website, thus causing the second page to be identical to the first page
I would like to know if there are any implementation to overcome this weird behavior
This is my first question I am posting to stackoverflow.com, I would like to hear your feedback...
thank you very much ๐๐๐