Course Introduction

GraphQL is becoming the new way to use APIs in modern web and mobile apps. Svelte is a framework for building fast user interfaces.

Curious to learn how to integrate GraphQL in a svelte app? Then this course is for you.

We will explore the fundamentals of GraphQL and the things that make GraphQL especially suitable for modern applications, like its realtime capabilities! and learn how to build apps with GraphQL and Svelte.

Key topics and takeaways:

  • GraphQL vs REST
  • GraphQL queries, mutations, subscriptions
  • Setting up a GraphQL client with Apollo
  • Integrating GraphQL queries in your svelte app
  • Integrating GraphQL mutations with query variables to handle form input
  • Updating local state after a GraphQL mutation (form input) using Apollo cache
  • Optimistic updates to local state and UI after GraphQL mutations for a slick UX
  • Integrating GraphQL subscriptions in your svelte app
  • Building a real-time feed with notifications using mutations and subscriptions

What will we be building?

We will be building a realtime todo app using authenticated GraphQL APIs.

Try this deployed version of the app to see what we'll be building: https://learn-hasura-todo-app.netlify.com/

Will this course teach Svelte concepts as well?

No, we will be simulating a scenario where we already have a GraphQL API and the basic UI of a Svelte app built. Our task in this scenario is to integrate the GraphQL APIs into our svelte app to build a complete and working app.

If you're new to Svelte, we recommend going through the official docs and then coming back here!

What do I need to take this tutorial?

You need to have npm/yarn & node 8+ running.

How long will this tutorial take?

Less than 2 hours

Other courses

Frontend: GraphQL for: Vue, Angular, Elm, ReasonReact

Mobile: GraphQL for: React Native, iOS, Android, Flutter

Backend: Building a realtime GraphQL backend with Hasura in 30 mins (ideal for frontend, backend or fullstack developers)

About the community authors

Kiran Abburi
Kiran AbburiTwitter IconGithub Icon
Consultant
Did you find this page helpful?
Start with GraphQL on Hasura for Free
  • ArrowBuild apps and APIs 10x faster
  • ArrowBuilt-in authorization and caching
  • Arrow8x more performant than hand-rolled APIs
Promo
footer illustration
Brand logo
© 2024 Hasura Inc. All rights reserved
Github
Titter
Discord
Facebook
Instagram
Youtube
Linkedin