WASD Inc. で開発をしている Yutorin です。
弊社のデジちゃいむでも採用しているHasuraとReactを使ってサクッとTODOアプリを引き続き作っていきましょう。
前回はこちらです。
今回はReactのパッケージを導入し、GraphQL Code Generatorを動作させるところまで行います。
目次
Reactを用意する
今回は、Hasuraがチュートリアルとして提供している ボイラープレート を利用します。
Auth0も含まれているのでログイン・ログアウトができますが、今回は不要なのでリダイレクトの部分など削除します。
その部分を削除したリポジトリは こちら にあります。
git clone をして引っ張ってからプロジェクト内に入り、 yarn install をして下さい。
yarn start をして中に入ると、この画面が表示されます（アカウント作成して普通にログインしても出るはずです）。
いまは見た目だけで、これから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 をします。
色々聞かれるので、こう設定します。
GraphQL用のフォルダを作ってそこに入れるのがおすすめです。
加えて、 yarn add -D "@graphql-codegen/typed-document-node" をして、codegen.yml内のpluginsに - "typed-document-node" を追記して下さい。
動かしてみる
準備ができたので、実際に動かしてみましょう。
src/graphql/queries に Todo.graphql を作成して、前回hasuraに試し書きしたクエリを入れます。
そして、 yarn codegen をして.tsファイルを生成します。
もし生成に失敗した場合は、yarn.lockを削除して、 yarn install をもう一度行うと上手く行く場合があります。
すると、 graphql/generated.tsx にTodoテーブルに関する型やTodoクエリがTypeScriptとして定義され、React上で使用することが可能になりました。
あとがき
今回は、React（Hasuraのボイラープレート）、GraphQL Code Generatorを導入し、実際に型定義されたクエリを生成するところまで行いました。
次回はこのクエリを使用して、実際に動くところまで行います。
次回はこちらです。
WASD TECH BLOG では主に React、TypeScript、GraphQL に関する記事を定期的に発信していきます。
よろしければ他の記事や、 もお願いします。