1
00:00:00,300 --> 00:00:06,960
All right, and once are familiar with Rod Palmer's, let's talk about the query string primers more,

2
00:00:06,960 --> 00:00:14,850
they're also called you are URL parameters and essentially that is a way for us to send small amounts

3
00:00:14,850 --> 00:00:18,300
of information to the server using the URL.

4
00:00:19,050 --> 00:00:26,600
Now, this information is usually used as parameters to, for example, query a database or filter results.

5
00:00:26,610 --> 00:00:29,600
And that's really up to the people who are setting up the server.

6
00:00:29,880 --> 00:00:38,280
They decide what parameters are going to be accepted and what functionality will depend on those values.

7
00:00:38,490 --> 00:00:41,070
And give you a real world example.

8
00:00:41,880 --> 00:00:48,050
Let me go to my search engine and I'm just looking for Hacker News or Google API.

9
00:00:48,510 --> 00:00:53,520
So when you're working on the front end apps, I'm not sure whether you work with this API, but that

10
00:00:53,520 --> 00:00:55,830
is a very cool API.

11
00:00:55,830 --> 00:01:01,700
And essentially it's going to work as a good example of how we should be setting up the server.

12
00:01:02,130 --> 00:01:06,240
And this is as a side note, but notice the URL here.

13
00:01:07,080 --> 00:01:12,660
So they go with a domain, which in our case is of course localhost five thousand.

14
00:01:12,960 --> 00:01:15,740
But here it is actually a URL Golia domain.

15
00:01:16,050 --> 00:01:19,740
So I'll go come forward, slash API.

16
00:01:20,270 --> 00:01:27,560
I said that is a pretty common practice, then a version number and then whatever list you're getting.

17
00:01:27,900 --> 00:01:29,750
So in here it is items.

18
00:01:30,060 --> 00:01:31,230
Now check out this one.

19
00:01:32,150 --> 00:01:39,140
Doesn't that ring a bell, because that is our about primer, what I say, yeah, here's the list of

20
00:01:39,140 --> 00:01:39,650
items.

21
00:01:40,510 --> 00:01:47,350
But if you want to be more specific, please provide the idea and that if you keep on scrolling, you'll

22
00:01:47,350 --> 00:01:48,950
notice the same thing with the users.

23
00:01:49,240 --> 00:01:54,820
Again, we have the domain domain API or Anwan users.

24
00:01:54,850 --> 00:01:55,890
That's the list.

25
00:01:56,290 --> 00:02:01,510
And then if you want to get a specific one, then of course, again, there is a root primer.

26
00:02:01,750 --> 00:02:06,040
Now, this is just the showcase that I'm not randomly coming up with those things.

27
00:02:06,100 --> 00:02:10,889
No, that's how actually the servers work in real world.

28
00:02:11,260 --> 00:02:13,060
And let's keep on scrolling.

29
00:02:13,060 --> 00:02:17,040
And now we come to this interesting part where we can sort.

30
00:02:17,740 --> 00:02:21,730
So we're getting the data from the ALGOL API.

31
00:02:22,540 --> 00:02:29,800
But then in my app, I can sort I can say, hey, you know what, get me specific hacker news story

32
00:02:30,160 --> 00:02:34,690
or get me stories based on some kind of search term.

33
00:02:34,870 --> 00:02:40,330
And hopefully you get the gist where instead of just grabbing the whole thing, I can say, you know

34
00:02:40,330 --> 00:02:40,500
what?

35
00:02:40,990 --> 00:02:43,960
Get me all the stories that match.

36
00:02:44,650 --> 00:02:48,910
So again, we go with the URL and this is really up to you, how you set this up.

37
00:02:48,910 --> 00:02:50,980
In their case, they use search.

38
00:02:51,340 --> 00:02:54,250
And then here we have this question mark.

39
00:02:54,670 --> 00:03:02,710
And whatever is after this question mark is not technically part of this URL, meaning it's just a way

40
00:03:02,710 --> 00:03:07,040
for us to send out data to the server and then server decides what to do with this data.

41
00:03:07,900 --> 00:03:12,160
So the URL is still this one, the one that ends with search.

42
00:03:12,370 --> 00:03:13,720
And then we have a question mark.

43
00:03:13,900 --> 00:03:20,680
And basically this is just a specific info about the data that I'm requesting.

44
00:03:20,710 --> 00:03:29,910
So here the user adds a query parameter and then the value is for online, also has the tags off story.

45
00:03:30,130 --> 00:03:33,990
And that means that we're going to get all the stories matching for now.

