🎉

Hasura でお手軽 GraphQL 1

4 min read

GraphQL を始めるとき、自分のような普段 Web フロントエンドを主に触っている人が GraphQL サーバを用意するのは、なかなか大変だと思います。

そんな時に便利なのが、いわゆるサーバレスのプラットフォームですよね。

Firebase や MongoDB などがよく聞かれますが、今回は Hasura というオープンソースのエンジンについて触る機会があったので、Hasura の導入から、簡単な TODO アプリ作成までをご紹介します。

Hasura について

Hasura 公式サイト( https://hasura.io/ )によると、

Hasura is an open source high performance engine for creating secure GraphQL APIs within minutes from your databases and data sources. Fully managed on Hasura Cloud or self-hosted.

と書いてあり、GraphQL API に特化したエンジンであることが読み取れます。マネージドな Hasura Cloud とセルフホスト形式があるようです。

Hasura へのアカウント登録とログイン

公式 GET STARTED 的なところを押してアカウントを作ります。

New Project を押して、Create Project というサイドバーから新しいプロジェクトを追加します。

Project setup

Project setup タブで、無料枠である Free Tier を選び、リージョンを無料枠で使えるものの中から選びます。

Continue to Database Setup のボタンを押すと、Database setup タブに移ります。

Database Setup 1

自前で用意した DB を接続できるようですが、簡単に試したいので Try with Heroku で Heroku を選択します。

Database Setup 2

ものの数秒で、Heroku 側で自動で新しいアプリを作成してくれます。Heroku アカウントを持っていない方は、ここでアカウント登録の画面に移ると思います。

最下部の Create Project ボタンが活性化されるので、押下すると設定確認画面に移ります。1 分以内にセットアップが完了し、右上の Launch Console ボタンが活性化されますので、押します。

Hasura Console 1

Hasura console が別タブで開きます。

テーブルの作成

Hasura console 上の DATA タブをクリックして、Create Table ボタンからテーブルの作成を行います。

Create Table

ここでは、「todos」という名前にして、id, text, done という 3 種類のカラムを次のように用意します。

value type default value
id UUID gen_random_uuid()
text text
done boolean false

Add Table ボタンを押下してテーブルが作成できました。

GraphQL クエリの実行

GRAPHIQL タブをクリックすると、先ほど作成したテーブル名に従って、左の Explorer で実行可能なクエリを生成してくれるメソッドが現れます。

GraphiQL という部分が、GraphQL の処理を行う GUI です。

チェックボタンで選択をしていくと、自動でクエリを作成してくれます。

Query

  • TODO 一覧を取得する:getTodos
query getTodos {
  todos {
    id
    text
    done
  }
}

GraphiQL 上での実行結果

Execute getTodos query

Mutation

左下の選択メニューから、Query, Mutation, Subscription を選べるので、必要に応じて選択して「+」ボタンをすると、実行可能で使いそうなメソッド一覧を表示してくれます。

今回は以下の用途で Mutation を作成して実行しました。

同じ要領で、Mutation の中で必要なフィールドをチェックしていき、所望の Mutation を書きます。

  • TODO を追加する:addTodo
# GraphiQL上で実行するクエリの一例
mutation addTodo {
  insert_todos(objects: { text: "apple" }) {
    returning {
      done
      id
      text
    }
  }
}

# 変数で書く場合
mutation addTodo($text: String!) {
  insert_todos(objects: { text: $text }) {
    returning {
      done
      id
      text
    }
  }
}
  • TODO をチェックする:toggleTodo
# GraphiQL上で実行するクエリの一例
mutation toggleTodo {
  update_todos(where: { id: { _eq: "asdf1234" } }, _set: { done: true }) {
    returning {
      done
      id
      text
    }
  }
}

# 変数で書く場合
mutation toggleTodo($id: uuid!, $done: Boolean!) {
  update_todos(where: { id: { _eq: $id } }, _set: { done: $done }) {
    returning {
      done
      id
      text
    }
  }
}
  • TODO を削除する:deleteTodo
# GraphiQL上で実行するクエリの一例
mutation deleteTodos {
  delete_todos(where: { id: { _eq: "asdf1234" } }) {
    returning {
      done
      id
      text
    }
  }
}

# 変数で書く場合
mutation deleteTodos($id: uuid!) {
  delete_todos(where: { id: { _eq: $id } }) {
    returning {
      done
      id
      text
    }
  }
}

一通り API の疎通確認ができたら、次は API アクセスキーを発行して、アクセスコントロールを行います。

API アクセスキーの確認と使用

上記で生成したエンドポイント(GraphQL API)には、アクセスを許可していない限り、API アクセスキーを用いてアクセスをする必要があります。

API アクセスキーがデフォルトで生成されているのかは定かではありませんが、HASURA CLOUD のプロジェクト一覧の管理画面から確認または生成することができます。

HASURA CLOUD

Admin Secret と書いてあるところが API アクセスキーで、後に API サーバとやり取りを行うときに使います。

まとめ

今回は Hasura でお手軽にテーブルを定義して API サーバを立てるところまで行いました。

次の投稿では、React + Apollo Client で、CRUD 処理をしてみます。

※後編も書きました。

https://zenn.dev/mrsung/articles/0c27b767060fec