1
00:00:00,350 --> 00:00:00,710
All right.

2
00:00:00,710 --> 00:00:03,740
So now we want to fetch our products from the database.

3
00:00:03,740 --> 00:00:05,630
So we're going to go into our back end.

4
00:00:05,630 --> 00:00:11,660
And right now, our Server.js is where we have our product routes, which of course we don't want.

5
00:00:11,690 --> 00:00:16,580
If we kept all of our routes in Server.js, it would get very, very long and just very messy.

6
00:00:16,580 --> 00:00:22,250
So Express has a router that we can use so we can put our routes in separate files.

7
00:00:22,250 --> 00:00:26,960
So in the back end, let's create a new folder called Routes.

8
00:00:26,960 --> 00:00:32,000
And in that Routes folder, let's create a file called product.

9
00:00:32,630 --> 00:00:33,500
Roots.

10
00:00:35,910 --> 00:00:40,640
Okay, Now to use the express router, we have to first bring in Express.

11
00:00:40,650 --> 00:00:43,260
Actually, we're using the import syntax.

12
00:00:43,260 --> 00:00:45,270
I'll probably do that a few times.

13
00:00:45,270 --> 00:00:47,640
So we want to import express.

14
00:00:50,140 --> 00:00:51,210
Know why I did that.

15
00:00:51,210 --> 00:00:59,790
I want to import Express from Express and then let's say const and we want the router and we get that

16
00:00:59,790 --> 00:01:04,650
from express dot and then router uppercase R with parentheses.

17
00:01:05,160 --> 00:01:05,570
Okay.

18
00:01:05,580 --> 00:01:08,700
Now before I forget, let's export the router.

19
00:01:08,700 --> 00:01:10,770
That's something I often forget.

20
00:01:10,770 --> 00:01:17,310
So we'll say export default router and then those two routes we have in server, I'm going to copy,

21
00:01:17,310 --> 00:01:19,050
I'm actually going to cut these.

22
00:01:19,050 --> 00:01:23,940
So we're going to cut those and we're going to put those in here in the product routes.

23
00:01:23,940 --> 00:01:27,480
Now, instead of App.get, we're going to be using the router.

24
00:01:27,480 --> 00:01:32,850
So we want to take that and that and change it to router dot get.

25
00:01:33,600 --> 00:01:34,200
Okay.

26
00:01:34,200 --> 00:01:42,420
And then another thing, we're basically going to link slash API slash products to this file.

27
00:01:42,420 --> 00:01:44,880
So we don't want to have this in here.

28
00:01:44,880 --> 00:01:46,830
We just want that to be slash.

29
00:01:46,830 --> 00:01:49,710
We just want that to be slash ID.

30
00:01:50,700 --> 00:01:51,060
All right.

31
00:01:51,090 --> 00:01:56,250
Now, to use this, we're going to go back into Server.js and we want to bring in the routes file.

32
00:01:56,250 --> 00:02:00,570
So let's say import and we want product.

33
00:02:01,490 --> 00:02:02,660
Routes.

34
00:02:02,990 --> 00:02:04,400
Product routes.

35
00:02:05,860 --> 00:02:11,230
From dot slash routes, product routes, and we're going to go.

36
00:02:12,480 --> 00:02:13,590
Uh, let's.

37
00:02:14,250 --> 00:02:22,260
Let's go underneath where we have the API is running and we're going to say app dot use and then pass

38
00:02:22,260 --> 00:02:25,680
in a slash API slash products.

39
00:02:25,680 --> 00:02:34,200
So any time we hit this route, no matter what is after it, it's going to go to this file product routes,

40
00:02:34,200 --> 00:02:35,460
which is what we just created.

41
00:02:35,460 --> 00:02:41,610
That's why we don't have API slash products in here because then it would go to it twice, right?

42
00:02:41,610 --> 00:02:46,410
So it's going to be API slash products, slash whatever you have here.

43
00:02:46,410 --> 00:02:49,860
So in this case, ID, in this case, it's just the route.

44
00:02:50,860 --> 00:02:51,250
All right.

45
00:02:51,280 --> 00:02:56,800
Now, as far as as far as just testing this out.

46
00:02:57,740 --> 00:03:04,430
Let's take the import of the products JS file and cut that and bring it in here.

