[TanStack Query]QueryClientは設定に気をつける
言わずと知れたTanStack Query(旧称 React Query)は、 データ取得 + キャッシュ管理をしてくれるライブラリ です。
Reactだけでなく、Vue、Svelteなどもサポートしています。
今回は、ちょっとしたUI操作だけで何度もAPIリクエストが発生する状態になってしまった時の解決備忘録です。
原因はこれ
結論、原因はQueryClientを初期化しているコードでした。
const [queryClient] = useState(() => new QueryClient());
QueryClient
TanStack Queryの全体の管理者 。
全クエリのキャッシュ管理や、全体のデフォルト動作設定、refetchのグローバルルールも設定できます。
ちなみに、単独クエリ向けの個別設定はuseQuery で行います。
APIリクエストが過度になっているため、フェッチのタイミングの設定が必要なようです。
staleTime（データを取得してから何ミリ秒間、再フェッチしないでいいか）の設定か、QueryClientのオプションで解決できます。
今回は、特に詳細な時間やタイミングを決めたいわけではないので、ひとまずオプションで対応することにしました。
refecthタイミングを制御するオプション
この３つはqueryClientのrefecthタイミングを制御するオプションです。
- refetchOnMount
マウント時にrefetchするかどうか
- refetchOnWindowFocus
ウィンドウをfocusした際にrefetchするかどうか
- refetchOnReconnect
再接続時にrefetchするかどうか
これらの返り値はbooleanかalwaysです。
refetchOnMount: boolean | "always" | ((query: Query) => boolean | "always")
false 該当のタイミングではrefetchしない
true キャッシュが古い場合refetchする
alwaysキャッシュの状態に関わらず毎回refetchする
そして、今回私が盲点だったのが、全てデフォルトはtrue なことです。
解決
過度な再フェッチを避けるために、refetchに関わるこれらのオプションは 一旦false にします。
必要があれば useQueryを使ってオプションやstale Timeを個別設定するといいのかなと思います。
参考
🎄こちらは2025年 福岡 Tech Women Communityのアドベントカレンダー参加記事です。
Discussion