Build and Deploy Realtime Svelte 3 Apps Using GraphQL

What is Svelte?

Svelte is a component framework that compiles components at build step (unlike React/Vue) into highly efficient imperative code that updates the DOM.

Svelte gives a single bundle.js that can be referenced in the app's HTML which doesn't contain any framework specific dependencies (magically disappearing framework was their tagline before). The bundles are usually smaller than other frameworks with greater emphasis on accessbility.

This also means that there is no virtual DOM and no extra work like virtual DOM diffing and it looks like there are performance benefits to it. State management is made easy since its just javascript variables and updating them would re-render the component by updating the DOM directly (truly reactive)

You will also see in the sample app that there's less boilerplate code than other frameworks to achieve the same functionality. Svelte released their stable version 3 last month and here's an interesting blog written by Rich Harris if you would like to learn some details.

Alright! Now let's see how a simple realtime app can be made using Svelte and GraphQL. To get started, we will deploy Hasura.

Deploy Hasura

Hasura is an open-source engine that gives you realtime GraphQL APIs on new or existing Postgres databases, with built-in support for stitching custom GraphQL APIs and triggering webhooks on database changes.

Follow the instructions in the readme to deploy Hasura and create the tables author and article required for the app. Note the Heroku URL for GraphQL Endpoint. You will be configuring this in the app.

Clone and Run App

The demo app walks you through to build a simple realtime app, listing all authors and articles.

In this example, we will look at building a simple app to

• Fetch articles and authors using GraphQL Queries,
• Adding an author using GraphQL Mutations and
• Demonstrate realtime capabilities using GraphQL Subscriptions by updating authors list in realtime.

To integrate GraphQL into Svelte, we will make use of svelte-apollo module to perform queries.

You can clone and run the app for the demo.

$ git clone git@github.com:hasura/graphql-engine.git
$ cd graphql-engine/community/sample-apps/svelte-apollo
$ npm install

After installation, you will have to configure the GraphQL endpoint that you got above after deploying Hasura on Heroku.

Open src/apollo.js and configure the endpoint.

Now run the app using

$ npm run dev

Note: This app was forked off from the standard template and svelte-apollo dependency was added to integrate GraphQL
Here's an example of a Svelte component making a GraphQL query to fetch list of articles:

Here, we are importing the query method from svelte-apollo and passing in the client and the GraphQL query to fetch the list of articles. There's also the restore API to restore a previously executed query into Apollo Cache. The previous query came through preload method called during app initialisation.

And subscriptions are pretty easy as well:

If you looked at it carefully, this would be slightly similar to the React hooks style of implementation in the sense of less boilerplate code.

Bundle using Rollup

Svelte comes with default Rollup bundling and configuring Rollup is also fairly easy. When you run the command npm run build , rollup generates a bundle.js, which is referenced in index.html and bundle.js doesn't contain any framework specific dependencies like React or Vue, since Svelte bundles at compile time.

Deployment

Deploying a Svelte app is as simple as deploying a simple static HTML app with javascript and css files.
Let's use now-cli to deploy the app. Install the now cli, if you don't have already.

npm install -g now

And from within your project folder, execute the following command:

now

This will deploy our svelte 3 app on Now using the configuration available in now.json. Obviously it can be deployed on popular providers like Netlify, Heroku etc.

Final Thoughts

Svelte comes with least learning curve despite deviating from JSX style familiar to React developers and i would personally compare the syntax to Vue, as in you focus on writing HTML separately.

If you are familiar with React/Vue and other virtual DOM based frameworks, you can try out Svelte for less boilerplate code and potential performance benefits. Of course GraphQL integration is pretty easy and you get all the benefits with lesser effort.

There's also an SSR framework for Svelte named Sapper, if you are concerned about SEO.

Take the demo for a spin and let us know what you think.