Load a Single SvelteKit Post Dynamically & Render Markdown with MDSvex
We will combine our knowledge of Dynamic routing to pass a dynamic parameter to a function that will query a single post from our Sanity CMS. When we fetch our blog post data this is a great place to do some processing of the content that we get back. If you didn't process your blog post markdown, it would come back as a string which doesn't look too great on the page.
To make our markdown pretty we will install and use the MDSvex library to use it's compile function and render our markdown.
We'll see that MDSvex gives us a Promise from compile because it's an async function so we'll use the Svelte await block to conditionally show the post body when it is ready, otherwise we'll show a loading state.
Instructor: [0:00] Now that we have our getAllPosts query and we know how to query our Sanity CMS from the front end, we can create a new function and call it getPostsBySlug. I'm going to paste this in. We have an async function that takes a slug as an argument, and then we instantiate our client again.
[0:16] We create our post query, using this [inaudible] slug.current syntax. We can pass the slug to match it and get back the post information for that slug. Then, we get all of the information and we actually want to set this to content, and then fetch that post query and then fetch that post from our CMS using this query.
[0:36] Then, you'll see we're getting an error right here. That's because it's being typed as an any, because we're still using JSDoc. To handle that, we can give this some spacing, make it look good, and set @type string. We just type this slug as a string so it's happy that it's not being typed as an any. We can save that.
[0:58] Now, let's come into our page.server.js in the slug, in the slug route, and here we just need to change a few things.
[1:06] We want to import to get post by slug from Sanity. We need to change this to a server because we're now in a server function. It's async, still gets the params, we can leave it as route slug. We're going to leave it, being called to get single post. Here, we're just going to change this to await get to post by slug and pass it to the route slug.
[1:36] If we save that, we're actually getting all of our information for that, but this is coming through as this markdown string. We want to parse this. Let's come down here, stop the server and we need to install MDsveX. We can run the server again.
[1:53] Here from our query, we know that we have the title slug and then content, thus those are the main things that we want off of this query. We can come back into where we're calling it. We want destructure the title slug and content from get single post and then we can just set the post equal to that title slug content.
[2:21] We're going to set this equal to a function that MDsveX gives us to parse the markdown and we're going to pass at the content and then we can just spread the rest which we need to put here.
[2:33] We need to pull in that compile function from MDsveX, and then here, we can just return the post. If we click Save, we're getting Undefined here. We need to access the first property on the array, like that. If we save that, we'll see we get the title.
[2:49] Now, we're still getting this [object Promise] , and that's because this compile function is an asynchronous function. We can handle that in our page itself, and we can use the Svelte await block. We can say, await data.post.content, and we're going to use .then(content), and then we'll close the await block.
[3:15] Here, we can say, "It's loading," and here we can say @html, and we can just pass it the content. This content from MDsveX will have a code property on it. If we save that, we're now getting our Markdown.
[3:28] In this lesson, we created another function to get our posts by a slug. We added a simple JS doctype to make sure we're passing the right type of parameter to our getPostBySlug function. We also imported the MDsveX library to use its compile function to parse the Markdown and send that to our client.
[3:48] We then used Svelte's await block to await the content to be loaded, and load that after it has been parsed from the MDsveX compile function.