Building with SvelteKit and GraphCMS with Scott Spence
Fetching data in GraphQL
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