46
00:03:34,000 --> 00:03:36,670
What else you could set up here in a query string?

47
00:03:36,820 --> 00:03:37,750
Pretty much anything.

48
00:03:38,050 --> 00:03:44,200
A pretty typical is going to be page, for example, if you have a list of things and I don't want to

49
00:03:44,200 --> 00:03:49,810
get 100 hundred items at the time, I can say, you know what, split it up in pages and get me initially

50
00:03:49,810 --> 00:03:50,860
page number one.

51
00:03:50,860 --> 00:03:57,460
And then only if the user clicks on a button that fetches the page number two, then I get the second

52
00:03:57,460 --> 00:03:57,760
page.

53
00:03:57,970 --> 00:04:00,130
Then for example, in here they have hits per page.

54
00:04:00,370 --> 00:04:02,470
So that is going to be how many items per page.

55
00:04:02,770 --> 00:04:10,660
So again, after that question mark, if the setup is supported by the server, then of course, you

56
00:04:10,660 --> 00:04:12,400
can add those key value pairs.

57
00:04:12,670 --> 00:04:16,380
And the way we add them, as you can see, is by using key value pairs.

58
00:04:16,600 --> 00:04:22,820
So we have questionmark and then we have a key, which in this case is query and then the value.

59
00:04:23,110 --> 00:04:27,310
Now, before we continue, let me make something very, very clear.

60
00:04:27,760 --> 00:04:33,790
It's not like you're going to randomly search the web and just start adding these query string parameters

61
00:04:33,790 --> 00:04:36,670
and then expect that as a miracle.

62
00:04:36,670 --> 00:04:38,920
You'll just get the data that you're looking for.

63
00:04:39,340 --> 00:04:43,220
A as far as the keys, they're designed on a server.

64
00:04:43,510 --> 00:04:49,300
So if I set up a piece of chocolate milkshake, Golia API is going to be like, I don't know what you're

65
00:04:49,300 --> 00:04:49,890
talking about.

66
00:04:50,110 --> 00:04:51,580
And the same goes for the value.

67
00:04:51,700 --> 00:04:55,750
So where I'm going with this now, we are in charge of that server.

68
00:04:56,170 --> 00:05:00,790
So it's up to us to handle those query string parameters.

69
00:05:01,360 --> 00:05:05,610
And I'm going to go back to our project and I'll purposely set up a new route.

70
00:05:06,100 --> 00:05:12,480
Please keep in mind one thing we're a pretty typical setup is adding this to the list.

71
00:05:13,000 --> 00:05:17,950
So, again, we'll look for specific property on our request object.

72
00:05:18,160 --> 00:05:26,140
And then if that property is provided, then, of course, we return a more detailed response, meaning

73
00:05:26,140 --> 00:05:28,030
there's maybe some filtering or something like that.

74
00:05:28,420 --> 00:05:30,470
But if not, then we'll send back all the product.

75
00:05:30,490 --> 00:05:38,170
Now, I'll purposely set up a new route just so we don't jam all our code in this one route.

76
00:05:38,460 --> 00:05:43,630
But then in the next video, probably, I'll show you how we can combine both.

77
00:05:44,320 --> 00:05:45,770
So let's keep on scrolling.

78
00:05:45,790 --> 00:05:50,370
So this is going to be our more complex programs example.

79
00:05:50,620 --> 00:05:52,930
And let's go with App doGet.

80
00:05:52,930 --> 00:05:55,560
And again, the route is really up to you.

81
00:05:55,570 --> 00:05:58,630
I'm going to go with API now in order to make it interesting.

82
00:05:58,630 --> 00:06:05,310
I'm going to add that version one, just like the API of all Ghalia has it and then I'll say query.

83
00:06:05,680 --> 00:06:07,540
Now, I don't need to add question marks.

84
00:06:07,540 --> 00:06:08,380
Nothing like that.

85
00:06:08,380 --> 00:06:09,340
I just set up query.

86
00:06:09,580 --> 00:06:13,550
That is my route and then I have my callback function rack.

87
00:06:13,840 --> 00:06:20,500
And right now in this callback function, in order to access those query string parameters, I need

88
00:06:20,500 --> 00:06:22,740
to go with Barack and query.

89
00:06:22,750 --> 00:06:28,600
So let's go with console log and we're going to look for request and not BRAMS.

90
00:06:28,600 --> 00:06:31,750
Sorry, we're going to go with query or here.

91
00:06:31,960 --> 00:06:39,820
And again, let's go with simple hello world just so we can speed this up and then if I go to the local.

