Jamstack Explorers

Building with SvelteKit and GraphCMS with Scott Spence

Fetching data in GraphQL

Okey dokey, in this mission, we can start getting data from the GraphCMS, GraphQL endpoint and adding it to our project. Before we do that, I'm going to need to commit these changes to git over in VS code, I'm going to pop open the source control sidebar, you can access this, from here on the action bar, I'm just going to hide the action bar again, I'm going to use conventional commits to add a new feature with no scope and add in some sparkles. With the message add about page and add head to pages, I won't add a longer description to the message. And that can be committed. Let's close the source control panel now. Now we're going to instal a couple of packages, the GraphQL request package and the JavaScript language implementation for GraphQL. going to hop over to my terminal. Stop the dev server, I'm going to use NPM i dash D for dev dependencies, and it's graph qL request and graph QL.

Now the dependencies are installed, I can use GraphQL request to set up a client on the Index page. Let's go back over to VS code. And in here, I'm going to add a script tag much like I did in the layout example, but this time add an in context module.

This means that any code between these script tags is run before the page loads I'll also need to add in the load function. This is the function that runs before the page loads. This is export async. Now I can create a GraphQL client to request the data from the GraphCMS endpoint, I'm going to import the G qL tag and the graph qL client from the graph qL request package. You'll notice I left the import empty This is because we can use VS code IntelliSense to pick out the graph qL tag in the graph qL client. Now in my load function, I can define the GraphCMS client

client initialization, takes in the endpoint and any headers needed. In this case, we can leave the headers object empty.

Now with the client initialised, I can define the launches query we did in the previous video. And it goes in some backticks. And I'm just gonna paste this in here.

Now I'm going to want to define the data I want to return from the GraphCMS client so that will be launches which is here.

And it looks like GitHub copilot is doing its thing here. So I'm just gonna hit tab to complete that we're going to await the response from the GraphCMS client, passing the request query, let's hit save. Now, we're not quite done yet, because this function needs to return props. That's gonna be launches. Now we have our code defined to run before the page loads, we're going to need to get the props from here into the component here. The way to do that is with a script tag. This is gonna accept the launches, objects, and it's getting the linter telling me that it's not being used. In here just a quick proof of concept. It's giving us a pre tag and then add in launches into here. Hit save and then start the dev server with NPM run Dev. I'm going to pass in the port's I'm using which is 3333 and hit enter. Now if we go over to the browser, you see that I'm getting the information for each of the launches from the GraphCMS GraphQL endpoint. Okay, that's it for this one. In the next video, we'll be taking a look at the Svelte each directive to add the launches data to some markup on the page. See you then. Bye bye


your progress