refineで作成したサンプルwebアプリをAuth0とHasuraを使って動かす

やりたいこと

たまたま見つけた refine を使って何かを作ってみたい。
とりあえず起動して意図したデータを保存・表示できればいいかなと思ってます。

使うツールなど

基本的には refine 公式ページの「Try it in your browser」から指定できるものを使う。

• vite
• headless ui
• Hasura
  • DBはNEON(postgresql）
    • Freeで使える！
  • Freeで使える！
• Auth0
  • Freeで使える！

とりあえず環境を整える

必要なサービスにユーザ登録

• Hasura
• Auth0

Hasura でprojectを作成する

• apiとして作成
• DBを追加
  • web画面で操作できるのでrefineのデフォルトのテーブルを作る（カラムなどは省略）
    • blog_posts
    • categories
  • データも何行か追加（これもWEBでできるの簡単に試すにはいい！！）

Auth0

開発用のapplicationを作成する

• Application Properties
  • Single Page Applicationとして作成
• Application URIs
  
• Advanced Settings で Authorization Code がチェックされちることを必ず確認すること！（これが設定されてなくて全然繋がらなかった）
  

web側の設定変更

• src/index.tsx に記載されている情報を変更
  • API_URL
    • https://hogehoge.hasura.app/v1/graphql
  • WS_URL
    • wss://hogehoge.hasura.app/v1/graphql
    • デフォルトで設定されているのは ws だったが wss に変更する
  • GraphQLGraphQLClientのheaderで設定している以下の設定をhasuraのものに変更する
    • x-hasura-admin-secret