Scott Spence
Scott Spence
I’m a developer advocate working with GraphCMS to create content that helps remove friction and educate around the GraphQL space. I create content written in the blog here and also in educational videos supporting the written content. I’m a second career dev, that reskilled from a VBA analyst developer role into web development. I’m a massive fan of the Jamstack I have a wealth of knowledge working with Gatsby and am spending a lot of time familiarising myself with Svelte and SvelteKit.
JSNation 2022JSNation 2022
170 min
Building with SvelteKit and GraphQL
Workshop
Want to get familiar with the framework that took the top spot for most loved framework on the Stack Overflow developer survey in 2021?Svelte is a super versatile framework with no virtual dom unlike React and Vue, it's a compiler that builds your projects into vanilla HTML, CSS and JavaScript.This workshop will go over the basics of setting up with SvelteKit and querying data from a GraphQL API and using that data in SvelteKit to retrieve data for use in the client (browser).Key learnings:How to use SvelteKit to build a simple project retrieve data from a GraphQL API and display it in the client. Many of the core concepts of Svelte and SvelteKit will be covered in this workshop.
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A