Query a Sanity CMS from a SvelteKit Blog Frontend with +page.server.js
We will install the @sanity/client package and use the GROQ query language to query all of our posts from our CMS.
To do this in SvelteKit we need to make a few adjustments to how we load data. We now need a async load function that runs on the server because sanity needs to access our environment variables. To do this we'll convert our +page.js to +page.server.js and make our function async.
Instructor: [0:00] Now that we know how to write queries to get data from our CMS, we can come back into our frontend and we can work on creating our functions. Let's first come into our Routes, then go to our Posts page or page.js. Currently, we're just using our fake data, so we want to change this. We're going to have a file called sanity.
[0:18] We're going to query our CMS, and we're going to have a getAllPosts function. Then, this is going to need to be an async function because we're going to await data. We know that, since we need environment variables, it's going to run on the server, and so this is going to change to a page.server.js.
[0:41] Then we need to change this type to be PageServerLoad. Now, all we want to do is say, const posts = await getAllPosts. Then we can just return the post. We can save that, and then we can come into our lib. Let's create a new file and call it sanity.js.
[1:05] Before we use this, we need to install the Sanity client. OK. Now we can import {createClient} from '@sanity/client'. I'm going to paste our code and then we'll walk through it. We have our function, sanityClient, that we're creating, and we're creating a config object that has a project ID, dataset, and an API version. Then we're just creating that client and passing it the config.
[1:38] If you want to know where to get your API version, dataset, and project ID, come back into your Sanity dashboard. You can see API version, and it has that set here, your dataset, it has that set here. To find your project ID, you can come in to Manage Project, and under Status, there will be project ID, and it's this value.
[1:59] Now we are creating a function called getAllPosts that is an async function, and we are instantiating that client and creating an AllPosts query that is just looking for our title and our slug. Then we are passing that query to the client. The client has this FETCH method on it, and then we're just returning all posts.
[2:18] If we save that and let's come back in, let's run our server, and we're still getting an error. SvelteKit gives us a module to help with environment variables. We can say, from $env/dynamic/private, and then let's just remove the process part, process.env. If we save that, now it's working.
[2:41] In review, we used our knowledge of the GROQ query language to create a function that allows us to interact with our CMS data on the front-end.