Relayとは
Meta 製の GraphQL クライアント。
記事執筆時の最新バージョン：Relay v16.1.0
Cacheについて
一口にキャッシュにもいくつか種類があり、ここでは以下2つのキャッシュを扱う。
Query Cache（Document Cache）
-
query単位のcache dataのこと
-
consoleで以下オブジェクトに情報が格納されていることが確認できる
__RELAY_DEVTOOLS_HOOK__.environments.get(1)._store._roots
-
store生成時のoptionで有効期限を設定できる（後述）
-
valueにfetchTimeを含んでいるため、これをもとにキャッシュの有効期限を判断している模様
Store data（Normalized Cache）
-
Relay Storeに格納される正規化されたdataのこと
-
Relay DevToolsで確認することができる
- console.logでも確認できる
__RELAY_DEVTOOLS_HOOK__.environments.get(1)._store._recordSource._records
- グローバルなIdで識別される
- 専用のAPIを叩くか、query cacheの有効期限が切れない限りstaleにならない
- Query cacheが利用できない条件でも、Store dataに必要な情報が揃っている場合は、network requestを送信しない場合がある
Fetch Policy
loadQuery の option で fetchPolicy を指定すれば、画面ごとにキャッシュの利用有無を設定できる。（Query CacheとStore Dataの両方に適用される）
実際に使用することが多い fetchPolicy の種類と概要を以下に示す。
| store-or-network | store-and-network | network-only | |
|---|---|---|---|
| 概要 | デフォルトfetchPolicy。 有効なキャッシュが存在していればキャッシュを利用して画面を表示する。 なければネットワークリクエストを送信する。 |
有効なキャッシュが存在していればキャッシュを利用して画面を表示する。 その後キャッシュの有無に関わらず常にネットワークリクエストを送信し、キャッシュを更新する。 |
キャッシュを利用せず、常にネットワークリクエストを送信する。 |
| メリット | キャッシュを利用するので表示が早い | キャッシュを利用するので表示が早い | 常に新しいデータで画面を表示する |
| デメリット | キャッシュの有効期間内に裏でデータが書き換わっている場合、古いデータで画面を表示してしまう。 | キャッシュの有効期間内に裏でデータが書き換わっている場合、一度古いデータで画面を表示して、その後最新データ取得後に画面が書き換わるので一瞬じらつきが生じる。 | キャッシュを利用する場合に比べて画面表示が遅くなる。 |
実装はloadQueryの第4引数にoptionを指定する。
example
const queryReference = loadQuery(
MyEnvironment,
query,
{id: '4'},
{fetchPolicy: 'store-or-network'},
);
有効期限
storeのインスタンス化の際に、query cache の有効期限を設定できる。
// 5分の query cache を設定
const store = new Store(source, {queryCacheExpirationTime: 5 * 60 * 1000 });
一度queryを叩いた時間を基準にして、ここで設定した期間内にもう一度同じqueryを叩いた場合に、network requestを送信せずにキャッシュを利用する。