92
00:06:40,540 --> 00:06:49,720
And more specifically, I'm going to look for a localhost that 5000, then API, then version number

93
00:06:49,720 --> 00:06:57,700
one and then query, and then if I add this question mark, I can add as many query string parameters

94
00:06:57,700 --> 00:06:58,750
as I would like.

95
00:06:58,990 --> 00:07:06,070
So here I'm going to go with a name that will be equal to John then in order to combine them with just

96
00:07:06,470 --> 00:07:07,320
this ampersand.

97
00:07:07,600 --> 00:07:10,890
So we're going to go with name John and then ID four.

98
00:07:11,230 --> 00:07:15,460
Keep in mind that you can add as many query string parameters as you would want.

99
00:07:15,670 --> 00:07:19,780
And then once a navigator, the moment I'm just going to get the hello world.

100
00:07:20,260 --> 00:07:23,470
So that's my default response from this URL.

101
00:07:23,860 --> 00:07:28,420
But in a terminal notice, I have named John and ID number four.

102
00:07:28,480 --> 00:07:32,920
Again, this is a string and this is going to be important in a second.

103
00:07:33,220 --> 00:07:40,400
But what this allows us to do is access those parameters and then based on them, do some kind of functionality.

104
00:07:40,660 --> 00:07:43,960
Now, first of all, I would want to change this around a little bit where I'm not going to be looking

105
00:07:43,960 --> 00:07:45,630
for a name or ID.

106
00:07:46,090 --> 00:07:50,500
I'm going to be looking for search query primeur as well as Deliman.

107
00:07:50,830 --> 00:07:57,670
So if the user wants to search for specific product, he or she needs to provide that search query parameter,

108
00:07:57,970 --> 00:08:03,760
as well as limiting where the user can limit of how many products they are getting back.

109
00:08:04,060 --> 00:08:11,620
So let me navigate back and just to showcase that, so again, instead of name, I will zoom in, will

110
00:08:11,620 --> 00:08:17,470
say search is equal, and then whatever I would want on this case, I'm just going to go with her.

111
00:08:17,840 --> 00:08:20,950
So effectively, this will return all the products.

112
00:08:20,950 --> 00:08:21,930
That's today.

113
00:08:22,120 --> 00:08:25,270
And then the second one is the what?

114
00:08:25,640 --> 00:08:27,150
That was the limit.

115
00:08:27,160 --> 00:08:27,400
Right.

116
00:08:27,640 --> 00:08:31,980
So I'm going to say limit and phrenologists go with two of them.

117
00:08:31,990 --> 00:08:34,539
So this will return to product.

118
00:08:35,400 --> 00:08:41,909
I'll zoom out and again, I have search and I have limit after you show and of course, let's set up

119
00:08:42,000 --> 00:08:47,290
that functionality and I'll simply start by creating new instance of those products.

120
00:08:47,580 --> 00:08:49,910
I'm going to go with left and you'll see in a second one.

121
00:08:49,920 --> 00:08:52,500
So say selected products.

122
00:08:52,900 --> 00:08:55,500
And in here we'll use this product area.

123
00:08:55,800 --> 00:09:00,290
So we imported the product and now I'm just going to copy the values.

124
00:09:00,320 --> 00:09:07,770
So this is going to be my new and the reason why I'm using that, because we will modify this value

125
00:09:07,770 --> 00:09:14,820
a bit now instead of just consolidating the query, I'll comment this out and I'll set it up as CONSED.

126
00:09:15,060 --> 00:09:18,900
And then again, I'm looking for two specific keys.

127
00:09:19,110 --> 00:09:21,580
I'm looking for the search and I'm looking for to limit.

128
00:09:21,810 --> 00:09:26,750
So if the user doesn't provide them, well, then we'll send back all the product.

129
00:09:27,300 --> 00:09:33,130
So we're going to go with Query Luxo so I can see the search and limit.

130
00:09:33,180 --> 00:09:33,680
Beautiful.

131
00:09:33,960 --> 00:09:43,350
And now instead of just sending back Hello World, I'm going to check if the search is in my query parameters,

132
00:09:43,620 --> 00:09:46,140
then I would want to filter my product.

133
00:09:46,140 --> 00:09:52,020
So I'm going to say if I'm search Weichsel and we're going to go, what sort of product?

134
00:09:52,020 --> 00:09:53,760
Since I'm using that I can do that.

135
00:09:53,970 --> 00:09:55,620
I'm going to go what sort of product?

136
00:09:55,620 --> 00:09:57,750
And then filter method again.

