SWR
vercel/swr: React Hooks for data fetching
まずキャッシュからデータを返し(stale)、次にフェッチリクエストを送り(revalidate)、最後に最新のデータを持ってくる
client クライアントにおけるデータ取得、Data Control データ管理用のライブラリ
Next.jsとかだと、Server-Side サーバーサイド側のデータ取得と使い分けると良いみたい
dataとfetcher
fetcher
axiosやFetch APIに入れ替える事もできる
とりあえず入れておくとCashing キャッシュできそう?
Automatic Revalidation SWR
Automatic Revalidation – SWR
revalidateOnFocus
ページに再度フォーカスを合わせるか、タブを切り替えると、SWRはデータを自動的に再検証
リロードしなくても、fetchしてくれるので便利
他にも、色々便利機能あって良い
どう管理する?
exampleみるに、custom hooksで各リクエスト管理してる?
Page componentでリクエストする方針でなく、各componentでカスタムフック利用する方針
参考: Getting Started – SWR 再利用可能にする
最も美しいのは、APIに送信されるリクエストが1つだけであるということです。これは、APIが同じSWRキーを使用し、リクエストが重複排除され、キャッシュされ、自動的に共有されるためです。
らしいので、複数のcomponentで同じ
競合
React Query TanStack Query
React Query TanStack Queryの方が良いみたい?
kintoneマイクロサービス化検証プロジェクトのWebフロントエンドにおける技術選定 - Cybozu Inside Out | サイボウズエンジニアのブログ
自分内 SWR vs React Query のメモ by よしこさん
Apollo
Cashing キャッシュしてくれるみたいだけど、不要になるのかしら?