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!

Screen Shot 2022-02-27 at 11.30.08Z.png

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

Setting up the Airsequel Database

Things to know:

Upload following CSV file to airsequel.com:

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 install elm/json && \\
    elm install 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