「初めてのGraphQL」を読んでサンプルアプリをTypeScript + React + typeorm + type-graphql + graphql-code-generatorで作ってみた

最近、GraphQL を勉強するために「初めての GraphQL」という本を読んで、理解のために自分でも本の中で実装されているサンプルアプリを作ってみました。

初めてのGraphQL ―Webサービスを作って学ぶ新世代API

作ったのがこれ: https://github.com/danimal141/learning-graphql-ts

ただ写経するだけだとしっかり理解できない + 面白くないので本は雑に読みつつ、色々と魔改造しながら作ったのでそのメモを残しておきます。

全体

• 本のサンプルアプリは JavaScript で書かれているが、全て TypeScript で書いた
  • GraphQL がせっかく型システムを持っているのだから実装側も型がほしい
• ディレクトリ構成は Monorepo で yarn workspaceを使ってバックエンドとフロントエンドの package を良い感じに管理できるようにした
• npm-run-allを導入してコマンドをパラレルでコマンド一発で実行するようにした
  • バックエンド、フロントエンド、GraphQL のスキーマを元に型を吐いてくれるやつとか色々立ち上げるやつがいたので
• lint-stagedとhuskyを使って、コミット時に Prettier をかませるようにした
• その他、ESLint などは適当に入れた
• テストはだるかったので書いていません、すみませんすみません

Backend

• 基本的には本の中で実装されているみたいに express や apollo-server-express を使い、playground 上で GraphQL のリクエストを確認できる感じにした
  • 途中で面倒になったので 本の中で実装されているが実装できていない Resolver とかあるかも
• Mongo ではなく MySQL を Docker で立ち上げるようにした
• 使ってみたかったのでtypeormとtype-graphqlを導入して DB と GraphQL のスキーマ定義するようにした
  • type-graphql が勝手にスキーマ吐いてくれるので良い
  • Spring Boot みたいになる
  • 後で気づいたが最近名前をちらほら聞くNest.jsとやらを使ってみても良かったのでは...？と思い始めている
• あまりよく理解せずノリで使っていたが、途中で typeorm が Migration 機能持っていることに気づき導入してみた (最初は synchronize: trueで乗り切っていた)

Frontend

• create-react-appを使って TypeScript のアプリのベースを作った
  • 途中で面倒になったので作ったのはユーザ一覧表示とユーザログイン部分機能だけ
  • 本の中の React はちょっと古い感じだったので Hooks を使いまくってモダンっぽくした
• graphql-code-generatorを導入して、バックエンドで type-graphql が生成したスキーマを元に型ファイルを生成するようにした
• クエリを投げまくるのを気にして、なるべくルートのコンポーネントがクエリを組み立ててリクエスト -> 子コンポーネントはフラグメントで欲しい情報を宣言し、レンダリングするみたいなのを意識した (Fragment Colocation と言う？ 参照）
  • 実際には Mutation でクエリの再フェッチがあったり、そもそも実装したコンポーネントがほぼ無いのであまりうまくできていない...
  • 仕事で Next.js + GraphQL を使った時にも意識したやり方だけど、pages でクエリを組み立て、pages を構成する各コンポーネントで必要な情報を Fragment で宣言するみたいにすると、リクエストも最低限になりまあまあキレイな設計になるのではないかと思っている (GraphQL 歴 2 ヶ月の意見です）
• ログインする所は初めて Mutation をフロントエンドで実装したので若干悩んだ
  • 本の中ではMutationコンポーネントとか使ってたけど、Hooks で書き直した時にuseMutationが variables 空で呼ばれてしまってエラーになったりしてちょっとハマった

まとめ

• GraphQL と TypeScript は良い感じに型システムを使えるので相性かなり良さそう
• typeorm は悪くないけど、個人的には正直 ActiveRecord のほうが早く実装できる
  • Rails ヤメラレナイ...

参照

• https://classic.yarnpkg.com/blog/2017/08/02/introducing-workspaces/
• https://github.com/mysticatea/npm-run-all
• https://github.com/okonet/lint-staged
• https://github.com/typicode/husky
• https://github.com/typeorm/typeorm
• https://github.com/MichalLytek/type-graphql
• https://github.com/nestjs/nest
• https://github.com/facebook/create-react-app
• https://github.com/dotansimha/graphql-code-generator
• https://gist.github.com/Quramy/566ea87d0121ceb8cd97ad9d14b63fd8