All right.
So now we want to fetch our products from the database.
So we're going to go into our back end.
And right now, our Server.js is where we have our product routes, which of course we don't want.
If we kept all of our routes in Server.js, it would get very, very long and just very messy.
So Express has a router that we can use so we can put our routes in separate files.
So in the back end, let's create a new folder called Routes.
And in that Routes folder, let's create a file called product.
Roots.
Okay, Now to use the express router, we have to first bring in Express.
Actually, we're using the import syntax.
I'll probably do that a few times.
So we want to import express.
Know why I did that.
I want to import Express from Express and then let's say const and we want the router and we get that
from express dot and then router uppercase R with parentheses.
Okay.
Now before I forget, let's export the router.
That's something I often forget.
So we'll say export default router and then those two routes we have in server, I'm going to copy,
I'm actually going to cut these.
So we're going to cut those and we're going to put those in here in the product routes.
Now, instead of App.get, we're going to be using the router.
So we want to take that and that and change it to router dot get.
Okay.
And then another thing, we're basically going to link slash API slash products to this file.
So we don't want to have this in here.
We just want that to be slash.
We just want that to be slash ID.
All right.
Now, to use this, we're going to go back into Server.js and we want to bring in the routes file.
So let's say import and we want product.
Routes.
Product routes.
From dot slash routes, product routes, and we're going to go.
Uh, let's.
Let's go underneath where we have the API is running and we're going to say app dot use and then pass
in a slash API slash products.
So any time we hit this route, no matter what is after it, it's going to go to this file product routes,
which is what we just created.
That's why we don't have API slash products in here because then it would go to it twice, right?
So it's going to be API slash products, slash whatever you have here.
So in this case, ID, in this case, it's just the route.
All right.
Now, as far as as far as just testing this out.
Let's take the import of the products JS file and cut that and bring it in here.
We're going to get rid of this in a second, but I just want to make sure the route is actually the
file structure and everything is correct.
So since we're now in the routes folder, we're going to do dot, dot slash data slash products.
So let's save that.
Let's make sure we save Server.js.
And then if I reload, we're still fetching the data.
All right.
And if I were to.
Say comment that out, that should break.
And now it's not working.
Now the next step is to actually fetch them from the database.
So what we're going to do here, before I actually before I get the data using the model and so on,
we're going to create an async handler because we're going to be using async await because the mongoose
or the model methods, which are mongoose methods are are asynchronous.
So we need to use a sync.
So for instance, we need to say sync here and then await on the model, the model method, whatever
we're doing, fetching, inserting, etcetera.
So in order to have kind of an elegant error handling solution, we need to wrap it in an async handler
so that we don't have to use all these try catches.
Now you could install one like for instance, there's express.
Async handler.
And I believe in the first version of this course, that's what we did, is we used this.
So basically you install it, you bring it in, and then you just wrap your callback functions for your
routes.
Now, this this is going to be the same thing, except this time we're not going to use a third party
package.
We're going to create our own, which is actually very simple.
It's only like three lines of code.
So what I'm going to do is in the back end, we'll create a new folder and let's call this middleware.
Okay.
And then inside Middleware, we're going to have a new file.
Let's create a new file and we're going to call this async handler Dot JS.
All right.
Now, this async handler is going to be very simple.
All we're going to do is have a function, let's say const.
Async handler and set that.
Yeah, we can use that and we can use that.
So that's it.
Three, three lines, not counting the export because we want to export.
Default async handler.
So basically, we're just we just have a function that takes in request response and next and it's going
to resolve a promise.
And if it resolves, it's going to just it's going to call next, which then calls the next piece of
middleware.
So this way we don't have to have all these try catch blocks.
We can just handle errors through Express, which we're actually going to do in the next video is create
a custom error handler.
So we use it just like this.
We bring it in and then we just wrap it around all of our our callbacks in the routes or control is
ultimately we're going to be using controllers.
But let's save this and then let's go into product routes and we're going to bring that in.
In fact, we can get rid of this because we're not going to be using that file anymore except for seeding
data.
But let's say import
async.
Handler and we're not using the express one.
We have our own.
So we're going to say dot, dot, slash.
Middleware slash async handler.
Async handler.
JS And then like I said, we just need to wrap this, right?
So let's put parentheses here and then another parentheses at the end and then we can just.
Say async handler.
Just like that.
And it's simple because when you create another route, you can just copy this and you already have
this here, but let's add it to this one as well.
Async handler.
And we're going to wrap.
And say async.
Now, you don't need this if you're not doing any async methods or if you're not using async await.
But both of these will because we're using Mongoose, we're using methods from the model.
Now we need our product model.
So let's bring that in.
Let's say import product from models, product model, and then to to get the all of the products from
the database is going to be simple.
We're going to simply.
Say const products.
We're going to await on product dot find, which does just that.
We pass in an empty object because that will get all of them.
If you wanted to limit it to certain products, you could pass in some options here.
But we want all of them.
So we just pass in an empty object.
All right.
Now, to get a single a single product, we no longer need to do this because we're not just dealing
with an array.
We have our product model.
To deal with.
So let's say product equals a weight and then find by ID, which does just that.
We pass in request params id which will get the id from the URL.
All right.
So and then we're just returning that.
Jason.
Now.
If if there's no product, then we probably want to have an error.
Right.
So let's actually say if we'll say if product, then we're going to bring this in here.
Right.
So if there's a product, then respond with it.
Else, then we don't even need to put an else.
We'll just say res dot status and we're going to have a status of 404 because the product is not found.
And then.
Dot Json and then just have a not found message.
Okay.
And let's just return this.
All right, let's see.
Why is this giving me?
There we go.
All right.
Now we should be able to get the products from the database.
In fact, if we go to our front end and we reload, these are now coming from the database because the
back end route never changed in the front end if we look at our home screen.
We were fetching the data.
We're fetching it from API products, which is now working with the database.
Okay.
And if we click on this, since we have the ID now, this should work.
And if you look at the ID, it's a MongoDB object ID.
And if we try to fetch a product that's not there, like let's go to actually, let's open up Postman
and let's create a route to get a single product.
So I'm going to say add request and let's say get single.
Product and we're going to make a request to base URL slash.
Products slash and then colon ID and then whatever ID you want to search for, you can put in here.
Now, if we grab an actual ID, actually let's put one that doesn't work.
So if we put one in here, there's none with the ID of one.
So now we're getting a 500.
Internal.
Let's see.
Cast to object ID failed.
So basically this this is coming from mongoose this this error so in the next.
In the next video, I want to create a more elegant error handler so that it doesn't actually give me
like this HTML page.
So we'll handle that next.
But if we were to do one that actually works, like let's take this ID right here.
And let's pass it in here as the value.
And then if we send that, then we get the correct product.
Okay, so let's save this.
So if we click Save now, when we come back to this tab, get single product, it will fetch that product
with that ID.
So again, if you want to just open up tabs like that willy nilly and just pass in whatever, you can
do that.
But it's nice to have everything organized.
Okay.
Now, in the next video before we jump back into the front end, I do want to just have a better error
handling solution.