Building with SvelteKit and GraphCMS with Scott Spence
Endpoints in SvelteKit
Okey dokey. In this mission, we are taking a look at using endpoints in SvelteKit. endpoints run only on the server, or when you build your site, if you're pre-rendering this means is the place to do things like Access databases, or API's that require private credentials. pages in SvelteKit can request data from endpoints via the built-in fetch API endpoints return JSON by default, but they can also return other data types like XML. For if you're making a sitemap let's say, Okay, let's go ahead and build our first endpoint. I'm going to do this for the launches, which is the Index page data. gonna hop over to VS code, the endpoints in SvelteKit work much like the routing. So for the launches, I'm going to make a new folder and a file. The dot JSON here denotes the return type of the endpoint, hit enter. Now I'm going to create the first get function. This is going to give us a return status of 200. Add a body of hello world. Let's save that hop on over to the browser. I'm going to go to lunches dot json and that gives us a response form our endpoint. Okay, now to build on this with the launches data. I'm going to take the code we've got for the GraphCMS client on the Index page here. Just copy all of that, and just have to remember that this doesn't go into a load function, this goes into a get-go back into here, paste this. And this is going to be a Get and we want to return the body. And this is going to be status 200. Spell status properly. Okay, so if we go back to our launches dot Json maybe needs to hit refresh here. We have all the launches information from the GraphCMS endpoint. Okay, cool. But why did you just repeat all that code Scott, as I mentioned at the start of the mission, this is used for when you have sensitive information and you want to hit an endpoint, this will be on the server, rather than on the client. You can't expose any sensitive credentials, like keys to databases and such. So what I'm going to do is on the Index page, now, I'm going to replace this with a fetch, get rid of all this. Still going to return the launches. This is going to be async. load. And now I want to destructure the fetch API, which is part of SvelteKit and then await the response from the launches dot Json endpoint. I'm going to put an endpoint here. And I'm doing a logic check, see if the response is successful. Then I'm going to destructure out launches from the response
Spell launches properly. And I'm going to want to return that in the if block here. So now if I hit save, and go check out the Index page hasn't changed. But we are now retrieving this data from an endpoint. One last thing I want to do before we wrap up this mission is to use some environment variables for the endpoint. So in index dot Json here, it's not a good practice to be committing endpoints to source control. So that's my bad what I'm gonna do is replace this now and use an environment file. So that's usually denoted with dot env.
back on over to the slug dot Json is over if I save this. Now if I go to mission, and pass in a slug dot Json, I should get the GraphCMS API response here. So let's go over to the browser. And let's pick out the slug for this mission. Actually, I could just put in dot Json here, and we get the response from the GraphCMS API. Now I can repeat that same process, as we did with the Index page. Going over to the index here. Let's copy this. And going over to the slug here, there's just a case of swapping out everything within the context module here, all the way down to here. And replacing this with mission. And this is going to take in the slug, this is going to need to be in some backticks. And then this will be dollar slug, which, which I need to destructure on the load function here from page params. Then I can destructure that, save that. And I'm going to want the mission. And the mission here as well. Like I head back over to the browser and selecting a mission, you see that we're getting our information back from our endpoint. This means that we can abstract away any complex logic from the pages and put them into endpoints. Okay, that's it for this one. I'll see you in the next mission. Bye bye.