TECHNOLOGY COMPARE

Apollo Client / SWR

「どっちが上?」ではなく、まず同じ仕事をする道具なのかを確認します。

DIRECT COMPARISON

直接比較しやすい組み合わせ

Apollo ClientとSWRはどちらも「状態・データ取得」の技術なので、同じ土俵で比較しやすい組み合わせです。

状態・データ取得

Apollo Client

GraphQL データを取得・正規化キャッシュするクライアントライブラリ。クエリ結果をオブジェクト単位でキャッシュし、Reactの状態へ接続する。

何を担当する?

クエリ結果をオブジェクト単位でキャッシュし、Reactの状態へ接続する。

いつ使う?

  • GraphQL スキーマを中心に複雑な画面データを扱うとき。

避けたい場面

  • RESTだけの小さなAPIでGraphQL キャッシュが不要なとき。
状態・データ取得

SWR

キャッシュを先に返し裏で再検証するReact データ取得ライブラリ。キー単位の取得、キャッシュ、再検証を小さなフック APIで提供する。

何を担当する?

キー単位の取得、キャッシュ、再検証を小さなフック APIで提供する。

いつ使う?

  • Reactで読み取り中心のAPI データを簡潔に同期したいとき。

避けたい場面

  • 複雑なミューテーションワークフローとフレームワーク横断対応が必要なとき。
DIRECT RELATION

SWRとApollo Clientはサーバー状態の取得、キャッシュ、同期で比較される。キー単位の取得、キャッシュ、再検証を小さなフック APIで提供する。一方、Apollo Clientはクエリ結果をオブジェクト単位でキャッシュし、Reactの状態へ接続する。