Jamstack Explorers

Building with SvelteKit and GraphCMS with Scott Spence

SvelteKit routing

Okey dokey, in this mission, we are taking a look at routing in SvelteKit. So if we take a look at one of our links here, and I click on this, we get a 404. And I've just noticed that I haven't actually put in the correct path for the link here. Just let me quickly correct that. This should be in some backticks here, and it should be mission. Then the slug, it should be wrapped in curly braces and have the dollar sign there to accept the variable into the template literal here so we hit save. And we go back to our missions list. And we click on a link here, we have the mission route. And then the mission name is the slug. But we get a 404. So it's gonna take this opportunity to quickly go through making a custom 404 page in SvelteKit. So we go back over to VS code here, and open up the Explorer, the file notation for the error file is much shorter layout for here. So it's a new file, double underscore, error dot Svelte. And I'm just going to paste some markup in here and then talk through the code. So here, again, we are using the script context module. This will run before the page loads, then in the load function, we are destructuring out the error and the status here. And we are just returning those as props, or the page to use and we're export let to take in the props. Then we have the error and status. We're using the status in this Svelte head API here to add that in the tab. There, we just got a friendly message to say that the page doesn't exist. And then some more information with the status and error message. If I go back to the page now, and hit refresh on this, we get a bit of a nicer error message to show to the user of the project. Okay, onto routing. If you're familiar with next j s, then this will be familiar in the routes folder here I need to create a new file or the mission. And then it uses square bracket notation for the slug. And this is a Svelte file. And I'm going to take the script context from the error page here, we're going to use that for our slug page. In the load function, I'm just going to use context for now. You might say they shortened to ctx, but I like context. And just for now, just going to return empty props object. And we're going to use a code snippet. To log out what we have in context. If I hop on over to the browser now, and pop open the dev tools, for the console. And you can see that this has printed out the context for us here. What we are really interested in is the page params here to get the slug. So if I go back on over to my text editor, and destructure out the page. And then the params is a further destructuring. Now I can log out the params.slug and go back on over to the browser. Let me hit refresh here. Now we get the slug we want, which we can use in our GraphCMS GraphQL query. So if I go back on over to the text editor, I'm going to need to do something very similar to what we have in the context module for the index file here, I'm going to need to use the GraphQL client and do another query. So I'm just going to copy all of this into my slug file here. Let's just replace this. And we're going to want to get the page params. And I'm going to need to make a variable here, for the slug which I can destructure params and we can use that slug in the GraphQL query, I'm going to replace this query with the query we made in the previous mission for getting missions. There's a lot here to unpack. So let's just hit Save here for now. So this is expecting a slug. And it's going to return the mission where the slug matches was being passed in, which is this here. So we're going to need to pass that into the GraphCMS client here. So if I just put this in as variables that can equal the slug And then pass this into our client.

And we were going to want the missions not the launches here. Sorry, the mission but the missions. And we're going to return that as props as well hit save on that. So much like we did an index page, I'm going to use a script tag here. And that's going to accept the mission just to validate this worked, I'm going to use the pre tech trick added in the mission variable. So if we go over to our page now, and hit refresh, we have all of our mission data. So for the rest of the mission, I'll be adding the markup needed to make this a bit more presentable. I'm just going to paste in the markup here. So we have the props are coming in as mission I'm destructuring out a lot of the properties from the mission object, I'm using it to populate an article we have here for the name, we're using, conditional if statements for if there was a value for the mission been launched successfully. More if's for article links, and any related links to it. In some cases on the API, the data isn't available. So we need to know whether we should render them or not. And then finally, down here, using the each again, if the Flickr images has items in the array, then we're going to loop through that and render any image for that. And then finally, the rocket name and image, so let's save this and take a look at our page now. So here we have it in a nicer structure. Now. We're displaying images, our Flickr images. And then right down here, we've got the Falcon nine rocket we used for it. Okay, let's get this code committed to get then we can move on to the next mission. So I'm using conventional commits, it's going to pop open my source control tab. Using my conventional commits, add in and add new features. We're going to put this in as add routing and page markup I won't add an additional message or any breaking changes. Okay, that's it for this one. In the next video, we'll be taking a look at SvelteKit endpoints. Bye bye


your progress