When I started making my own MERN e-Commerce App from scratch, I never took the time to think about the implementation of the back-end. For example, for searching products, I thought I could just request all products from the database and apply filters on the frontend with some JS. Well, if I had just a dozen products in my database, this would be an "okay" solution. But I quickly realized how stupid I was.
Imagine if I had hundreds of products in my database. How much time does it take to get all the data with a single request? How much bandwidth would you use? What if the user has a 4G connection? How much memory is the browser going to use to execute the front-end code for filters?
From here, I started to do some research (Googling) on how it is usually done and what the best practices are (I'm using MongoDB with Mongoose), and I found about the skip and limit methods we can combine and use when we request the data using Mongoose.
the limit()
method
This method receives a number as a parameter and lets us set the maximum number of documents we can get on one request.
the skip()
method
This method receives a number as a parameter and allows the user to specify the number of documents to skip. When we make a request, this method ignores the n
documents we specified and returns the rest.
Show me the code
const getProducts= async (req, res, next) => {
try {
// We destructure the req.query object to get the page and limit variables from url
const { page = 1, limit = 10 } = req.query;
const products = await Product.find({ ...req.query })
// We multiply the "limit" variables by one just to make sure we pass a number and not a string
.limit(limit * 1)
// I don't think i need to explain the math here
.skip((page - 1) * limit)
// We sort the data by the date of their creation in descending order (user 1 instead of -1 to get ascending order)
.sort({ createdAt: -1 })
// Getting the numbers of products stored in database
const count = await Product.countDocuments();
return res.status(200).json({
products,
totalPages: Math.ceil(count / limit),
currentPage: page,
});
} catch (err) {
next(err);
}
};
}
Conclusion
Actually, the MERN application I'm developing is the first project I'm building without following any tutorial or course, and I'm trying to use as little libraries and third-party code as possible, so I'm learning along the way, and the least I can say is that I've already encountered a lot of obstacles that made me grow as a developer. I'll be sharing the problems I encounter and the solutions I come up with to solve them on dev.to as much as I can.
I'm still new to blogging and web development, so please, if you have any feedback, I'd love to read it.
Top comments (3)
Thanks, you save my a**
glad my article helped someone.
Thank your for this