Hasura公式の「nextjs-fullstack-serverless」コースでのハマり所（2021.10.24 時点）
fujiten
hasuraを利用したGraphQLサーバー作成や、それとNext.jsとの統合やAuth0での権限管理などについて学べて有用なコースなのですが、何点かハマりどころがあったのでメモしておきます。
fujitenはじめに
まずは、こっちのコースからやった方がいいと思う。というのも、最初に説明したコースでは、hasura上で作成したテーブルへのCRUD処理に関する権限周りの説明が存在しないのだが、実際はその処理を行わないとうまくコースを進めることができない。予備知識なしで気付くのは難しいので、予習しておいた方がいいはず。
fujiten画面左のモーダルの項ごとにスクラップ１つ作って行きます。（ハマりどころがない項は飛ばす）
下の画像でいう、Course Introduction などがある左の部分のことです。
fujitenHasura Backend Setup
hasura metadata apply --admin-secret xxxx
hasura migrate apply --database-name default --admin-secret xxxx
hasura metadata reload --admin-secret xxxx
この xxxx には、Hasuraプロジェクトの「Admin Secret」を入力する。
https://cloud.hasura.io/project/ で、自分のプロジェクトを確認すればOK。
fujitenAuth0 Setup
記事の最後に "Also make sure to add http://localhost:3000 to the list of Allowed Logout URLs." の英文があるのを読み飛ばさないように。
（Logout許可URLに、URLを追加するのを忘れないで！ の意）
fujitenCustom Claims in Auth0 Rules
Rulesを作れと言われるがなんのことやら…なので調べた。[1]
Auth0 Rules とは、ユーザーがアプリケーションを認証したときに実行される JavaScript 関数で、認証プロセスが完了すると実行されます。ルールに関しては、カスタマイズ/拡張することができます。
つまりは、Auth0を利用したログインをしたときに、毎回設定した関数が走る。
-
【Auth0 Rules】 ログイン認証のルールを超簡単に設定！（with React サンプル） https://dev.classmethod.jp/articles/react-auth0-rules/ ↩︎
fujitenMutations & Query variables
このあたりから、基本コードそのままでは通らなくなる。
さきほどこのスクラップの「はじめに」で紹介した記事を参考に「User Role」というRoleを作成してそのRoleにCRUD処理権限を与えてあげたり、テーブル同志の外部キーの設定を加えてあげると上手く動作したりします
fujitenMutation and update cache
以下のコードで、React Devtoolsによる警告をもらう。
const toggleTodo = () => {
toggleTodoMutation({
variables: {id: todo.id, isCompleted: !todo.is_completed},
optimisticResponse: true,
});
};
こういう警告。
理由は、optimisticResponseというキーに渡してるバリューのせいである。
optimisticResponse（楽観的レスポンス）に渡す値は「GraphQLとの通信が成功したときに期待するレスポンスにもとづく値」でなければならない。
以下のような値である。
{
"update_todos": {
"affected_rows": 1,
"returning": [
{
"id": todo.id,
"is_completed": !todo.is_completed,
"title": todo.title,
},
],
__typename: todo.__typename
}
},
こうすることで、エラーがなくなり、UIの反応がより早く、直感的になる。（Twitterでいう、いいねボタンを押したとき、サーバーからの返答を待たずにハートマークがつくように。）
詳しくは以下。
fujiten以上です。
ほかにもちょくちょく「あらかじめhasuraとGraphQLについてちょっと知ってるよね？」という前提のもと話してる箇所もあるので、あまりにも詰まったら一旦このコース自体飛ばして別の教材で学習するのもありかな、と。