In this tutorial we will be building a very simple todo app with Elm’s core library and the github.com/dillonkearns/elm-graphql library. It will load the todos via GraphQL from a SQLite database hosted on Airsequel.

This is what the final app will look like. Not pretty, but functional!

If you find any problems in this tutorial, please feel free to leave a comment!

Setting up the Airsequel Database

Things to know:

As the primary key we use the automatically generated rowid column.

First, let’s create the todo database in Airsequel’s UI. If you’re on Airsequel Enterprise you can alternatively use following steps:

Alternative way for Airsequel Enterprise: Upload an existing SQLite database

Or build it up from scratch:

Go to airsequel.com (or your custom Enterprise instance)

Click on “Create New SQLite Database”

Rename database to “todos”

Go to the “Tables” tab

Rename “table_1” to “todos”

Rename column “name” to “title”

Add a new column “completed” with type “Boolean” and activate “Not Null”

Create a few todos like “Buy milk” and “Go hiking” to make working with it easier

🎉 Your database and the corresponding GraphQL endpoint are now ready!

It should look something like this:

Creating the Elm app with `elm-graphql`

Create a new directory for the app:

shell
mkdir todo-app && cd todo-app

Initialize a new Elm project (press enter on all following prompts):

shell
npm install elm elm-format
npx elm init

Install necessary dependencies:

shell
elm install \
  dillonkearns/elm-graphql \
	elm/json \
	krisajenkins/remotedata && \
npm install --save-dev @dillonkearns/elm-graphql

Create code for accessing the GraphQL endpoint (Don’t forget to replace the placeholder <db-id> with your database id)!

shell
npx elm-graphql --skip-elm-format \
  https://<name>.airsequel.com/dbs/<db-id>/graphql

⚠️

Due to following errors in the package, you might encounter some problems when generating the code: - github.com/dillonkearns/elm-graphql/issues/634 - github.com/dillonkearns/elm-graphql/issues/335

Create the main Elm file which will include the code your app: touch src/Main.elm

Copy the file content from github.com/Airsequel/Examples/blob/main/elm-simple-todo-app/src/A_List.elm into the src/Main.elm file.

Assign your database id from the previous steps to the dbId variable

Finally run npx elm reactor to start the development server and host your website at localhost:8000/src/Main.elm. 🎉 Our little todo app can now list all our todos including their completion status!

To add also support for writing, updating, and deleting todos you can now replace the Main.elm file with the corresponding files from here github.com/Airsequel/Examples/tree/main/elm-simple-todo-app/src.

Finally, feel free to use the code (MIT licensed) as a template for your own CRUD apps.

Happy coding!

How to build a todo app with Airsequel and Elm

Setting up the Airsequel Database

Creating the Elm app with elm-graphql

Creating the Elm app with `elm-graphql`