InMemoryCache (apollo)
GraphQL の結果を 正規化して保存する
つまり、同じ __typename と ID を持つデータを共通化し、一箇所で更新を反映できるようにする
code:typescript
import { ApolloClient, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
// ...ほかの設定...
cache: new InMemoryCache(options) // ←ここ
});
gpt-5.icon
同じクエリを再実行したときに、同一オブジェクト参照(===)を返すかどうか
code:ts
resultCaching?: boolean;
デフォルト: true
仕組み
Apollo Client はキャッシュから結果を返す際、通常は新しい JS オブジェクトを構築します。
しかし resultCaching: true の場合、前回と同じデータ構造なら同一インスタンスを返すので、
React の useQuery などが === 判定で「変化なし」と判断し、無駄な re-render を防げます。
使いどころ
UI 更新コストを下げたい場合 → true(デフォルト)
データ変化を細かく検知したい場合 → false
resultCaching が有効なときに、キャッシュ結果の最大保持数 を制限する
code:ts
resultCacheMaxSize?: number;
デフォルト
Math.pow(2, 16) → 約 65,536 件
意味
Apollo は内部的に「結果キャッシュ」をメモリに保持し、
同じクエリに対して以前のオブジェクトを使い回します。
ここで指定した上限を超えると古い結果が破棄されます。
注意
大量のクエリを扱うアプリでは、適宜制限を下げることでメモリ使用量を抑えられます。
Apollo Client 2.x 以前で主に使われていた キャッシュ ID の決定方法。
(グローバルな ID 決定関数)
code:ts
dataIdFromObject?: (object: StoreObject) => string | null | undefined;
例
code:ts
import { defaultDataIdFromObject } from "@apollo/client";
const cache = new InMemoryCache({
dataIdFromObject(obj) {
switch (obj.__typename) {
case "Product":
return Product:${obj.upc};
case "Person":
return Person:${obj.name}:${obj.email};
default:
return defaultDataIdFromObject(obj);
}
},
});
現在のベストプラクティス
✅ 新しいバージョンでは typePolicies の keyFields を使うのが推奨。
dataIdFromObject はレガシー互換用。