[初心者]Hasuraを使ってみました

なんかDBとのやり取りはRESTを使うのが最新かと思いきや、GraphQLというものがモダンらしい。
RESTは細かく誰でも直感的にわかるようにエンドポイントを分けるようにする考え方だが、いろんなテーブルのデータを使いたいときに意外と不便。取ってきたデータを元にもう一回GETして、、、
一方で、GprahQLを使えばエンドポイントを一つにする代わりに、クエリをjsonのように扱えながらいろんなテーブルのデータを一発で取得することができる。

今回はそんなgraphQLとSQLを自動で変換してくれるHasuraというAPIサーバを使ってみました。

公式ドキュメント

https://hasura.io/docs/1.0/graphql/core/index.html

セットアップ

ゼロから始めるやり方は以下の二つ。

• Harura Cloud
• Docker

今回はDockerを使った例を示します。

1. 新しいディレクトリで以下のコマンドどちらかを実行してdocker-composeファイルを取得

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

# or
curl https://raw.githubusercontent.com/hasura/graphql-engine/stable/install-manifests/docker-compose/docker-compose.yaml -o docker-compose.yml

docker-composeの中身はこのようになっています。

docker-compose.yml

version: '3.6'
services:
  postgres:
    image: postgres:12
    restart: always
    volumes:
    - db_data:/var/lib/postgresql/data
    environment:
      POSTGRES_PASSWORD: postgrespassword
  graphql-engine:
    image: hasura/graphql-engine:v1.3.1
    ports:
    - "8080:8080"
    depends_on:
    - "postgres"
    restart: always
    environment:
      HASURA_GRAPHQL_DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
      ## enable the console served by server
      HASURA_GRAPHQL_ENABLE_CONSOLE: "true" # set to "false" to disable console
      ## enable debugging mode. It is recommended to disable this in production
      HASURA_GRAPHQL_DEV_MODE: "true"
      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:

2. 起動

特に変更する必要がなさそうならそのまま起動させます。

docker-compose up -d

3. Hasura コンソールを確認

うまく起動できていれば、http://localhost:8080/consoleで以下のような画面が表示されるはずです。

データを登録してクエリを投げる

1. テーブルの作成

早速、テーブルを作っていきます。
今回はgraphQLのすごさを実感するために、メインのテーブルとそのテーブルの子テーブルを作成します。(RESTならメインテーブルから取ってきたデータを元に新たにGETする必要があるが、graphQLは一発で取れるところがすごい)

1. 上部にあるDATAタブをクリック
2. Create Tableボタンをクリック
3. カラムを入力しましょう
4. 子テーブルも同様

2. テーブル間のリレーションの設定

1. Dataタブをクリック
2. 子テーブルを選択
3. Modifyタブをクリック
4. Foreign Keysで設定
5. 親テーブルを選択
6. Relationshipsタブをクリック
7. Table RelationshipsのArray relationshipsに先ほど子テーブルで追加した設定が反映されているはずなので、Addボタンをクリック
8. クエリの際に利用するparameter名を入力

3. クエリを投げる

最後にクエリを投げてデータを取得できるか確認してみましょう。
GRAPHIQLタブのページで実行。