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.
• Since the CSV import currently only supports String columns, we use String even where other data types like Boolean would be more appropriate.

Upload following CSV file to airsequel.com:

• todos.csv

Keep the browser tab with the overview page open, since you’ll need the database id later.

Creating the Elm app with elm-graphql

1. Create a directory for our 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 (also press enter on all prompts):

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

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

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

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