Pre-rendering Dynamic Routes

[00:00:00]
>> Scott Moss: The next thing we need to do is, like I said, because this is one page for many possible slugs, how do we pre-render them ahead of time? How do we tell next year that there's more than one of these, so it's rendered statically ahead of time? So that's what we need to do, and it's really not that difficult to do it, it's very similar to what you have done in the pages directory.

[00:00:22]
And next to yes, you can export a function here called get, let me see if I can remember. GetStaticParams = (), pretty sure that's it. We'll go verify it. GenerateStaticParams, okay, close, close, generateStaticParams. So all you have to do with this one, it's really simple. It runs on the server, all you have to do is just return an array of objects that have the parameters that this route resolves to.

[00:00:54]
So in this case, I need to return an array of objects to have a slug. That's it, and then it will generate those for me, so, how do I get those? Well, we need a query. We need a query just to get the slugs. So right now, our query, like, gets all this stuff.

[00:01:10]
So I guess I could just call this again and just only get the slugs, or I can make another one. You get the point, I'm just gonna call this one again and we'll just get the slugs and that's it. Well, hold on, this one takes in a slug variable, so this actually only gets one, so no, we do have to make another one.

[00:01:28]
Let's do it. So we'll say, and maybe we can just write this one here, because it's mostly just the same, honestly, just without the where. So we could just say, get
>> Scott Moss: GetSlugsForPosts.
>> Scott Moss: Like that. And we'll say, query
>> Scott Moss: For the most part, it's very similar to this one, so I'm just gonna just copy the query, then take away the things we don't need.

[00:02:10]
>> Scott Moss: So I'll do this, I'll just give it a different operation name. I'll call it SlugsForPost. This doesn't matter in GraphQL, it's not gonna take any arguments, so I'm just gonna curate the arguments. And for the items, I just want the slugs, and that is gonna get rid of everything else.

[00:02:30]
>> Scott Moss: That's it. I don't even need these parentheses. I don't even really need that, I can just do this. And I don't need that, [LAUGH] it's getting rid of everything.
>> Scott Moss: Cool, so that should do that, and then come here and get our data, await.
>> Scott Moss: I don't know why I keep forgetting the name of that function Content, okay.

[00:03:00]
Constant fetcher, we can just make it inline generic right here. We'll do that in a second. Query, if not, data.
>> Scott Moss: And throw error.
>> Scott Moss: And then return the data. And then, as far as for the types, I'll just put them right here because it's such a small one.

[00:03:28]
This will just be this thing, which is an object, which has items, which is an array of objects, and that has a slug. That's a straight. Okay, so now we got that. We can use this inside of our page. And we can just say, data = await, we're gonna call this, await getSlugsForPosts, it doesn't take in any arguments.

[00:04:07]
And we're just gonna return
>> Scott Moss: An array. So data.customerPostCollection.items.map, I don't think we need a map because it's already an array with a slug property on it. So that's all we need. Because we need to return back an array of objects that have a slug property, and that's exactly what these are.

[00:04:37]
They're an array of objects with a slug property. So let's see if this actually works. What we wanna do is a npm run build, and we'll see if this broke or not.
>> Scott Moss: We'll know it worked cuz it'll tell us it generated a route with that name, okay.

[00:04:56]
You got to turn off the title of your bears, I'm not fixing all that type of stuff. [LAUGH] If you go to the next config. [INAUDIBLE].
>> Scott Moss: Yeah, you type in typescripts and you say, Ignore. Just go away. Or, ignore builder errors. True, there you go.
>> Scott Moss: So let's see.

[00:05:29]
>> Scott Moss: All right, so you can see right there, it did indeed build that page out. It got the route for it and it built it out. So if we had more there, you would see that those were built out as well.