How to build a todo app with Airsequel and Lowdefy

In this tutorial we will be building a very simple todo app with Lowdefy. 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!
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 Lowdefy app

  1. Create the directory and the boilerplate code:
    1. shell
      mkdir lowdefy-todo-app cd lowdefy-todo-app npx lowdefy@latest init
  1. Start development server:
    1. plain text
      npx lowdefy@latest dev
You should now see the welcome screen running at localhost:3000/welcome:
Image without caption
Since Lowdefy does not have a dedicated GraphQL connector yet (, we simply use the more generic AxiosHttp module to make the necessary HTTP POST request. Therefore add following block right below the name: … line:
connections: - id: graphql_api type: AxiosHttp properties: baseURL: https://<your-company>
In order to render our todos, replace now the pages: block with following code and replace <database-id>with your database id from database setup step.
pages: - id: todos type: PageHeaderMenu requests: - id: todos_request type: AxiosHttp connectionId: graphql_api properties: url: /dbs/<database-id>/graphql method: post data: query: "{ todos { title, completed } }" events: onEnter: - id: fetch_todos type: Request params: todos_request - id: set_todos type: SetState params: todo_list: _request: blocks: - id: title_main type: Title properties: content: Todos - id: todo_list type: List blocks: - id: todo_container_$ type: Box style: background: LightGray margin: 0.5rem padding: 1rem 2rem blocks: - id: todo_list.$.completed type: CheckboxSwitch layout: size: 2em align: middle properties: label: disabled: true - id: todo_title_$ type: Span layout: grow: 1 align: middle properties: content: _state: todo_list.$.title
Now, the complete file looks like this:
The next steps in this tutorial will be added soon! In particular: Writing, updating, and deleting todos