47
00:03:04,580 --> 00:03:08,980
We're going to get rid of this in a second, but I just want to make sure the route is actually the

48
00:03:09,050 --> 00:03:11,250
file structure and everything is correct.

49
00:03:11,270 --> 00:03:17,570
So since we're now in the routes folder, we're going to do dot, dot slash data slash products.

50
00:03:17,840 --> 00:03:20,390
So let's save that.

51
00:03:20,390 --> 00:03:22,870
Let's make sure we save Server.js.

52
00:03:22,880 --> 00:03:26,900
And then if I reload, we're still fetching the data.

53
00:03:27,560 --> 00:03:28,040
All right.

54
00:03:28,040 --> 00:03:29,690
And if I were to.

55
00:03:31,040 --> 00:03:33,650
Say comment that out, that should break.

56
00:03:33,920 --> 00:03:35,330
And now it's not working.

57
00:03:36,040 --> 00:03:40,830
Now the next step is to actually fetch them from the database.

58
00:03:40,840 --> 00:03:49,990
So what we're going to do here, before I actually before I get the data using the model and so on,

59
00:03:49,990 --> 00:03:56,170
we're going to create an async handler because we're going to be using async await because the mongoose

60
00:03:56,170 --> 00:04:02,680
or the model methods, which are mongoose methods are are asynchronous.

61
00:04:02,680 --> 00:04:04,630
So we need to use a sync.

62
00:04:04,630 --> 00:04:12,850
So for instance, we need to say sync here and then await on the model, the model method, whatever

63
00:04:12,850 --> 00:04:15,640
we're doing, fetching, inserting, etcetera.

64
00:04:15,640 --> 00:04:25,420
So in order to have kind of an elegant error handling solution, we need to wrap it in an async handler

65
00:04:25,420 --> 00:04:28,600
so that we don't have to use all these try catches.

66
00:04:29,080 --> 00:04:34,960
Now you could install one like for instance, there's express.

67
00:04:35,930 --> 00:04:37,310
Async handler.

68
00:04:37,310 --> 00:04:41,930
And I believe in the first version of this course, that's what we did, is we used this.

69
00:04:41,930 --> 00:04:48,800
So basically you install it, you bring it in, and then you just wrap your callback functions for your

70
00:04:48,800 --> 00:04:49,630
routes.

71
00:04:49,640 --> 00:04:55,970
Now, this this is going to be the same thing, except this time we're not going to use a third party

72
00:04:56,720 --> 00:04:57,470
package.

73
00:04:57,470 --> 00:04:59,960
We're going to create our own, which is actually very simple.

74
00:04:59,960 --> 00:05:01,790
It's only like three lines of code.

75
00:05:01,790 --> 00:05:08,390
So what I'm going to do is in the back end, we'll create a new folder and let's call this middleware.

76
00:05:10,330 --> 00:05:10,870
Okay.

77
00:05:10,870 --> 00:05:15,310
And then inside Middleware, we're going to have a new file.

78
00:05:16,180 --> 00:05:22,450
Let's create a new file and we're going to call this async handler Dot JS.

79
00:05:23,910 --> 00:05:24,390
All right.

80
00:05:24,420 --> 00:05:28,470
Now, this async handler is going to be very simple.

81
00:05:28,500 --> 00:05:31,800
All we're going to do is have a function, let's say const.

82
00:05:32,760 --> 00:05:36,000
Async handler and set that.

83
00:05:36,660 --> 00:05:39,000
Yeah, we can use that and we can use that.

84
00:05:39,000 --> 00:05:39,600
So that's it.

85
00:05:39,600 --> 00:05:45,210
Three, three lines, not counting the export because we want to export.

86
00:05:46,400 --> 00:05:48,110
Default async handler.

87
00:05:48,110 --> 00:05:55,130
So basically, we're just we just have a function that takes in request response and next and it's going

88
00:05:55,130 --> 00:05:56,690
to resolve a promise.

89
00:05:56,690 --> 00:06:03,500
And if it resolves, it's going to just it's going to call next, which then calls the next piece of

90
00:06:03,500 --> 00:06:04,460
middleware.

91
00:06:04,640 --> 00:06:10,540
So this way we don't have to have all these try catch blocks.

92
00:06:10,550 --> 00:06:15,680
We can just handle errors through Express, which we're actually going to do in the next video is create

