はじめに

Aureliaの公式サイトには、Todoアプリを作成するチュートリアル(https://aurelia.io/docs/tutorials/creating-a-todo-app/)があります。
今回は、GraphQL + ApolloでTodoをDBで管理できるようにカスタマイズしたいと思います。
基本的な構造は、公式のチュートリアルと同じになります。

完成系のソースコードはGithubに置いています。

環境

	バージョン
aurelia-cli	v1.2.2
hasura	v1.0.0-beta.10

環境構築

Aureliaプロジェクト

aurelia-cliを使って、Todoアプリ用のプロジェクトを作成します。
aurelia-cliがインストールされていない場合は、インストールします。

npm install -g aurelia-cli

au newコマンドでプロジェクトを作成します。
今回は、プロジェクト名をaurelia-apollo-todo、それ以外はデフォルトで作成しています。

au new

? Please enter a name for your new project: aurelia-apollo-todo
? Would you like to use the default setup or customize your choices? …
▸ Default ESNext App
? Would you like to install all the npm dependencies? …
▸ Yes, use Yarn

プロジェクトの作成が完了したら、起動してみましょう。

cd aurelia-apollo-todo
au run

http://localhost:8080にアクセスすると、『Hello World!』が表示されます。

GraphQLサーバー

GraphQLサーバーとして、Hasuraを使用します。
Hasuraはローカル環境で動かすために、docker-compose.ymlが提供されています。

wget https://raw.githubusercontent.com/hasura/graphql-engine/master/install-manifests/docker-compose/docker-compose.yaml

ついでに、先ほど作成したAureliaのプロジェクトも、Docker Composeで動かすようにします。

Dockerfile

FROM node:10.17.0-alpine

WORKDIR /app

COPY ./package.json .
COPY ./yarn.lock .

RUN apk update && \
  yarn global add aurelia-cli && \
  yarn

docker-compose.yml

version: '3.6'
services:
  web:
    build: .
    ports:
      - 8000:8000
    volumes:
      - .:/app
    stdin_open: true
    tty: true
    command: yarn start --host 0.0.0.0
  postgres:
    image: postgres
    volumes:
      - db_data:/var/lib/postgresql/data
  graphql-engine:
    image: hasura/graphql-engine:v1.0.0-beta.10
    ports:
      - "8080:8080"
    depends_on:
      - "postgres"
    environment:
      HASURA_GRAPHQL_DATABASE_URL: postgres://postgres:@postgres:5432/postgres
      HASURA_GRAPHQL_ENABLE_CONSOLE: "true" # set to "false" to disable console
      HASURA_GRAPHQL_ENABLED_LOG_TYPES: startup, http-log, webhook-log, websocket-log, query-log
      ## uncomment next line to set an admin secret
      # HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey
volumes:
  db_data:

aurelia_project/aurelia.json

"platform": {
  "hmr": false,
  "open": false,
-  "port": 8000,
+  "port": 8000,
  "host": "localhost",
  "output": "dist"
},

AureliaのプロジェクトとHasuraでPortが同じになってしまうので、Aureliaのほうを8000に変更しています。
Dockerfileとdocker-compose.ymlが作成できたら、Docker Composeを起動します。

docker-compose up -d --build

http://localhost:8000にアクセスすると、先ほどと同じく『Hello World!』が表示されます。
http://localhost:8080にアクセスすると、Hasuraの画面が表示されます。

todosテーブルの作成

Todoを登録するために使用するテーブルを作成します。

uuid ・・・一意になるID
description ・・・Todoの内容
done・・・完了したかどうか

内容を登録するためのdescriptionと、完了したかどうかを登録するdoneというカラムを用意します。
DATA - Create Tableと選択して、実際にtodosテーブルを作成します。

必要な項目を入力して、Add Tableをクリックすると、todosテーブルが作成されます。

Todoアプリに表示するためのサンプルデータを投入しておきましょう。
Insert Rowタブを選択すると、データの登録が出来ます。

内容は何でも構いませんが、descriptionには「Sample Todo」と入力し、doneはFalseを選択しておきます。
入力出来たら、Saveをクリックするとデータが登録されます。

Todoアプリ作成

本題のTodoアプリを作成していきます。
まずは必要なライブラリをインストールします。

docker-compose exec web yarn add apollo-client apollo-cache-inmemory apollo-link-http graphql-tag graphql

webpack.config.jsにloaderの設定を追加しておきます。

webpack.config.js

devServer: {
  contentBase: outDir,
  // serve index.html for all 404 (required for push-state)
  historyApiFallback: true,
  hot: hmr || project.platform.hmr,
  port: port || project.platform.port,
  host: host,
+  watchOptions: {
+    aggregateTimeout: 300,
+    poll: 1000
+  }
},
devtool: production ? 'nosources-source-map' : 'cheap-module-eval-source-map',
module: {
  rules: [
(略)

+    {
+      test: /\.(graphql|gql)$/,
+      exclude: /node_modules/,
+      loader: 'graphql-tag/loader'
+    }
  ]
}

設定を変更したので、webコンテナを再起動します。

docker-compose restart web

Todoの一覧を表示する

プロジェクト作成時から存在している、src/app.jsとsrc/app.htmlを以下のように書き換えます。

src/app.js

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import TODOS from './graphql/Todos.gql';

const cache = new InMemoryCache();
const link = new HttpLink({
  uri: 'http://localhost:8080/v1/graphql'
});

const client = new ApolloClient({
  cache,
  link
});

export class App {
  heading = 'Todos';
  todos = [];

  constructor() {
    client.query({
      query: TODOS
    }).then(data => this.todos = data.data.todos);
  }
}

src/app.html

<template>
  <h1>${heading}</h1>

  <ul>
    <li repeat.for="todo of todos">
      <input type="checkbox" checked.bind="todo.done">
      <span>
        ${todo.description}
      </span>
    </li>
  </ul>
</template>

import TODOS from './graphql/Todos.gql';でインポートしているファイルは、GraphQLのQueryを定義しているファイルです。
todosテーブルに登録されているTodoを全て取得するクエリです。

src/graphql/Todos.gql

query Todos{
  todos {
    uuid
    description
    done
  }
}

http://localhost:8000にアクセスすると、先ほど登録したデータが表示されているはずです。

src/app.jsの20～22行目で、クエリを実行してデータを取得しています。
todosには配列でデータが格納されていて、src/app.htmlの5行目のrepeat.for="todo of todos"で1つずつ取り出しliを生成しています。

新しいTodoを追加する

新しいTodoを追加することができるように、テキストボックスとボタンを追加します。

src/app.html


<template>
  <h1>${heading}</h1>

+  <form submit.trigger="addTodo()">
+    <input type="text" value.bind="todoDescription">
+    <button type="submit" disabled.bind="!todoDescription">Add Todo</button>
+  </form>

  <ul>
    <li repeat.for="todo of todos">
      <input type="checkbox" checked.bind="todo.done">
      <span>
        ${todo.description}
      </span>
    </li>
  </ul>

</template>

src/graphql/InsertTodo.gql

mutation ($description: String) {
  insert_todos(objects: {description: $description, done: false}) {
    returning {
      uuid
      description
      done
    }
  }
}

src/app.js

+ import INSERT_TODO from './graphql/InsertTodo.gql';
(略)

export class App {
  heading = 'Todos';
  todos = [];
+  todoDescription = ''
(略)

+  addTodo() {
+    if (this.todoDescription) {
+      client.mutate({
+        mutation: INSERT_TODO,
+        variables: { description: this.todoDescription },
+        update: (store, { data }) => {
+          let { todos } = store.readQuery({ query: TODOS });
+          todos.push(data.insert_todos.returning[0]);
+          store.writeQuery({
+            query: TODOS,
+            data: { 'Todos': todos }
+          });
+        }
+      });
+      this.todoDescription = '';
+    }
+  }
}

input type="text" value.bind="todoDescription"でテキストボックスのvalueと、src/app.jsのtodoDescriptionが双方向にバインドされます。
そのため、テキストボックスに入力した内容が、todoDescriptionに反映されます。

bind以外にも、to-viewやfrom-viewなどありますが、bindを使うとバインディングモードを自動的に判断してくれます。

src/app.htmlでsubmit.trigger="addTodo()"と書いているため、ボタンをクリック(submit)するとaddTodoメソッドが実行されます。
addTodoメソッドの中では、todoDescriptionの内容を登録するMutationが実行されます。

Todoをdoneにする

完了したTodoにチェックすると、todosテーブルのdoneカラムをtrueで更新するようにします。
また、チェックすると、取り消し線が表示されるようにします。

src/app.html

  <ul>
    <li repeat.for="todo of todos">
-      <input type="checkbox" checked.bind="todo.done">
-      <span>
+      <input type="checkbox" checked.bind="todo.done" change.delegate="updateTodo(todo)">
+      <span css="text-decoration: ${todo.done ? 'line-through' : 'none'}">
        ${todo.description}
      </span>
    </li>
  </ul>

src/graphql/UpdateTodo.gql

mutation ($uuid: uuid, $done: Boolean) {
  update_todos(where: {uuid: {_eq: $uuid}}, _set: {done: $done}) {
    returning {
      uuid
      done
      description
    }
  }
}

src/app.js

+import UPDATE_TODO from './graphql/UpdateTodo.gql';

export class App {
(略)

+  updateTodo(todo) {
+    client.mutate({
+      mutation: UPDATE_TODO,
+      variables: { uuid: todo.uuid, done: todo.done }
+    });
+  }
}

todo.doneがtrueの場合（チェックボックスにチェックが付いている）、text-decoration: line-throughが適用され、取り消し線が表示されます。
また、チェックボックスの状態が変更した際にupdateTodoメソッドが実行されるようになっています。
updateTodoで更新用のmutationが実行され、todosテーブルのdoneカラムが更新されます。
（チェックを外すと、falseで更新されます）

これで完了したタスクをdoneにすることが出来るようになりました。

Todoを削除する

src/app.html


  <input type="checkbox" checked.bind="todo.done" change.delegate="updateTodo(todo)">
  <span css="text-decoration: ${todo.done ? 'line-through' : 'none'}">
    ${todo.description}
  </span>
+  <button click.trigger="removeTodo(todo)">Remove</button>

src/graphql/removeTodo.gql

mutation ($uuid: uuid) {
  delete_todos(where: {uuid: {_eq: $uuid}}) {
    returning {
      description
      done
      uuid
    }
  }
}

src/app.js

+ import REMOVE_TODO from './graphql/RemoveTodo.gql';

export class App {
(略)

+  removeTodo(todo) {
+    client.mutate({
+     mutation: REMOVE_TODO,
+      variables: { uuid: todo.uuid },
+      update: (store, { data }) => {
+        let { todos } = store.readQuery({ query: TODOS });
+        const index = todos.findIndex(t => t.uuid === data.delete_todos.returning[0].uuid);
+        if (index > -1) {
+          todos.splice(index, 1);
+        }
+        store.writeQuery({
+          query: TODOS,
+          data: { 'Todos': todos }
+        });
+      }
+    });
+  }
}

削除ボタンを追加し、click.triggerでクリックされた際に、removeTodoメソッドが実行されるようにしています。
removeTodoでは、削除用のmutationを実行しています。

これで、間違って登録しても削除出来ますね！

まとめ

半分ぐらい、Aureliaに関係のない内容になってしまった気がします
普段はVue.jsを触る機会が多いですが、雰囲気が似ているので、分かりやすかったです。
折角なので、もう少し色々触ってみようかと思いました。

参考

https://github.com/hasura/graphql-engine
https://aurelia.io/