137
00:09:58,380 --> 00:10:00,450
Straight up JavaScript again.

138
00:10:00,450 --> 00:10:03,640
I'll call this a product like so.

139
00:10:03,840 --> 00:10:11,590
And what I would want to return are the products that start with the value of my search term.

140
00:10:11,940 --> 00:10:16,280
So here I can say return product and name.

141
00:10:16,290 --> 00:10:22,710
So if the product name starts with now again, this is straight up JavaScript and I'll pass in the search.

142
00:10:22,710 --> 00:10:26,580
If that is the case, that is going to be my value in store product.

143
00:10:26,820 --> 00:10:35,220
And I can write a check for the limit as well where I'm going to say if I'm then only met and if it

144
00:10:35,220 --> 00:10:35,810
exists.

145
00:10:36,210 --> 00:10:41,660
So if the user has provided it again, let's go with sort of products and filter more.

146
00:10:41,940 --> 00:10:47,460
And in this case, I'm going to use this method where I'm just going to get specific items from the

147
00:10:47,460 --> 00:10:47,850
array.

148
00:10:48,090 --> 00:10:49,620
So I'm going to start with zero.

149
00:10:49,830 --> 00:10:53,790
And then remember, we're getting a string, so we need to go with number.

150
00:10:54,000 --> 00:10:56,260
And then again, we'll pass in the limit.

151
00:10:56,520 --> 00:10:58,980
Let's go here below both of them.

152
00:10:59,220 --> 00:11:02,610
And let's just say, is that unknown status?

153
00:11:02,610 --> 00:11:05,060
And we're going to go with two hundred.

154
00:11:05,200 --> 00:11:10,950
OK, so I'm just in response now when it comes to Jason responds.

155
00:11:11,900 --> 00:11:17,450
We're just going to go with our source products, right, so we go back and let me just showcase something

156
00:11:17,450 --> 00:11:24,210
where if none of the query string parameters are provided, I'm going to send back my whole data.

157
00:11:24,620 --> 00:11:25,070
Why?

158
00:11:25,580 --> 00:11:27,890
Well, because I copied my product.

159
00:11:28,040 --> 00:11:28,480
Right.

160
00:11:28,880 --> 00:11:30,020
Both of them are false.

161
00:11:30,470 --> 00:11:31,880
Both of them were undefined.

162
00:11:32,210 --> 00:11:36,710
And as I say, not there is error here kind of senators.

163
00:11:36,950 --> 00:11:39,290
And I'll talk about it actually in a second.

164
00:11:39,320 --> 00:11:42,080
That is one of my next topics.

165
00:11:42,320 --> 00:11:48,290
So let me just deal with this whole world by deleting it and we're going to be in good shape.

166
00:11:48,290 --> 00:11:53,420
But I'll cover why we got this error and what gotchas you should be aware of.

167
00:11:53,450 --> 00:11:54,520
So let me go back again.

168
00:11:54,950 --> 00:12:02,450
Let's say again, we're getting all the product because the user did not provide that specific query

169
00:12:02,450 --> 00:12:03,160
string primer.

170
00:12:03,380 --> 00:12:10,280
So if we right now navigate the URL and I'm going to start with a limit and if in the limit I'm going

171
00:12:10,280 --> 00:12:12,150
to say that I'm only interested in two products.

172
00:12:12,560 --> 00:12:13,940
Check it out now.

173
00:12:13,940 --> 00:12:14,280
Of course.

174
00:12:14,300 --> 00:12:15,680
My limit is two.

175
00:12:15,920 --> 00:12:17,390
So I only have two products.

176
00:12:17,600 --> 00:12:20,780
And if it's three, then it's going to be three and then four.

177
00:12:20,960 --> 00:12:28,310
And hopefully you get the gist where whatever value I provide here in the limit, well, I have the

178
00:12:28,310 --> 00:12:29,270
functionality for it.

179
00:12:29,510 --> 00:12:35,120
Now, keep in mind again, name needs to match if this is going to be Limmy instead of limit.

180
00:12:35,500 --> 00:12:39,860
Again, I'm just going to get back all the products regardless of what is my value.

181
00:12:40,130 --> 00:12:45,860
And the same goes for the value of the query string Paramor if this is limited.

182
00:12:45,860 --> 00:12:50,600
But for example, I decide to pass in A, B, C nothing.

183
00:12:50,600 --> 00:12:56,750
I get empty or Y because my value wasn't what my functionality was looking for.

184
00:12:57,050 --> 00:13:00,740
And similarly, of course, we can add the search option as well.

