Zenn
🔖

Hasura GraphQL Engine を紹介する

2020/10/01に公開
GraphQL
hasura
tech

Hasura GraphQL Engine は RDB を GraphQL API でアクセスできるようにしてくれる高速なサーバーです。最近シリーズ B で$25M（日本円だと 26 億円くらい？）を獲得した、超イケイケのスタートアップである Hasura 社が開発しています。

この記事ではそんなイケてる Hasura GraphQL Engine で、RDBにテーブルを作成して、GraphQL でデータの登録や取得ができるところまでを紹介します。

先日 MySQL にも対応したらしいですが、今のところ PostgreSQL での資料ばかりなのでこの記事でもいったん PostgreSQL 前提で解説します。

また、この記事では docker-compose を使うため、docker-compose が使えるように準備しておいてください。

※この記事は9/27時点の v1.3.2 で書かれています。バージョンアップによって Hasura コンソールのスクショなどが異なるものになっているかもしれません。ご注意ください。

※この記事は、技術書典9で頒布した実践プロトタイピング 〜Webフロントエンド＆バックエンドでプロトタイピング〜から一部抜粋しています。

Hasura GraphQL Engine とは

Hasura GraphQL Engine そのものは Haskell で書かれた OSS のサーバーです。また、JavaScript/TypeScript 界隈のプロダクトと比べて、よくあるプラグインによる拡張機能を持たず、ブラックボックスに近いところはあります。

基本的には、RDB のデータをいい感じに GraphQL API にしてくれる専用のサーバーだと考えればいいでしょう[1]。

Hasura GraphQL Engine は、RDB（PostgreSQL or MySQL）のテーブル構造（RDB スキーマ定義）を元に GraphQL API を提供するというコア機能の他に、Hasura の設定や RDB のテーブル・データ操作を行える GUI コンソールも持っています。

動かすためには、ローカルで動かす、Heroku にデプロイして動かす、クラウド版を使うなどの選択肢があるようですが、ここではローカルで動かす前提で説明します。

セットアップ

docker-compose でセットアップするために docker-compose.yaml をダウンロードします。

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

※マイグレーションの事を考えると、ここから一手間かけなければいけませんが、この記事ではいったんマイグレーションのことは忘れます。

ダウンロードしたら docker-compose.yaml があるディレクトリで docker-compose up あるいは docker-compose up -d で、Hasura GraphQL Engine と PostgreSQL を起動します。

8080番ポートを使用するため、ポートを空けて置いてください。

Hasura Console

http://localhost:8080 で Hasura Console にアクセスできます。

テーブルを作成する

画面上部にある DATA タブで、テーブル操作が可能です。

DATAタブ

Create Tableボタンを押すとテーブル作成できます。

テーブル作成

Table Name には、テーブル名を入力します。ここでは authors と入れます。

次にカラムの追加ですが、Hasura コンソールでは、id や created_at などよく使われるタイプのカラムを簡単に登録するためのボタンが用意されています。

+Frequently used columns ボタンを押すといくつかのプリセット（v1.3.2では5種類）が出てきます。

Frequently used columns

ここでは UUID を使いましょう。

UUID選択後

あとは、カラム名 name で Text 型のカラムも追加しておきましょう。

ここまで入力したら、画面の一番下にスクロールして Add Table ボタンを押しましょう。

これでテーブルが作成されて、このテーブルに、GraphQL でアクセスできるようになっています。

作成したテーブルにデータを入れる

画面上部の GRAPHIQL タブをクリックして、GraphiQL の画面にアクセスします。GraphQL を触っているひとならおなじみであろう GraphQL を即座に試せるプレイグラウンドツールの定番 GraphiQL です。ちなみに Graph と QL の間に i が入っています。

mutation {
  insert_authors(objects: [{name: "hoge"}]) {
    affected_rows
  }
}

GraphQL では更新系は mutation と呼びます。先ほど authors というテーブルを作成したので、Hasura GraphQL Engine が気を利かせてくれてinsert_authors という mutation で、カラムの追加ができるようになっています。

カラムの追加に成功

さて、こんどは authors テーブルを取得してみましょう。GraphQL ではデータを取得するのは query です。

query {
  authors {
    id
    name
  }
}

取得できました

取得したデータは

{
  "data": {
    "authors": [
      {
        "id": "ac18d3df-d14b-4ee1-8a08-c7172845913e",
        "name": "hoge"
      }
    ]
  }
}

という形式です。

自動生成される query 及び mutation に関しては、Hasura のドキュメントをご覧ください。かなり多彩です。

Hasura GraphQL Engine が RDB に GraphQL API としてアクセスできるようにしてくれるステキプロダクトだということはここまでで分かったと思いますが、次は複数のテーブルをリレーションさせてみましょう。

もう一つテーブルを作る

再び、DATA タブから Create Table します。

articlesテーブル

Table Nameは articles とします。

  • id を authors テーブルと同じ UUID primary key で作る
  • subject を Text 型で作る
  • content を Text 型で作る
  • author_id を UUID 型で作る

このあと、Foreign Keys を設定します。まず Add a foreign key ボタンを押します。

References Table に authors を指定、From に author_id を、To に id を指定します。

これらを設定したら Save ボタンを押します。

そのあとは画面下の Add Table でテーブルを作成します。

リレーションを作成する

Browse Rows Inser Row Modify Relationships Permissions などのタブのうち、Relationships をクリックして、リレーションを作成しましょう。

リレーション

テーブル作成時の foreign keys を参考にして、Suggested Object Relationships として、articles.author_id は authors.id にリレーションが張れるんじゃないか？とサジェストしてくれます。

意図と合致しているので Add ボタンを押しましょう。

author という名前でリレーションを張っていいか？と問われるので、Save ボタンを押しましょう。

ちなみにここでいうリレーションとは、GraphQL のリソースを結合するためのものです。

リレーション作成済み

これでリレーションが作成できました。さて、articles つまり記事を追加してみましょう。

記事を追加してみよう

先ほどの authors （著者）のIDが必要になります。"ac18d3df-d14b-4ee1-8a08-c7172845913e" でした。このUUIDはランダムに生成されるため、皆さんが試すと異なる ID になっているはずです。

mutation {
  insert_articles_one(object: {subject: "ほげ", content: "Hasura GraphQL Engine すごい！", author_id: "ac18d3df-d14b-4ee1-8a08-c7172845913e"}) {
    id
  }
}

今度は insert_articles_one という、1カラムだけ挿入する mutation を使いました。

記事を追加

さて、ここからが GraphQL の本領発揮です。

REST 思想ではリソースごとにエントリポイントが異なり、異なるリソースを取得するためには、複数回APIアクセスが必要でした。

GraphQL では一括で取得が可能です。

query {
  articles {
    id
    subject
    content
    author {
      id
      name
    }
  }
}

記事のID、題名、本文と、著者IDだけではなくて、著者の名前も一緒に取得できています。

RDB のテーブルを作成しリレーションを張るだけで、こういった強力な GraphQL API がすぐさま利用できます。

Hasura GraphQL Engine は未来の可能性を秘めたステキなプロダクトです。よかったら試してみてください。

脚注

  1. 頑張れば色々と複雑なこともできますが、筆者のごく個人的な感想をいえば、そうやって頑張るとローカルな知見ばかり溜まって、技術的負債になりやすいと感じます。ただし、将来的にどうなるかは未知数です。もっといい感じの仕組みを採用しているかもしれません。 ↩︎

Discussion