こちらの記事は前回の続きとなる。まずはそちらから確認していただくことをお勧めする。
今回はSupabaseの設定を画像付きで解説していこう。 文字数は少ないが画像の差し込みが頻繁な故、ボリュームのある記事になることだろう。それでは目次からだ
今回はsupabaseのデータベースAPIのみ使うが、supabaseでは認証機能や、ストレージ機能も搭載している。Auth0よりも学習コストは少なく認証機能を実装できるので、サクッと作りたければsupabaseの認証APIを使うと良いだろう。しかしその際はprofilesテーブルを別で作成すると良いだろう。
プロジェクトの立ち上げ
まずはSupabaseのプロジェクトの立ち上げから始めよう。 画像に従って進めていってほしい。 2021/08/08 時点での最新のUIでナビゲーションしていく
「Name」には任意で決めるプロジェクト名を入力しよう。
「Database Password」には任意で決めるパスワードを入力しよう。これは後ほどHasura Cloudとの接続で使用するため必ずどこかに控えておこう。
「Region」には東京を指定しよう。これは最近東京対応されたので是非ともこの設定にしていただきたい。
一通り入力が終わったら、右下の「Create new project」をクリックしよう。
すると...
しばらく(2分ほど)待っているとプロジェクトの立ち上げに成功する。
このような表示がされると成功だ！！
続いて各テーブルの設定に入ろう。
chatRoomsテーブル作成
table editerに移動してテーブルを新規作成しよう。
「Name」にはテーブル名を入力しよう。
「Description」には任意でテーブルの詳細文を入力しよう。
「Type」にはIDの型をセレクトする。今回は永続的な一意性を持たせられるuuidを選択する。
入力が完了したら、「Save」をクリックだ！
続いて各カラムの設定を行う。
name
先ほどテーブル設定した要領で入力していく。 「Type」にはtextを選択する。これはいわゆる、String型に当たるものだ。
createrId
「Type」にはtextを選択する。Auth0のuserIdをこれに当てるためこちらに設定する。
createdAt
「Type」にはtextを選択する。フロント側でISOStringに変換してからPOSTするためである。
updatedAt
「Type」にはtextを選択する。理由はcreatedAt同様だ。
ひとまずこれでchatRoomsテーブルの設定は完了だ。続いてmessagesテーブルの設定に入ろう。
その前にchatRoomsのサンプルデータを作成しておこう。
緑の「Insert row」をクリックしてサンプルデータを作成しよう。サンプルデータを作成しておかないと後のmessagesテーブルやparticipantsテーブルを作成する際にkeyが見つからず、エラーとなってしまうので気をつけよう。
messagesテーブル作成
テーブル作成はchatRooms同様だ。
では続いてカラムの設定だ。
roomId
先ほど作成したchatRoomsに紐付けるため、「Type」にはuuid型を選択する。 続いてフォームの一番下にある「Add forign key relational」をクリックしてchatRoomsのidを選択して「Save」をクリックだ！
userId
こちらもAuth0のuserIdをそのまま使用するので、text型にする。
text
こちらも文字列のみ入力させるのでtext型にする。editar等を使用する際にも使える。
createdAt
こちらもフロントでISOstringを使用する為、text型にする。
subMessages
「Type」にはJSON型を選択する。null許可せずに空の配列を初期値として設定する。
ちなみにsupabaseでJSONデータの値を編集する際は下記の画像のように、直接JSONデータを叩くことができる。
これでmessagesテーブルの設定は終了だ。
participantsテーブル作成
最後にparticipants(チャットルームの参加者)テーブルを作成していく。
roomId
messagesの時同様にchatRoomsのIDと紐づけるためuuidを使用する。
userId
Auth0のuserIDを使用する為、text型にする。
createdAt
フロントでISOstringに変換するためtext型にする。
これでparticipantsテーブルの設定も完了だ。
終わりに
今回はここまでだ。 ここまでsupabaseの設定を終えていればあとはHasura Cloudにバトンタッチすることができる。
次回の記事ではHasura Cloudの設定の前に面倒なAuth0の設定を綴っていこうとおもう。
今回の記事で不明点や疑問点があれば下記のコメントに残していただきたい。可能な範囲でスレッドも皆様に共有していきたいので！
