How to build a todo app with Airsequel and React

This tutorial is still a work in progress, but for the finished todo app, please check out the code at
In this tutorial we will be building a very simple todo app with React. It will load the todos via GraphQL from a SQLite database hosted on Airsequel. To simplify the setup we will use Create React App to generate a bare bones React app.
This is what the final app will look like. Not pretty, but functional!
Image without caption
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:
  1. Go to (or your custom Enterprise instance)
  1. Click on “Create New SQLite Database”
  1. Rename database to “todos”
  1. Go to the “Tables” tab
  1. Rename “table_1” to “todos”
  1. Rename column “name” to “title”
  1. Add a new column “completed” with type “Boolean” and activate “Not Null”
  1. 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:
Image without caption

Creating the React app

  1. Create the boilerplate code (press y on all prompts)
    1. shell
      npx create-react-app@latest react-todo-app
To be continued …