Jamstack Explorers

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.

And one good thing to check is that in your Git ignore that dot env is in here. So you're not committing your environment file to git close that and because we're using Vite, I'm gonna have to prefix the environment variable with vite, underscore GraphCMS endpoint and put my endpoint in here. Put that in hear hit save. Let's close that. And to access the vite variable, its imports dot meta, dot env and the variable name, which I just closed that tab. So let's open that tab back up and copy-paste that in. And hit Save the squiggly line on Vite here's just my spell checker in VS code, go back over to the browser. All seems fine, still. Brilliant. Now I'm going to repeat the same process, but this time for the mission. And again, taking out the GraphQL request calls from the slug file here, which is right up here back up take them out from here, and then putting them into their own file here. So let's just do that now. And this is the same notation, it's going to be square brackets, which is going to accept the slug. And this is going to be Json again, and it's a JavaScript file. create that now, I'm just gonna paste in this markup, and then talk through what's happening. So if we scroll up to the top, here, we've got our big mission query. And we're doing pretty much the same as what we have done in the index dot Json here. This time, we're bringing in the request. And we're destructuring out the params dot slug, much like we've done in the slugs or Svelte page here. Then we're using the slug to pass into our Get mission query. This time, we're wrapping this in a try, which I will do for the index dot Json as well. We're passing in the slug is variable. And then we run it against the GraphCMS client. If it's successful, return a 200. And the mission as the body. If not, we're going to return an error. Let's just take this catch out from here, put it into our index Json. Then wrap this in a try.

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.


your progress