1 00:00:02,000 --> 00:00:05,000 So now we learned about getStaticPaths. 2 00:00:05,000 --> 00:00:06,000 At the moment 3 00:00:06,000 --> 00:00:09,000 the way we use it is still a bit unrealistic though 4 00:00:09,000 --> 00:00:13,000 because I have hard coded my PID values here 5 00:00:13,000 --> 00:00:14,000 into this function. 6 00:00:14,000 --> 00:00:16,000 And in reality, we would be fetching 7 00:00:16,000 --> 00:00:17,000 this kind of information 8 00:00:17,000 --> 00:00:20,000 from a database or a file as well. 9 00:00:21,000 --> 00:00:24,000 So therefore in reality, we would basically 10 00:00:24,000 --> 00:00:26,000 just repeat this code here 11 00:00:26,000 --> 00:00:29,000 and would wrap that code 12 00:00:29,000 --> 00:00:32,000 and just outsource it into a separate function. 13 00:00:33,000 --> 00:00:38,000 Async function called get data 14 00:00:39,000 --> 00:00:41,000 where I then returned data. 15 00:00:41,000 --> 00:00:44,000 And since it's async, we can use a weight in there 16 00:00:44,000 --> 00:00:48,000 and then we can just get our data here 17 00:00:48,000 --> 00:00:51,000 by calling get data 18 00:00:51,000 --> 00:00:56,000 and waiting this here in getStatic prompts. 19 00:00:56,000 --> 00:00:58,000 And we can do the same in getStaticPaths. 20 00:01:00,000 --> 00:01:01,000 So a little bit of refactoring 21 00:01:01,000 --> 00:01:04,000 to have no code duplication. 22 00:01:04,000 --> 00:01:05,000 With that we get the data. 23 00:01:05,000 --> 00:01:07,000 And now here in getStaticPaths. 24 00:01:07,000 --> 00:01:10,000 We want to use the data to read all the IDs 25 00:01:10,000 --> 00:01:11,000 we want to support. 26 00:01:13,000 --> 00:01:16,000 So for this, we could get our IDs array here 27 00:01:16,000 --> 00:01:19,000 by going through all the data pieces. 28 00:01:19,000 --> 00:01:21,000 Now the data we get back here 29 00:01:21,000 --> 00:01:24,000 by the way will already be parsed json 30 00:01:24,000 --> 00:01:25,000 since we do that and get data. 31 00:01:25,000 --> 00:01:28,000 So it will be a JavaScript object. 32 00:01:28,000 --> 00:01:30,000 So here IDs then should be an array. 33 00:01:30,000 --> 00:01:33,000 And in dummy backend, we have this products array. 34 00:01:33,000 --> 00:01:34,000 So in the end 35 00:01:34,000 --> 00:01:38,000 what we want to do is you want to access data.products 36 00:01:38,000 --> 00:01:42,000 and then just map this array of complete product objects 37 00:01:42,000 --> 00:01:45,000 into an array of just product IDs. 38 00:01:45,000 --> 00:01:47,000 Just like this, for example. 39 00:01:47,000 --> 00:01:49,000 Just extracting the ID 40 00:01:49,000 --> 00:01:53,000 for every product and then having such an IDs array here. 41 00:01:53,000 --> 00:01:56,000 And then we need to translate this IDs array 42 00:01:56,000 --> 00:02:00,000 into an array of such objects. 43 00:02:00,000 --> 00:02:04,000 So here we could then create another object params 44 00:02:04,000 --> 00:02:05,000 which has a number array. 45 00:02:05,000 --> 00:02:07,000 But we create this array 46 00:02:07,000 --> 00:02:10,000 by going through the ideas and mapping these IDs 47 00:02:10,000 --> 00:02:15,000 such that every ID is mapped into an object. 48 00:02:15,000 --> 00:02:17,000 And we need to wrap this 49 00:02:17,000 --> 00:02:20,000 in extra brackets here, extra parentheses, 50 00:02:20,000 --> 00:02:25,000 so that this is not considered as the function body 51 00:02:25,000 --> 00:02:29,000 but that we instead inline return a new object 52 00:02:29,000 --> 00:02:33,000 for every ID and object with a parent's key 53 00:02:33,000 --> 00:02:37,000 which then holds another object with a PID key 54 00:02:37,000 --> 00:02:41,000 which has this ID as a value. 55 00:02:41,000 --> 00:02:43,000 And that's then repeated for every ID. 56 00:02:43,000 --> 00:02:46,000 So we end up with an array full off such objects 57 00:02:46,000 --> 00:02:49,000 which have exactly that structure we need down there 58 00:02:49,000 --> 00:02:53,000 so that we can set paths equal to params here 59 00:02:54,000 --> 00:02:59,000 where we name this paths with params, 60 00:02:59,000 --> 00:03:00,000 maybe whoops 61 00:03:00,000 --> 00:03:03,000 paths with params just like this. 62 00:03:05,000 --> 00:03:08,000 And of course we could perform these two operations 63 00:03:08,000 --> 00:03:10,000 in one single step as well. 64 00:03:10,000 --> 00:03:13,000 I'm just using two steps here to hopefully 65 00:03:13,000 --> 00:03:16,000 make this a bit easier to understand. 66 00:03:16,000 --> 00:03:18,000 And then with that, if I now saved this 67 00:03:18,000 --> 00:03:20,000 it still works as before. 68 00:03:20,000 --> 00:03:23,000 Everything still works as before 69 00:03:23,000 --> 00:03:27,000 now also all the pages are pre-generated again, by the way 70 00:03:27,000 --> 00:03:30,000 because I am going through all the products here. 71 00:03:30,000 --> 00:03:34,000 So now we can also set fallback to false again 72 00:03:34,000 --> 00:03:38,000 because we are loading all possible IDs anyways 73 00:03:39,000 --> 00:03:42,000 and that's of course, a bit more realistic here 74 00:03:42,000 --> 00:03:46,000 because typically you would not pre hard code 75 00:03:46,000 --> 00:03:49,000 all supported values here. 76 00:03:49,000 --> 00:03:51,000 Typically you don't know all dynamic values 77 00:03:51,000 --> 00:03:53,000 in advance as a developer 78 00:03:53,000 --> 00:03:57,000 but instead you would fetch them from the same data source 79 00:03:57,000 --> 00:04:00,000 as the actual data is then fetched from later.