概要
GraphQL の理解を進める上で参考になったものを載せます。
React.js, TypeScript, Relay が使われるプロダクトを想定しています。
コンセプト
- GraphQL 公式
GraphQL とは、を正確に知るための公式ドキュメントです。
- GraphQLとクライアントサイドの実装指針
GraphQL とはどういうものかが読みやすくまとめられています。
GraphQLとクライアントサイドの実装指針.md · GitHub
- GraphQL との向き合い方 2022 年版
2022 年現在における GraphQL の特徴がスライドでわかりやすくまとめられています。
- Render as you fetch incremental GraphQL fragments
Fragment Colocation のコンセプトがわかりやすく記載されています。
@defer のことまで語られていて先進的な記事です。
- React 時代に選ぶ GraphQL
React と GraphQL を重ねたときのコンセプトです（手前味噌）。
- Relay React Conf 2021
Relay のコンセプトが動画で紹介されているのでわかりやすいです。 GraphQL というより Relay のコンセプトを学べます。
- Render as you fetch
React 公式の Render as you fetch についての内容が分かります。 GraphQL は関係ありませんが、React で GraphQL を使う上では理解しておくと良さそうです。
- Relay.dev
Relay の公式ページです。 Relay で開発しない場合でも GraphQL を理解する上で参考になる内容が多分に含まれています。
- Apollo Docs
Apollo の公式ページです。 こちらも Apollo を使う使わないに関わらず GraphQL を理解する上で参考になる内容が多分に含まれています。
- GraphQL Spec Draft
難しくてあんまり読んでませんが、重要なので置いておきます。
サーバ / Schema 仕様
GraphQL のサーバや Schema 設計は難しいので、これらの内容を参考にして検討を進めています。
- Relay サーバ仕様
- Shopify の GraphQL チュートリアル
- GraphQLスキーマ設計ガイド 第2版
プラグイン
GraphQL の Plugin である Envelop と利用 Plugin 例です。
- Envelop
Envelop Plugins
DataLoader
N+1 解消の DataLoader の GitHub です。 紹介記事もたまに見ますが、コード量が多くないので直接読んだ方がはやいです。
Persisted Query
- GraphQLとPersisted Query
Persisted Query について概要を学べます。
- Relay Persisted Query
Relay で行う方法です。デフォルトの機能として紹介されているので、Apollo に比べて簡易だと思います。
Apollo はそもそも Persisted Query の概念が少し異なっているというのもあります。
エラー管理
エラーハンドリングはまだどういう形式が適切か判断できていないので、参考程度に読んでいるものたち。
- エラーハンドリング
- エラー型をユニオンに
- Apollo Error Handling
- ZOZO Error handling
- GraphQLにおけるエラーハンドリングの実践
ブログ記事
- The Guild Blog
Guild の記事は参考になるものが多いので読んでおくと良いです。
- GraphQLを導入する時に考えておいたほうが良いこと
メルカリ shops で GraphQL 利用時に関する記事です。 こちらも一度目を通しておくと良いです。
サンプル Schema
サンプルとして利用できる Schema です。
Pokemon は簡単なので GraphQL 理解の導入に良いサンプルです。
一方 GitHub はかなり複雑ですが、しっかり作り込まれているので参考になります。
Star Wars もあるようですが、僕は見ていません。
- Pokemon GraphQL
- Pokemon GraphQL Playground
https://graphql-pokemon2.vercel.app/
- GitHub の Schema 設計
サンプルコード
GraphQL Relay のサンプルコードは多くありません。
- Relay の Examples
- Next.js x Relay のサンプル
その他
- Relay way 命名規則
- Fragment で変数を扱えない
- GraphQL Codegen
mappers
まとめ
GraphQL / TypeScript / Relay で開発する際に参考になるリンク集をまとめています。
随時更新予定です（きっとやらない）。
他に参考になる記事などありましたら教えていただけると嬉しいです。
