Home
Jamstack Explorers
Menu

Building with SvelteKit and GraphCMS with Scott Spence

Setting up the backend for data

Okey dokey. In this lesson, we are going to be setting up our back end from a template with GraphCMS. From GraphCMS comm, I'm going to go to login. From here, you get the option to sign up or to log in, there's multiple authentication providers to use, I'm just going to use an email address and password.

Now that I'm signed in, I get the option to create a new project, or use a starter schema template. I'm going to scroll down and pick out the SpaceX launches template here. Then I can choose to create the project, I'm going to give my project a name, add a description.

From here, you can choose whether or not to include the template content, I'm going to choose to include this, then I'm going to need to pick the CDN. Closest CDN, to me is Frankfurt in Europe, I'm going to say create projects. Now I'm going to wait for it to be provisioned. Then for the pricing plan, I'm going to select community. And I'm going to invite my teammates later.

Okay, so from the project dashboard, we can see that there has already been several steps set up for us, setting up the schema and the content. They were done when we provisioned the template, making API accessible. That was also done with the template. And then the last one here is just to learn how to fetch content with GraphQL using the interactive playground, that's what we're going to concentrate on in this lesson.

So if we do a quick tour of the rest of the project, if we go over to the schema here, we can see that we have the model for launch, we have the model for the launch site, which is just the name and the long name of the site, then we have a link. This is for all of the related information to the launch. And then also the rocket used. This is the name, the type of the rocket and an image of the rocket. Over in our content here, this is all been pre-populated.

If we take a look at one of these items here, you can see we have the year date name and the slug. The slug is based off of the name of the mission. And we will be using this for the routes in our SvelteKit project. Then here we have relational items for the rockets, the launch site, and the links relating to the mission. Over in our assets here we have all the related images to the mission and launch. And then what is play button is here, we get the API playground. If we click in here, we can start querying for launches data. And for mission data.

Let's first create the launches query. If you're not familiar with GraphQL, you can make queries and you can name them. So we're going to name this one launches. And we'll have some curly braces here. And then from here, we can start selecting parts of our schema. So we want launches. And you'll see the IntelliSense here has already suggested lunches for me. So if I hit tab, it will autocomplete more curly braces for each item. I'm going to take the ID, the launch slug, the date and the name. If I go over to the play button here and run that query, we can see that the data coming back from the GraphQL endpoint here is structured very much like Json and we will be consuming that on the front end.

Okay, so with the GraphQL playground here, there's also an explorer, which can help you build up your own queries. Let's do that now for a get mission query. I'm going to open a new tab here. Go over to the Explorer. I'm going to call this query get mission And this won't be for launches. So we're just going to deselect these here. This will be for a launch. And you'll see that this is asking for a where we want to match this to the slug of the mission. So for now we could just get one of the slugs is just get this one from here, I'm going to copy that. And it's gonna say slug, colon and then, put mission in here, we're gonna need some more curly braces here and want to select pretty much everything from this launch data, we're gonna say, year, the date, the name, whether the launch was successful or not, and the rocket.

For the rocket, I'm gonna want the name, the type of rocket and the image with the file name. And one of the core features of GraphCMS is the asset transformation library. So from here, I can pick the URL, and then select the transformation I want. This is going to be for an image. I'm going to want to resize it with this over here a bit and I'm gonna want the width at 500 pixels, the height 500. And to fit clip. So there's also a couple more bits of information we're going to need. I'm going to want the launch site and add the name and long name here and also the associated links. This will be link and we'll have the article, press kit, video of launch the Wikipedia link and the flicker images.

And again, with the flicker images, I'm going to be using the asset transformation. So in here, I want the URL transformation be for the image, resize it with a width of 500. Height of 500 and fit to be clip. Okay. Now if we click on this prettify button, let's close the sidebar. One last thing I want to do is alias this launch to mission. You can do that by giving it a name. And adding a colon, so if we run this now, at the moment, this is hardcoded in so it's just going to be for the one mission. There we have our API response.

So for this to be dynamic, we're going to need to pass in a variable. So in GraphQL, the way you do that is for the query, take in a variable and you did know that with the dollar sign, this is going to be slug. I'm gonna denote the type with a colon and then say it's a string. And the exclamation mark means is required. You'll also notice that, I'm getting a warning here, so this is unused at the moment, I'm going to be using that. In here, so I'm just gonna cut this and use dollar slug. But now if I tried to run this, I get an error. But down here, if you pop open this section down, it's click on query variables, I can put in my own query. So in some curly braces here, if I hit Ctrl tab, it uses IntelliSense to see that there's a slug expected. And I can paste that in and hit the play button again. And we get the data we want. So that will be very useful in an upcoming mission on routes, where we will be querying the GraphCMS graph qL API here and using it in our projects. Okay, that's it for this one. I hope you found it useful, and I'll see you next one. Thanks a lot. Bye bye.

Explorers

your progress

612