WASD TECH BLOG

WASD Inc.のTech Blogです。

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

WASD Inc. で開発をしている Yutorin です。

弊社のデジちゃいむでも採用しているHasuraとReactを使ってサクッとTODOアプリを引き続き作っていきましょう。

前回はこちらです。

tech.wasd-inc.com

今回はReactのパッケージを導入し、GraphQL Code Generatorを動作させるところまで行います。




目次


Reactを用意する

今回は、Hasuraがチュートリアルとして提供している ボイラープレート を利用します。 Auth0も含まれているのでログイン・ログアウトができますが、今回は不要なのでリダイレクトの部分など削除します。
その部分を削除したリポジトリこちら にあります。

git clone をして引っ張ってからプロジェクト内に入り、 yarn install をして下さい。

yarn start をして中に入ると、この画面が表示されます(アカウント作成して普通にログインしても出るはずです)。

GraphQL Tutorial App画面

いまは見た目だけで、これからApollo Clientを利用してHasuraと紐付けていきます。

GraphQL Code Generator を導入する

実際に取り掛かる前に、 Graphql Code Generatorを導入します。
長いので以下Codegenと記述します。

Graphql Code Generatorとは?

作成したGraphQLのクエリとDBのスキーマを使用してコードを自動生成するツールです。 今回はTypeScriptのコードを生成しますが、他の言語も対応しています。

これをすることでのメリットは、とても楽に型定義されたコードが生成されるのと、カスタマイズ性が高いという点があります。

導入してみる

yarn add graphql yarn add -D @graphql-codegen/cli

をしてCodegenを引っ張ってきて、

yarn graphql-codegen init をします。 色々聞かれるので、こう設定します。

codegen init cui log

GraphQL用のフォルダを作ってそこに入れるのがおすすめです。

加えて、 yarn add -D "@graphql-codegen/typed-document-node" をして、codegen.yml内のpluginsに - "typed-document-node" を追記して下さい。

動かしてみる

準備ができたので、実際に動かしてみましょう。
src/graphql/queriesTodo.graphql を作成して、前回hasuraに試し書きしたクエリを入れます。

Todo query

そして、 yarn codegen をして.tsファイルを生成します。
もし生成に失敗した場合は、yarn.lockを削除して、 yarn install をもう一度行うと上手く行く場合があります。

すると、 graphql/generated.tsx にTodoテーブルに関する型やTodoクエリがTypeScriptとして定義され、React上で使用することが可能になりました。

generated Todo query


あとがき

今回は、React(Hasuraのボイラープレート)、GraphQL Code Generatorを導入し、実際に型定義されたクエリを生成するところまで行いました。
次回はこのクエリを使用して、実際に動くところまで行います。

次回はこちらです。

tech.wasd-inc.com


 
WASD TECH BLOG では主に React、TypeScript、GraphQL に関する記事を定期的に発信していきます。
よろしければ他の記事や、 もお願いします。