How to get started with SvelteKit and GraphQL

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 Hygraph 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 } = params
    const 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 Hygraph 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