live code: Svelte app showing realtime Postgres data changes (GraphQL subscriptions)
Channel: SpinSpire
Date: 2020-02-25

We live code a Svelte app to show realtime queries (subscriptions) to Postgres data over GraphQL using Hasura. The data changes in the database and the view updates instantly.

Source repo: https://bitbucket.org/spinspire/hasura-todo

TOC/Index
00:00 Intro & Overview
01:47 Start coding (npx degit sveltejs/template hasura-todo)
03:40 Download and run Hasura docker-compose.yml
05:56 Create todo table in Hasura
07:30 Insert todo using GraphQL mutation
10:35 Add npm module dependencies (npm install apollo-client apollo-cache-inmemory apollo-link-http apollo-link-error apollo-link graphql-tag graphql apollo-link-ws subscriptions-transport-ws --save)
12:00 Demo live subscription query
14:30 Back to coding the Svelte client app
17:10 Create graphql-client.js with HTTP as well as WebSocket links to GraphQL server
22:40 Create Svelte UI and form submit handler to insert todo
28:00 Test if todo insert works
29:00 Code subscription to live data and display live data (realtime feed)
34:00 Realtime todo list working
35:40 Order by ID descending
38:04 Update todo completion status
47:58 Closing summary & recap

For questions, post a comment. For business inquiries, email info@spinspire.com.