WEBVTT 00:00.700 --> 00:07.900 So now we are going to be using the request object we have up in the function here. 00:07.900 --> 00:17.140 So that's what you can use to pass in query parameters inside the original API request we have here, 00:17.140 --> 00:24.790 we have this params tab and it has the top include facets and keyword parameters, query parameters 00:24.790 --> 00:25.630 you call them. 00:26.200 --> 00:32.020 So if I they're actually included in the URL up here, there's a question mark. 00:32.200 --> 00:34.990 Then there's one query parameter here. 00:35.200 --> 00:38.560 If I take it off, it disappears from the URL up here. 00:40.720 --> 00:47.590 And so basically we are going to try and read those from the request we send to our own API and pass 00:47.590 --> 00:50.440 it into the next Nordstrom API. 00:50.950 --> 00:55.990 So the way to get these query parameters is to write like this. 00:55.990 --> 01:01.000 So we say the top variable here, we call it number of. 01:01.950 --> 01:06.510 Top and we'll say Rick request. 01:07.590 --> 01:10.140 Dot query dot top. 01:10.740 --> 01:16.980 So that's going to look in the query object inside of request and get the top parameter. 01:17.640 --> 01:19.770 And then we have keyword. 01:20.800 --> 01:25.720 And for the keyword we need to encode Uri encoded. 01:26.910 --> 01:29.430 Which is what we can see it's going on here. 01:29.430 --> 01:33.990 The space is being encoded as a percent 20. 01:34.350 --> 01:42.720 So this is something you can call inside of JavaScript like encode component, and then we pass in the 01:43.020 --> 01:45.720 query keyword parameter. 01:46.920 --> 01:49.770 Now we can use these inside of a URL here. 01:49.770 --> 01:57.750 So we do I will do make these into backticks instead so we can put in variables. 01:58.860 --> 02:02.900 So I will take this instead of making it in hardcoded ten. 02:02.910 --> 02:03.570 I will. 02:04.690 --> 02:10.000 Put in a dollar sign and curly braces and write in number of top. 02:11.120 --> 02:13.820 And for the keyword the same thing. 02:14.540 --> 02:18.170 Dollar sign curly braces and write in key. 02:19.120 --> 02:24.280 And I'm just going to rename this into keyword using F2. 02:25.380 --> 02:27.270 So keyword instead. 02:28.870 --> 02:30.310 And that's basically it. 02:30.310 --> 02:35.680 So of course, you need to make sure that when you make a request, you set these parameters because 02:35.680 --> 02:38.890 if you don't, it's not going to pass anything in here. 02:39.100 --> 02:44.860 Maybe you could make something clever where you have defaults, but this is just a really simple example. 02:45.400 --> 02:47.050 Let's try and see if it works. 02:47.620 --> 02:52.470 So now in our local API, we need to pass in this query parameters. 02:52.480 --> 02:56.680 Remember what we call them, we call it top and keyword. 02:56.860 --> 03:00.370 It's basically the same as we did in the original API. 03:00.400 --> 03:05.830 So let's call it top to get the free free results here. 03:05.890 --> 03:07.780 Then we have keyword. 03:09.030 --> 03:10.860 Let's call it red. 03:12.100 --> 03:13.360 Red dresses. 03:16.730 --> 03:17.810 And there we go. 03:17.810 --> 03:23.180 So now we get the results for red dresses, the top three ones. 03:24.850 --> 03:30.490 And let's see how the URL looks like just to make sure it is properly formatted. 03:30.760 --> 03:32.500 I will do a console log URL. 03:33.100 --> 03:34.990 I will make a request again. 03:35.780 --> 03:37.880 And check out your looks. 03:38.020 --> 03:38.960 Looks good. 03:38.960 --> 03:43.820 We get the percent 20 just like you have in the original call. 03:45.420 --> 03:47.130 So all is good now. 03:47.130 --> 03:53.490 Now it's actually time for us to build the React app and start using this API we built inside of the 03:53.490 --> 03:54.180 React app.