93
00:06:15,680 --> 00:06:17,440
a custom error handler.

94
00:06:17,450 --> 00:06:19,550
So we use it just like this.

95
00:06:19,580 --> 00:06:28,130
We bring it in and then we just wrap it around all of our our callbacks in the routes or control is

96
00:06:28,130 --> 00:06:30,290
ultimately we're going to be using controllers.

97
00:06:30,290 --> 00:06:37,160
But let's save this and then let's go into product routes and we're going to bring that in.

98
00:06:38,020 --> 00:06:44,110
In fact, we can get rid of this because we're not going to be using that file anymore except for seeding

99
00:06:44,110 --> 00:06:44,720
data.

100
00:06:44,740 --> 00:06:46,780
But let's say import

101
00:06:49,030 --> 00:06:50,170
async.

102
00:06:51,200 --> 00:06:54,890
Handler and we're not using the express one.

103
00:06:54,920 --> 00:06:56,120
We have our own.

104
00:06:56,120 --> 00:06:58,850
So we're going to say dot, dot, slash.

105
00:06:59,830 --> 00:07:03,580
Middleware slash async handler.

106
00:07:04,900 --> 00:07:06,130
Async handler.

107
00:07:07,880 --> 00:07:08,870
Async handler.

108
00:07:09,140 --> 00:07:14,370
JS And then like I said, we just need to wrap this, right?

109
00:07:14,390 --> 00:07:22,070
So let's put parentheses here and then another parentheses at the end and then we can just.

110
00:07:22,710 --> 00:07:24,870
Say async handler.

111
00:07:25,230 --> 00:07:26,460
Just like that.

112
00:07:27,470 --> 00:07:32,390
And it's simple because when you create another route, you can just copy this and you already have

113
00:07:32,390 --> 00:07:35,510
this here, but let's add it to this one as well.

114
00:07:35,540 --> 00:07:36,860
Async handler.

115
00:07:38,580 --> 00:07:40,530
And we're going to wrap.

116
00:07:41,950 --> 00:07:43,380
And say async.

117
00:07:43,390 --> 00:07:50,560
Now, you don't need this if you're not doing any async methods or if you're not using async await.

118
00:07:50,740 --> 00:07:57,520
But both of these will because we're using Mongoose, we're using methods from the model.

119
00:07:57,850 --> 00:07:59,860
Now we need our product model.

120
00:07:59,860 --> 00:08:01,180
So let's bring that in.

121
00:08:01,180 --> 00:08:09,820
Let's say import product from models, product model, and then to to get the all of the products from

122
00:08:09,820 --> 00:08:12,040
the database is going to be simple.

123
00:08:12,070 --> 00:08:13,510
We're going to simply.

124
00:08:14,200 --> 00:08:15,870
Say const products.

125
00:08:15,880 --> 00:08:21,010
We're going to await on product dot find, which does just that.

126
00:08:21,040 --> 00:08:25,270
We pass in an empty object because that will get all of them.

127
00:08:25,270 --> 00:08:29,920
If you wanted to limit it to certain products, you could pass in some options here.

128
00:08:29,920 --> 00:08:31,300
But we want all of them.

129
00:08:31,300 --> 00:08:33,760
So we just pass in an empty object.

130
00:08:34,150 --> 00:08:34,539
All right.

131
00:08:34,570 --> 00:08:42,280
Now, to get a single a single product, we no longer need to do this because we're not just dealing

132
00:08:42,280 --> 00:08:43,090
with an array.

133
00:08:43,090 --> 00:08:45,490
We have our product model.

134
00:08:46,090 --> 00:08:47,110
To deal with.

135
00:08:47,140 --> 00:08:53,730
So let's say product equals a weight and then find by ID, which does just that.

136
00:08:53,740 --> 00:08:58,780
We pass in request params id which will get the id from the URL.

137
00:09:00,180 --> 00:09:00,630
All right.

138
00:09:00,630 --> 00:09:02,550
So and then we're just returning that.

139
00:09:02,550 --> 00:09:03,390
Jason.

140
00:09:04,590 --> 00:09:05,520
Now.

141
00:09:06,280 --> 00:09:11,040
If if there's no product, then we probably want to have an error.

142
00:09:11,070 --> 00:09:11,380
Right.

