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

## はじめに

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

## 最終的なゴール

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

![スクリーンショット 2021-10-18 17.27.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/e8a9a2e1-2723-4fec-77ef-be3b9eefdd81.png)

### 目的

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

## Hasuraとは

https://hasura.io/

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

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

（最近 [MySQLにも対応したらしい](https://www.globenewswire.com/news-release/2020/09/08/2090277/0/en/Hasura-Brings-Instant-GraphQL-to-MySQL-and-SQL-Server-for-Rapid-API-Development-to-Unlock-Siloed-Data-Raises-25-Million-in-Series-B.html)）

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

![公式の図](https://camo.qiitausercontent.com/ac323890a544609054ca11949a67bfba6c0b16f1/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3131343339362f65313734373461662d356635622d316538372d643433382d6532623464636163626239392e676966)

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

## Hasura Cloud からアカウント作成

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

![Hasura_Cloud___Fully_managed_GraphQL_API_as_a_Service.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/d500ae4f-5506-ec27-dd41-72197f81a4b3.png)

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

![Login___Signup_-_Hasura_Cloud.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/8d260e53-6b5b-1bca-40f0-6809d433b97a.png)

![スクリーンショット 2021-10-18 18.04.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/60fa65e9-e4ee-da07-7792-bd6800b614fb.png)

![スクリーンショット 2021-10-18 18.05.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/303b5686-94a0-db38-8832-3174939c56a1.png)

![スクリーンショット 2021-10-18 18.06.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/9c7a7eee-80f6-b4a4-03f1-303cc5499dbd.png)

![スクリーンショット 2021-10-18 18.06.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/9cbd93f4-6549-ed20-7ffb-819e036375fd.png)

![スクリーンショット 2021-10-18 18.06.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/3fae7774-3133-6e66-7b9f-dab28a0fb2d2.png)

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

だって。

![スクリーンショット_2021-10-18_18_11_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/d2a51b6b-9d47-2b2b-16fc-6274cfad5f69.png)

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

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

https://www.youtube.com/watch?v=ZGKQ0U18USU

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

## Heroku上にDBを作成する

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

https://cloud.hasura.io/projects

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

![Projects_-_Hasura_Cloud.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/462db95b-70f0-8393-2638-ff7ae1c67030.png)

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

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

![スクリーンショット 2021-10-18 18.29.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/68db41cc-a6d5-9eea-765e-8663dd2f03ed.png)

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

![ryosuketter-hasura-test_-_Projects_-_Hasura_Cloud.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/fc81994d-c335-c0b3-7571-7ae8f219b0b6.png)

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

![ryosuketter-hasura-test_-_Projects_-_Hasura_Cloud.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/4659ae67-a046-dcc9-536d-a1306bbb4733.png)

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

![ryosuketter-hasura-test_-_Projects_-_Hasura_Cloud.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/ae7971bb-3ca8-f932-cd96-c4fd74bcea11.png)

![ryosuketter-hasura-test_-_Projects_-_Hasura_Cloud.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/1c6719b8-45ea-6b0d-3816-95760ca511e2.png)

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

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

Hasura consoleに来ましたね。

![API_Explorer___Hasura.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/95f44cc8-a476-3f9c-4431-2fc988cdd23b.png)

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

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

![Connect_Existing_Database_-_Hasura.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/8faede12-7396-ee00-ce5e-04a11d37ad7b.png)

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

![スクリーンショット 2021-10-18 18.48.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/9a04b700-7095-a83e-fc26-2cf211f11061.png)

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

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

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

https://qiita.com/ryosuketter/items/713474dbd009870e4103