185
00:13:00,980 --> 00:13:04,690
And I'm purposely showing them one by one so you don't get confused.

186
00:13:05,000 --> 00:13:12,410
So let's say search and again, the functionality set up where you need to provide a starting character.

187
00:13:12,530 --> 00:13:18,820
And my guess I'm looking only for the product, but start with a and there is I have two of them.

188
00:13:18,830 --> 00:13:25,670
Now, if I want to limit, I can just add and here and I'll just type limit and I'm only going to be

189
00:13:25,670 --> 00:13:32,430
looking for one product if I add this limit one there is now I only get one product.

190
00:13:32,660 --> 00:13:36,650
Now there's also obviously going to be the case where we return empty.

191
00:13:36,770 --> 00:13:37,070
Right.

192
00:13:37,760 --> 00:13:38,150
Why?

193
00:13:38,240 --> 00:13:46,490
Well, because I could go with search and look for the product of B, and unfortunately, when it comes

194
00:13:46,490 --> 00:13:52,520
to my product there, I don't have products that start with B, so we can handle that.

195
00:13:52,970 --> 00:14:00,140
Instead of sending back empty array, I could check what is the length of Meyera and if, for example,

196
00:14:00,140 --> 00:14:08,180
it is less than one, then I explicitly send back the response where I say yes, the request was successful,

197
00:14:08,600 --> 00:14:17,120
but I couldn't return any product so we can go with F and then sorta product if the length of of this

198
00:14:17,120 --> 00:14:19,280
array is less than one.

199
00:14:20,420 --> 00:14:25,540
If it is less than one, then of course, I can just go with red dot status.

200
00:14:25,940 --> 00:14:30,200
Now, this is one where you're not sending back the fog of war.

201
00:14:30,590 --> 00:14:34,520
You're not saying the you are all doesn't exist or the resource doesn't exist.

202
00:14:35,000 --> 00:14:41,470
In this case, you are trying to filter the product, but nothing came back.

203
00:14:41,630 --> 00:14:49,430
So whatever query string parameters were provided, they didn't yield any results or simply saying status.

204
00:14:49,700 --> 00:14:54,260
And then you can go with sand and we can go with no products.

205
00:14:54,800 --> 00:15:01,630
Products matched your search like so so we can go here and money.

206
00:15:01,650 --> 00:15:05,800
If you refresh again with the same ones, we have no product match your search.

207
00:15:06,110 --> 00:15:07,160
So that is one option.

208
00:15:07,160 --> 00:15:14,300
You can send back the string, but a more common one is this one where I'm going to commonness out for

209
00:15:14,300 --> 00:15:17,270
your reference again and instead you go with the return.

210
00:15:18,290 --> 00:15:27,200
And you're going to go with that status and again, we have this error in the server and again, I'll

211
00:15:27,210 --> 00:15:29,960
talk about it in the next video, why we have that one.

212
00:15:30,230 --> 00:15:36,430
So we're going to go with a resident status and we're passing the two hundred and instead we stand back

213
00:15:36,440 --> 00:15:38,320
the Jason one in that.

214
00:15:38,360 --> 00:15:45,080
Jason, again, you can pass the screen if you want, but a more common approach is setting up the object

215
00:15:45,260 --> 00:15:51,190
where you explicitly say that the request was successful or a failure.

216
00:15:51,200 --> 00:15:54,470
So you go with success and that is equal to zero.

217
00:15:54,680 --> 00:15:58,010
And then again, you come up with whatever name you would want.

218
00:15:58,190 --> 00:16:03,080
A generic one is there and then you send back the array again.

219
00:16:03,080 --> 00:16:04,550
You are in charge here.

220
00:16:04,730 --> 00:16:06,550
You can really do whatever you want.

221
00:16:06,560 --> 00:16:11,650
I'm just showing you a pretty common approaches to this situation.

222
00:16:11,660 --> 00:16:16,540
So, again, I'm looking for some kind of product using my query string parameter.

223
00:16:16,820 --> 00:16:23,150
Now, unfortunately, server kind of return any data meaning and product.

224
00:16:23,390 --> 00:16:28,220
And then of course, I just get this success true because the request was successful.

225
00:16:28,460 --> 00:16:30,950
There was nothing wrong with my URL, however.

226
00:16:32,020 --> 00:16:39,490
I'm just yielding a empty chair, so that said, I can just delete it and if I don't provide anything,

227
00:16:39,730 --> 00:16:41,700
then I'm going to get all the products.

228
00:16:42,040 --> 00:16:48,110
Hopefully you are clear the query string primers work and now we can cover a few gotchas.