はじめまして。
WASD Inc. で開発をしている Yutorin です。
よろしくお願いします。
弊社のデジちゃいむでも採用しているHasuraとReactを使ってサクッとTODOアプリを作ってみましょう。
今回はHasuraを使ってみるところまで紹介します。
なお、この記事はNode.jsやYarnをインストール済みであることを前提に進めます。
目次
Hasuraってなに？
HasuraはPostgreSQL (MySQLやSQL 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に入ることができます。
TODOテーブルを作る
上部のDATAをクリックし、開いた画面でCreate Tableをクリックし、
まずはTODOを入れる todo テーブルを作りましょう。
画像のように、id, created_at, name を追加し、一番下のAdd Tableをクリックします。
idとcreated_atはColumnsの一番下にある + Frequently used columns を使うと楽です。
データを入れる
Insert Rowをクリックした画面でテーブルにデータを入れることができます。
idとcreated_atはそのままで自動挿入されるので、 name にTODOを入れます。
Saveを押すと追加されるので、いくつか入れていきます。
入れたものはBrowse Rowsから見ることができます。
GraphQLを叩いてみる
実際にフロントエンドからDBを見に行く際にどんなGraphQLクエリを叩くかとりあえず試してみたいですよね
そのためにGraphiQLがあります。
Hasuraを開いた時に表示されていた最初のページ (GraphiQL) を見てください。
真ん中でGraphQLクエリを入力すると試すことができますが、まずは左側を見てください。
Explorerの中にさきほど追加したtodoが追加されています。
todo をクリックすると、色々展開されます。
先ほど追加したカラムにポチポチとチェックを入れると、真ん中のエディタ内で勝手にGraphQLクエリが生成されます。
そして上にある再生ボタン(▶)を押すと、クエリが走り、入れたデータが取得できます。
これで動くことが確認できました。
あとがき
今回はHasuraを導入し、DB定義をして、クエリを実際に使ってみるところまでを行いました。
これだけでデータベースやバックエンド、GraphQLエンドポイントを手軽に作成することができます。
基本的な部分のみの紹介をしましたが、リレーションやクエリを自分で作るActionsなど、Hasuraを使うことの真価はまだまだあります。
次回はReactとReactで使うのに便利なGraphQL Code Generatorについて書く予定です。
WASD TECH BLOG では主に React、TypeScript、GraphQL に関する記事を定期的に発信していきます。
よろしければ他の記事や、 もお願いします。
次回はこちらです。