If you're interested in building with Svelte and GraphQL, this crash could would be a great place to start.
Over 70 minutes of content with the following covered:
- Setting up the backend with the GraphCMS blog starter template
- Setting up the SvelteKit skeleton project for frontend
- Configuring Tailwind with
svelte-add
- Installing all the required dependencies:
graphql-request
, GraphQL, DaisyUI, and Tailwind CSS Typography - Configuring DaisyUI and Tailwind CSS Typography
- Defining the first GraphQL query to get the data into the project
- Creating a posts endpoint
- Using environment variables with
env-cmd
- Styling the index page with Tailwind CSS
- Using the Svelte
each
expression to loop over the posts - Adding global styles in the
__layout
file - Using SvelteKit dynamic routing for posts
- Using the Svelte
if
expression to conditionally render the post content - Creating dynamic pages from CMS content
- Using a daisyUI component for the navigation bar
- Adding a theme switch
The course is a great intro to building with SvelteKit taking on the tried and tested blog model.
The course is for people with previous experience with building projects in HTML, CSS, and JavaScript. Svelte knowledge isn't necessary as I explain the concepts being used in each section.
I cover the core concepts of SvelteKit and how to use it to build an example blog.
A quick look at how to grab data before the page loads using the SvelteKit load
function:
<script context="module">export const load = async ({ fetch, params }) => {const { slug } = paramsconst res = await fetch(`/pages/${slug}.json`)if (res.ok) {const { page } = await res.json()return {props: { page },}}}</script>
This is how the data from the GraphCMS GraphQL API is fetched and passed to the page for a page generated from the CMS.
Conditionally rendering the tags section of the page with the Svelte each
expression:
{#if tags}<div class="mt-5 space-x-2">{#each tags as tag}<span class="badge badge-primary">{tag}</span>{/each}</div>{/if}
Lots, lots more!
You can check out the course on YouTube SvelteKit Crash Course
There's also a bonus follow up video to Deploy Your Project to Production