LoginSignup
1
1

More than 1 year has passed since last update.

【HASURA】チュートリアルをやってみた

Posted at

はじめに

Hasuraは、承認とアクセス制御があるCRUD + リアルタイムGraphQL APIを提供します。

このコースでは、HasuraによるGraphQLバックエンドの設定について簡潔に紹介します。
30分で、クエリ、ミューテーション、サブスクリプションを備えた強力でスケーラブルなリアルタイムGraphQLバックエンドを設定します。また、Hasuraが、ユーザーが書いたカスタムGraphQL APIsとして、また非同期で実行されてデータベースイベントによってトリガーされるイベントトリガーとして、カスタムビジネスロジック(任意のプログラミング言語)の統合にどのように役立つかを学びます。

こちらのチュートリアルをやってみます
30分で終わると書いてありますが、さてどうでしょうか?

内容

Hasuraを使ってPostgresデータベースを活用したリアルタイムGraphQL APIを生成します。

Hasuraをデプロイ

アカウントを作成しプロジェクトを作成

データモデリング

データベース接続
  • 既存のデータベースへの接続
  • 新しくHerokuデータベースを作成する(無料)

ということなのでHerokuを使っていきます

テーブルを作成する

スクリーンショット 2022-06-22 1.12.00.png

GraphQL APIを使ってみる

スクリーンショット 2022-06-22 1.17.57.png
スクリーンショット 2022-06-22 1.18.25.png

リレーションシップ

外部キーを作成

スクリーンショット 2022-06-22 1.45.56.png

リレーションシップを作成

外部キー制約が作成されたため、Hasuraコンソールがそれに基づき自動的にリレーションシップを提案してくれる
スクリーンショット 2022-06-22 1.47.33.png

リレーションシップクエリを試す

スクリーンショット 2022-06-22 1.51.16.png

データ変換

PostgreSQL Viewの作成

ビューを作成するとクエリに名前が付けられ、通常のテーブルから行うのと同じように、このビューからSELECTを実行できるようになります。

スクリーンショット 2022-06-22 2.04.06.png

オンラインユーザーへのサブスクリプション

過去30秒にログインしオンラインになっているユーザーをアプリが検索するビューを追加して、Hasuraでビューを追跡して、クエリできるようにする
スクリーンショット 2022-06-22 2.05.32.png
スクリーンショット 2022-06-22 2.06.41.png

ユーザーへのリレーションシップを作成

ビューが作成されたら、ビューの id 列に基づいて、ユーザー情報を取得できるようにする方法が必要です。ビューの id column を使って、ビュー online_users からテーブル users への手動のリレーションシップを作成しましょう。
リレーションシップのタイプを Object Relationship にすることにより、手動で新しいリレーションシップを追加します。リレーションシップ名を user として入力します。現在の列の設定を id として選択すると、リモートテーブルは users になり、リモート列は再度 id になります。

スクリーンショット 2022-06-22 2.13.30.png

承認

テーブル権限を設定する

テーブルの各処理(insert, select, update, delete)に対して権限を設定していく
例えば、user_Idの値がセッションのUser_Idと一致している場合のみ処理を許可など

セッション変数は、各要求の認証サービスから返されるキーと値のペアです。ユーザーが要求すると、セッショントークンは USER-ID にマッピングされます。この USER-ID は許可で使用され、user_id 列にセッション変数 USER-ID の値に等しい値がある場合にのみ、テーブルへの挿入が許可されることを示すことができます。

スクリーンショット 2022-06-22 9.20.42.png
スクリーンショット 2022-06-22 9.30.04.png
スクリーンショット 2022-06-22 9.43.55.png

設定した権限の有効性を試す

Request headerにroleuser-idを指定することで
権限次第で結果がフィルタリングされる
スクリーンショット 2022-06-23 9.00.38.png

認証

ここでは認証プラットフォームのAuth0を使います

ダッシュボードからAppとAPIを作成していきます

JWTルールを設定(JSON Web Token)
スクリーンショット 2022-06-23 12.53.02.png

HasuraをAuth0に接続する

HasuraがAuth0公開鍵を使用するように設定する必要があります。JWTの設定を生成する簡単な方法は、このリンクを使用することです。
HASURA_GRAPHQL_JWT_SECRET という新しい Config Varを追加して、生成されたJWT設定を値ボックスにコピーアンドペーストします。
これでHasuraインスタンスがAuth0を使って保護されます。

スクリーンショット 2022-06-23 16.01.28.png

Rulesでユーザーを同期する

Auth0におけるルールを設定して、Auth0のユーザーがデータベース内のユーザーと同期できるようにする必要があります。
このルールは、サインアップまたはログインが成功するたびにトリガーされます。そして、Hasura GraphQLミューテーションを使用して、ユーザーデータをデータベースに挿入または、更新します。

スクリーンショット 2022-06-23 16.14.37.png

Auth0トークンで試す

認証が正常に動くか確認できる
正常にログインの動きが確認できて、HasuraのDBのuserテーブルに新規ユーザが登録されていれば完了

スクリーンショット 2022-06-23 16.16.44.png

カスタムビジネスロジック

アプリにカスタム/ビジネスロジックを追加したい場合

例えば、構築中のtodoアプリで、公開フィードにtodoを挿入する前に、テキストに不適切な表現が含まれていないかを検証したい場合などです。

に使えてとても便利そうですが、必須ではなさそうなので、今回はここまで

おわりに

30分では終わりませんでした。2時間ぐらいかかりました😅

最終的にiOSアプリの認証とデータ管理までやりたいので、引き続きやっていきます〜

(記事ではなく、ただの作業メモとなりました...)

参考

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1