Build with SvelteKit and GraphQL

GraphQL Galaxy

GraphQL Galaxy 2021

Scott Spence

Building with SvelteKit and GraphQL

JS Nation

I’m attending JSNation – the main JavaScript conference of the year. You may join me there for free with 10k other JS engineers and 40+ great speakers. Just follow this badge. 

#javascript

JSNation 2022

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.

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&amp;A <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>