Apollo ClientのCache
Overview
Configuration
Reading and writing
Garbage collection and eviction
Customizing field behavior
Memory Management
Advanced topics
GPT-4.icon
具体例
たとえば、初めて以下のクエリを実行するとき：
code:graphql
GetBook(bookId: "5")
Apollo Clientはキャッシュを探す
見つからないのでサーバーへリクエストを送る
サーバーからBook:5のデータが返ってくる
そのデータをキャッシュに保存する
そして次回以降は同じクエリを実行しても、
キャッシュにBook:5があるので
サーバーに問い合わせず即座にレスポンスされる！
という流れになります。
✅ データの保存形式
ネストされたobjectが来ても正規化して、独立したエントリとして保存される
例えば、サーバーからこんなレスポンスが来たとしましょう：
code:json
{
"data": {
"person": {
"__typename": "Person",
"id": "1",
"name": "Luke Skywalker",
"homeworld": {
"__typename": "Planet",
"id": "10",
"name": "Tatooine"
}
}
}
}
これをキャッシュするとき、Apollo Clientはこう動きます：
1. Person（id=1）とPlanet（id=10）をそれぞれ独立したオブジェクトと認識
2. 各オブジェクトにキャッシュID（例: Person:1, Planet:10）を割り振る
3. person.homeworldの部分は、実際のPlanetデータではなく参照（__ref）に置き換える
結果、キャッシュにはこんな感じで保存されます：
Person:1
code:json
{
"__typename": "Person",
"id": "1",
"name": "Luke Skywalker",
"homeworld": { "__ref": "Planet:10" }
}
Planet:10
code:json
{
"__typename": "Planet",
"id": "10",
"name": "Tatooine"
}
こうして
データの重複を減らす（同じPlanetが複数Personから参照されても1個だけ保存）
データ更新時に効率よく同期できる
というメリットがあります！
✅ 正規化の手順まとめ
Apollo Clientがレスポンスをキャッシュに保存するときは：
1. オブジェクトを特定
どの部分が独立したエンティティかを判別
2. キャッシュIDを作成
通常、__typename:idの形式
3. オブジェクト参照に置き換え
入れ子のオブジェクトを__refで表す
4. キャッシュに保存
新しいデータが来たらマージ（上書き or 追加）
✅ Devtoolsで可視化もできる！
現在のキャッシュの中身
各オブジェクトの関係（__ref）
がビジュアルで見えるようになります。
開発中にめちゃくちゃ便利なので、必須レベルです！