LoginSignup
2
3

More than 1 year has passed since last update.

Hasuraでテーブルを作成しCRUDの操作までやるで(1/4)

Last updated at Posted at 2021-10-18

はじめに

以下のゴールを達成するため、本日は Hasuraの query と mutation を使った基本的な CRUDの操作をやります。

最終的なゴール

以下のような構成のアプリを作ることです。

スクリーンショット 2021-10-18 17.27.41.png

目的

  • 仕事で使っている技術のキャッチアップと復習
  • 使う可能性がある技術の理解度向上

Hasuraとは

英語ですが、詳しくは👆のDocsを見るのがいいです。

でも、簡単に言うと、PostgreSQLからGraphQL APIサーバーを自動で構築するものです。

(最近 MySQLにも対応したらしい

公式の以下図の通り、DB、SQLとGraphQLのAPIを使うクライントとの間に入ってやりとりを相互変換してくれるやつです。

公式の図

あと、テーブル構造や外部キーから自動でSchemaを構築できるそうです。

Hasura Cloud からアカウント作成

自分はアカウントが無いので、そこからやります。

Hasura_Cloud___Fully_managed_GraphQL_API_as_a_Service.png

githubのアカウントはあるので、それを使ってアカウント作成します。

Login___Signup_-_Hasura_Cloud.png

スクリーンショット 2021-10-18 18.04.37.png

スクリーンショット 2021-10-18 18.05.42.png

スクリーンショット 2021-10-18 18.06.21.png

スクリーンショット 2021-10-18 18.06.34.png

スクリーンショット 2021-10-18 18.06.43.png

Hasura GraphQL Engineは、さまざまなデータソースに接続し、リアルタイムのGraphQL APIを即座に生成します。
あなたのプロジェクトの準備完了

だって。

スクリーンショット_2021-10-18_18_11_20.png

admin secret というのがよくわからず、したの矢印の通りログイン

ログインしたら、「はじめかた」の動画資料がありました。

これを見ながら、Hasura の query と mutation を使った基本的な CRUDの操作ができるまでやろうと思います。

Heroku上にDBを作成する

以下にアクセスしましょう。

githubなどで、認証が通っていれば、以下のようなProject一覧が出てくるかと思います。

Projects_-_Hasura_Cloud.png

では、「New Project」をクリックしましょう。

  • plan は Free Tier
  • region は 無料であればなんでもいいです
  • project name も なんでもいいです
  • Create Free Project しましょう

スクリーンショット 2021-10-18 18.29.19.png

すると、下記のような画面になると思います。

ryosuketter-hasura-test_-_Projects_-_Hasura_Cloud.png

「Env vars」のところを見に行くと、2つの環境変数が自動で生成されていることがわかります。

ryosuketter-hasura-test_-_Projects_-_Hasura_Cloud.png

もし、 「HASURA_GRAPHQL_ADMIN_SECRET」が自動生成されていたら、消しておきましょう。

ryosuketter-hasura-test_-_Projects_-_Hasura_Cloud.png

ryosuketter-hasura-test_-_Projects_-_Hasura_Cloud.png

そこまでできたら、「Launch Console」しましょう。

僕がやったら、エラー画面が出ましたが、再度「Launch Console」したら以下の画面がでました。

Hasura consoleに来ましたね。

API_Explorer___Hasura.png

次は、「Data」のタブをクリックします。

今回はHeroku製の無料のDBを作りたいので、「Create Heroku Database」します。

Connect_Existing_Database_-_Hasura.png

Herokuのアイコンをクリックすると、アカウントの連携画面がでるので、連携すると、Heroku 上に DBができたっぽい。

スクリーンショット 2021-10-18 18.48.30.png

サイドバーにある、default > public から 「Create Table」するとテーブルを作ることができます。

次回以降見ていきましょう。

アウトプット100本ノック実施中

2
3
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
2
3