In this tutorial we will be building a very simple todo app with Elm’s core library and the https://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.

<aside> 💡 The next steps describe how to create the database with the sqlite3 cli tool. You can of course also use one of the many graphical database management apps like e.g. DB Browser for SQLite or Beekeeper Studio.

</aside>

1. Create a schema.sql file for creating the SQLite database:

   • schema.sql

2. Execute SQL query to create the database:

   sqlite3 todos.sqlite < schema.sql
   

3. Go to airsequel.com and upload the todos.sqlite file.

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

Creating the Elm app with elm-graphql

1. Create a new directory for the app:

   mkdir todo-app && cd todo-app
   

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

   npm install elm elm-format
   npx elm init
   

3. Install necessary dependencies:

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