前提知識

学習を開始する前は以下のようなざっくりとした理解。

• 単一エンドポイント
• フロント側が Query で柔軟にほしいデータを要求できる
• メリット
  • バック側はフロント側の View 変更の影響を受けにくい
  • フロント側はリクエスト数が減る

GraphQL Tutorial Course Part I

GraphQL Tutorial Course Part I | Apollo Odyssey

React アプリケーションを題材として Apollo Server, Apollo Client について学べる。

内容は以下の通り。

• Schema Definition Language によるスキーマ定義
• Apollo Server の起動
• mock レスポンスの登録
• Apollo Studio Explorer による Query の作成
• React アプリケーションに Apollo Client を追加
• useQuery を使用したデータの取得と表示

Apollo Client にキャッシュ機能があるのは初耳だった。
これは正規化されたキャッシュとのことらしいが具体的にどうキャッシュしているのかは分からない。

Getting Started With Apollo Client in Next.js

Getting Started With Apollo Client in Next.js - Apollo Blog

Next.js で Apollo Client を使用するチュートリアル。
GraphQL API は Countries GraphQL API を利用する。

SSG, SSR, CSR の3つのレンダリング方法において Apollo Client を使用する方法を学べる。
特に CSR においてサーバー側でリクエストを送らないように ClientOnly コンポーネントでラップするパターンは勉強になった。

またこの中で Apollo Client Devtools を入れてみた。
キャッシュの中身を見ることができるのでキャッシュ動作の理解の手助けになった。

ところで GraphQL で取得するデータや Variables の型定義を手元で定義するのは実際の開発では面倒なので、なにかサーバー側と型定義を共有する方法がないとな〜という点が気になった。

GraphQL Tutorial Part II

Lift-off II: Resolvers | Apollo Odyssey

Part I の続きで mock データではなくライブデータを返すようにサーバー側を実装していく。
データソースとして REST API を使うのだが、その API は事前に Catstronauts REST API が用意されている🎉
演習に適した REST API を自分で用意するのは本題から外れる上に面倒なのでめっちゃありがたい〜🚀

結果以下のことが学べた。

• apollo-datasource-rest というパッケージを使用してデータソースとして REST API を扱う
  • これにより実装が簡単になりデータキャッシュとリクエスト重複排除が可能
• resolvers の実装
• ApolloServer に resolvers, dataSources を指定する

GraphQL Tutorial Part III

Lift-off III: Arguments | Apollo Odyssey

Part II の続きから開始して、指定した id の track データを取得するようにサーバー側・クライアント側を実装していく。

結果以下のことが学べた。

• サーバー側
  • argument を要求する Query の schema の書き方
    • track(id: ID!): Track
  • argument を要求する Query の resolver の書き方
    • (_, { id }, { dataSources }) => {}
• クライアント側
  • useQuery で argument を指定する書き方
    • useQuery(GET_TRACK, { variables: { trackId } })
  • ローディング中にスピナーを表示するコンポーネントの実装パターン

GraphQL Tutorial Part IV

Lift-off IV: Mutations | Apollo Odyssey

Part III の続きから開始して、サーバーデータを更新する Mutation を使用してクライアントからトリガーするように実装していく。

結果以下の内容が学べた。

• サーバー側
  • Mutation のスキーマの書き方
  • Mutation の戻り値に code, success, message のデータを含めることが推奨される
  • resolver の書き方
  • エラーハンドリング
• クライアント側
  • useMutation の使い方
  • Mutation 時の Apollo Client のキャッシュ動作

特に下図のように Mutaiton を実行するとキャッシュが更新され、そのデータを参照しているコンポーネントも自動的に更新される動きを知れたのがよかった。

解消されない疑問もいくつか残った。

• スキーマ定義をファイル分割して書くことができるか
• REST API の OpenAPI Spec から apollo-datasource-rest 向けの API クラスコードの生成ができるか
• 楽観的更新 (Optimistic Updates)
• 部分的なモッキング方法
• サーバー側の TypeScript 対応
• サーバー側のキャッシュの TTL
• クライアント側のキャッシュの TTL

あとで調べよ〜〜🔍