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 accessibility.
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.
Setup Hasura Cloud project
Hasura Cloud is a fully-managed GraphQL-API-as-a-service 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 create the tables author and article required for the app. Note the Hasura 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 [email protected]: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 creating a new project on Hasura Cloud.
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.
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:
This will deploy our svelte 3 app on Now using the configuration available in
Obviously it can be deployed on popular providers like
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.