kakakakakku blog

Weekly Tech Blog: Keep on Learning!

Hasura に入門するならまずこれ!Hasura のチュートリアル「Hasura GraphQL Tutorial」

Hasura に入門するために Hasura チュートリアル「Hasura GraphQL Tutorial」を実施した.Hasura の機能・便利さ・PostgreSQL との連携など,抑えておくべきポイントをしっかりと学べる👌また Hasura でリソースの CRUD (Create/Read/Update/Delete) 以上のビジネスロジックを構築するための仕組み(アクション・リモートスキーマ・イベントウェブフック)も学べる.すべて実施しようとするとそこそこボリュームがあるけど Hasura に入門するのに最適なコンテンツだった❗️日本語もある〜

hasura.io

hasura.io

だけど「30分で終わる」と書いてあるのはまったく当てにならなくて何かの間違いだと思う💨僕は考えながら進めてたというのはあるけど普通に3時間はかかったぞー🕐

How long will this tutorial take? Less than 30 mins.

もし GraphQL 自体の経験がなければ,その前に Hasura チュートリアル「GraphQL Basic」をやっておくと良いと思う.GraphQL Basic に関しては以下の記事で紹介した.

kakakakakku.hatenablog.com

TODO アプリケーション

今回 Hasura で構築する GraphQL バックエンドを使った TODO アプリケーションを以下から実際に試せる.チュートリアルを進める前に触っておくとイメージしやすくなると思う👌

learn-hasura-todo-app.netlify.com

GraphQL Tutorial App

Hasura Cloud

チュートリアルでは GraphQL バックエンドを Hasura Cloud に構築する.プロジェクトごとに GraphQL エンドポイントが提供される.GraphQL オペレーションを実行する GraphiQL が組み込まれているだけではなく,データベースを管理できたり,データベースに対して直接 SQL を実行できたり,アクション・リモートスキーマを管理できたりする.

hasura.io

PostgreSQL 連携

今回 GraphQL から接続する PostgreSQL データベースとして Hasura Cloud に統合されている Neon を使う.Hasura コンソールからワンクリックでデータベースができてしまってビックリした⚡ Hasura 以外にもモダンなサービスを組み合わせて体験できるのもこのチュートリアルの良いところだと思う❗️

neon.tech

hasura.io

テーブル操作

Hasura コンソールから users テーブルを作る.ちなみにスクリーンショットに載ってる Hasura プロジェクトは既に削除してるので GraphQL Endpoint には繋がらない✌️

aaa

すると,自動的にテーブルが認識されて GraphQL オペレーション(クエリ・ミューテーション・サブスクリプション)を実行できるようになる.以下はミューテーションで insert_users を実行している.

ミューテーションを実行する

もちろん Hasura コンソールからレコードを INSERT / UPDATE / DELETE することもできる👌

Hasura コンソールでデータを操作する

Relationship

GraphQL でネストクエリを実行するために Hasura には Relationship という設定がある.

hasura.io

PostgreSQL テーブルに外部キーを設定すれば,自動的に Relationship の提案が出てきて簡単に設定できるし(例えば todos.user_idusers.id など),手動で設定することもできる(例えば online_users.idusers.id など).

query {
  todos {
    id
    title
    user {
      id
      name
    }
  }
}

aaa

Permission

Hasura の Permission という設定を使うと細かくデータアクセスの権限管理ができる.表現自体は複雑に感じるし(慣れの問題かもしれない),設定項目も多く,ここまで柔軟に設定できるのはスゴイと思った.チュートリアルでは以下の条件が出てくる.

{"user_id":{"_eq":"X-Hasura-User-Id"}}
{"_or":[{"is_public":{"_eq":true}},{"user_id":{"_eq":"X-Hasura-User-Id"}}]}

aaa

以下は x-hasura-role: userx-hasura-user-id: 1 というヘッダーを付けてクエリを実行している👌

aaa

Auth0 連携

チュートリアルでは Auth0 と連携して,GraphQL バックエンドに認証の仕組みを追加できる.Auth0 で認証して,Authorization ヘッダーに Bearer トークンを載せてクエリを実行できる.このあたりは Auth0 自体に慣れていないと苦労するところもありそう💨あと Auth0 の Authentication API Debugger Extension を使って JWT をテストするところも試せて良かった.

ちなみにチュートリアルでは Auth0 の Rules 機能を使う手順になってるけど,現時点だと Auth0 で非推奨の警告が出ていた.今後は Actions 機能に移行する必要がありそうで,このあたりは今後チュートリアルも更新されるように思う.

auth0.com

ビジネスロジック

Hasura にはリソースの CRUD (Create/Read/Update/Delete) 以上のビジネスロジックを構築するための仕組みとして「アクション」「リモートスキーマ」「イベントトリガー」が使えて,例としては TODO を登録するときに "悪い" 言葉が使われていないかどうかバリデーションしたいというユースケースが紹介されていてわかりやすかった💡詳しくは以下のドキュメントに載っている🔗

hasura.io

hasura.io

hasura.io

チュートリアルでは Auth0 と連携して認証されたプロファイル情報を取得する例と,SendGrid と連携してアカウント登録時にメールを送信する仕組みを作る.今回は Auth0 のところまで試した❗️(SendGrid のところは手順を眺めるだけにした)ちなみにビジネスロジックは Glitch で Node.js アプリケーションを実行してて,Glitch も今まで使ったことがなくて新たな発見だった👀

glitch.com

まとめ

Hasura チュートリアル「Hasura GraphQL Tutorial」は Hasura スゴイ❗️と思える入門コンテンツだったー👏