143
00:09:11,380 --> 00:09:21,890
So let's actually say if we'll say if product, then we're going to bring this in here.

144
00:09:21,910 --> 00:09:22,210
Right.

145
00:09:22,210 --> 00:09:24,760
So if there's a product, then respond with it.

146
00:09:25,760 --> 00:09:28,280
Else, then we don't even need to put an else.

147
00:09:28,280 --> 00:09:36,800
We'll just say res dot status and we're going to have a status of 404 because the product is not found.

148
00:09:36,800 --> 00:09:37,490
And then.

149
00:09:37,520 --> 00:09:40,820
Dot Json and then just have a not found message.

150
00:09:41,210 --> 00:09:41,720
Okay.

151
00:09:41,720 --> 00:09:43,670
And let's just return this.

152
00:09:45,900 --> 00:09:46,590
All right, let's see.

153
00:09:46,590 --> 00:09:47,940
Why is this giving me?

154
00:09:49,930 --> 00:09:50,620
There we go.

155
00:09:52,030 --> 00:09:52,360
All right.

156
00:09:52,390 --> 00:09:56,470
Now we should be able to get the products from the database.

157
00:09:56,470 --> 00:10:02,950
In fact, if we go to our front end and we reload, these are now coming from the database because the

158
00:10:02,950 --> 00:10:09,820
back end route never changed in the front end if we look at our home screen.

159
00:10:10,420 --> 00:10:11,830
We were fetching the data.

160
00:10:11,830 --> 00:10:16,630
We're fetching it from API products, which is now working with the database.

161
00:10:17,540 --> 00:10:17,960
Okay.

162
00:10:17,960 --> 00:10:22,520
And if we click on this, since we have the ID now, this should work.

163
00:10:22,520 --> 00:10:26,390
And if you look at the ID, it's a MongoDB object ID.

164
00:10:27,510 --> 00:10:35,550
And if we try to fetch a product that's not there, like let's go to actually, let's open up Postman

165
00:10:35,550 --> 00:10:38,430
and let's create a route to get a single product.

166
00:10:38,430 --> 00:10:44,460
So I'm going to say add request and let's say get single.

167
00:10:46,070 --> 00:10:52,910
Product and we're going to make a request to base URL slash.

168
00:10:53,730 --> 00:11:00,530
Products slash and then colon ID and then whatever ID you want to search for, you can put in here.

169
00:11:00,540 --> 00:11:04,650
Now, if we grab an actual ID, actually let's put one that doesn't work.

170
00:11:04,650 --> 00:11:08,040
So if we put one in here, there's none with the ID of one.

171
00:11:08,830 --> 00:11:11,740
So now we're getting a 500.

172
00:11:12,600 --> 00:11:13,530
Internal.

173
00:11:13,530 --> 00:11:13,860
Let's see.

174
00:11:13,890 --> 00:11:16,040
Cast to object ID failed.

175
00:11:16,050 --> 00:11:23,640
So basically this this is coming from mongoose this this error so in the next.

176
00:11:25,030 --> 00:11:31,570
In the next video, I want to create a more elegant error handler so that it doesn't actually give me

177
00:11:31,570 --> 00:11:33,340
like this HTML page.

178
00:11:33,340 --> 00:11:35,140
So we'll handle that next.

179
00:11:35,140 --> 00:11:41,320
But if we were to do one that actually works, like let's take this ID right here.

180
00:11:42,720 --> 00:11:46,920
And let's pass it in here as the value.

181
00:11:46,920 --> 00:11:51,630
And then if we send that, then we get the correct product.

182
00:11:51,870 --> 00:11:53,640
Okay, so let's save this.

183
00:11:53,640 --> 00:12:01,110
So if we click Save now, when we come back to this tab, get single product, it will fetch that product

184
00:12:01,110 --> 00:12:02,010
with that ID.

185
00:12:03,250 --> 00:12:09,010
So again, if you want to just open up tabs like that willy nilly and just pass in whatever, you can

186
00:12:09,010 --> 00:12:09,340
do that.

187
00:12:09,340 --> 00:12:11,920
But it's nice to have everything organized.

188
00:12:13,080 --> 00:12:13,470
Okay.

189
00:12:13,470 --> 00:12:19,320
Now, in the next video before we jump back into the front end, I do want to just have a better error

190
00:12:19,320 --> 00:12:21,210
handling solution.