ApolloのFetchPoliciesを理解する

はじめに

以前、Apolloを使用して開発をしていた時に、クエリを投げた後もデータが更新されないことがありました。調べてみると、Apolloのキャッシュ機構の仕組みが原因であることがわかったので今回まとめてみたいと思います。

キャッシュ機構

Apollo Clientは不必要な通信処理を無くすために、便利なキャッシュ機構を備えています。クエリ結果をブラウザのメモリ上に保存することで同じ通信処理をする際に再びサーバーからデータを取らずにメモリ上に保存されているデータをそのまま使用することができます。

FetchPolicies

サーバーからデータを取ってくるかキャッシュのデータを使うかはFetchPoliciesの設定によって決めることができます。FetchPoliciesはクエリを投げる時に設定できます。

const { data } = useQuery({
  fetchPolicy: "network-only"
});

Fetch Policiesは以下の5つがあります。

• cache-first
• cache-and-network
• network-only
• no-cache
• cache-only

cache-first

デフォルトで設定されているもので、メモリ上のデータを優先的に使用するポリシー。
レスポンスが早く、ネットワーク通信を減らせるのが特徴。

1. クエリを投げた時に、キャッシュ上にデータがあるかを確認する。データがある場合は2と3をスキップ。
2. キャッシュ上にデータがない場合はサーバーからデータを取ってくる。
3. サーバーから取ってきたデータをメモリ上に保存する。
4. クエリの結果を返す。

cache-and-network

メモリ上のデータとサーバーのデータ両方を使用するポリシー。
レスポンスが早いのと、データの更新を頻繁に行うのが特徴。

1. クエリを投げた時に、キャッシュ上にデータがあるかを確認する。
2. キャッシュ上にデータがある場合は、キャッシュのデータを返す。
3. サーバーからデータを取ってくる。
4. サーバーから取ってきたデータをメモリ上に保存する。
5. クエリの結果を返す。

network-only

サーバーのデータのみ使用するポリシー。
常に最新のデータを扱うのが特徴。

1. クエリを投げた時に、キャッシュのデータを確認せずに、サーバーからデータを取ってくる。
2. サーバーから取ってきたデータをメモリ上に保存する。
3. クエリの結果を返す。

no-cache

キャッシュを使用しないポリシー。
取得したデータをキャッシュ上に保存しないのが特徴。

1. クエリを投げた時に、キャッシュのデータを確認せずに、サーバーからデータを取ってくる。
2. クエリの結果を返す。

cache-only

キャッシュのみ使用するポリシー。
オフラインでも問題なく動作するのが特徴。

1. クエリを投げた時に、キャッシュ上のデータを確認する。
2. データがあれば返し、なければエラーを発生させる。

まとめ

クエリを投げた後もデータが変更されない場合は、FetchPoliciesを確認してみて下さい。
FetchPoliciesをしっかり理解して使いこなせれば、不必要なネットワーク通信を減らしたり、Apolloのデータフローが分かるようになります。

参考文献

• Apollo Docs
• Understanding Apollo Fetch Policies
• Apollo Client fetchPolicies, React, and Pre-Rendering