Hasuraを使ってReactでTodoアプリをサクッと作ろう Hasura編

はじめまして。
WASD Inc. で開発をしている Yutorin です。
よろしくお願いします。

弊社のデジちゃいむでも採用しているHasuraとReactを使ってサクッとTODOアプリを作ってみましょう。
今回はHasuraを使ってみるところまで紹介します。

なお、この記事はNode.jsYarnをインストール済みであることを前提に進めます。




目次


Hasuraってなに?

HasuraはPostgreSQL (MySQLSQL Serverも対応しています) のテーブルから、GraphQLのAPIを自動で生成してくれる便利なミドルウェアです。
リッチなダッシュボードや、JWTベースの認証・認可など便利な機能がいろいろあり、超ハイスピードで開発ができます。


Hasuraの導入

まずはHasura本体を導入していきます。

好きなフォルダ上で以下のコマンドを実行して下さい。
または github から直接 docker-compose.yml をダウンロードできます。

curl https://raw.githubusercontent.com/hasura/graphql-engine/stable/install-manifests/docker-compose/docker-compose.yaml -o docker-compose.yml

もしDockerが未導入の場合は、Docker Desktopからインストールして下さい。




ダウンロードした docker-compose.yml がある場所で

docker compose up

をするとビルドが始まり、HasuraとPostgreSQLが立ち上がります。

なお、Dockerを立ち上げる際に勝手に立ち上がってしまうため、docker-compose.yml 内の 5行目、16行目の restart: always# をつけてコメントアウトするのをおすすめします。

ブラウザ上で localhost:8080 を開くと、Hasura Consoleに入ることができます。

f:id:yutorinx:20210615185150p:plain
Hasura Consoleです。DBに関わることはここから自由に行なえます


TODOテーブルを作る

上部のDATAをクリックし、開いた画面でCreate Tableをクリックし、 まずはTODOを入れる todo テーブルを作りましょう。

f:id:yutorinx:20210615190852p:plain

画像のように、id, created_at, name を追加し、一番下のAdd Tableをクリックします。
idとcreated_atはColumnsの一番下にある + Frequently used columns を使うと楽です。

f:id:yutorinx:20210615191920p:plain
todoテーブルができました。テーブルの内容はModify内でいつでもいじることができます。


データを入れる

Insert Row

Insert Rowをクリックした画面でテーブルにデータを入れることができます。
idとcreated_atはそのままで自動挿入されるので、 name にTODOを入れます。
Saveを押すと追加されるので、いくつか入れていきます。

入れたものはBrowse Rowsから見ることができます。


GraphQLを叩いてみる

実際にフロントエンドからDBを見に行く際にどんなGraphQLクエリを叩くかとりあえず試してみたいですよね
そのためにGraphiQLがあります。

Hasuraを開いた時に表示されていた最初のページ (GraphiQL) を見てください。

f:id:yutorinx:20210618124153p:plain
ここでGraphQLクエリを試せます

真ん中でGraphQLクエリを入力すると試すことができますが、まずは左側を見てください。
Explorerの中にさきほど追加したtodoが追加されています。
todo をクリックすると、色々展開されます。

先ほど追加したカラムにポチポチとチェックを入れると、真ん中のエディタ内で勝手にGraphQLクエリが生成されます。
そして上にある再生ボタン(▶)を押すと、クエリが走り、入れたデータが取得できます。

f:id:yutorinx:20210618124742p:plain
エディタを手打ちしてもいい感じに型支援してくれます

これで動くことが確認できました。


あとがき

今回はHasuraを導入し、DB定義をして、クエリを実際に使ってみるところまでを行いました。
これだけでデータベースやバックエンド、GraphQLエンドポイントを手軽に作成することができます。
基本的な部分のみの紹介をしましたが、リレーションやクエリを自分で作るActionsなど、Hasuraを使うことの真価はまだまだあります。




次回はReactとReactで使うのに便利なGraphQL Code Generatorについて書く予定です。

よければ開発チームの他の記事も読んでいってください。
定期的に記事を書くので、 をしていただけると嬉しいです。

それではまた。