🌺
TanStack Query v5の useQuery (isPending, isFetching, isLoading)の使い分け
isFetching
- 現在フェッチ処理が実行中（初回・再フェッチ問わず）
isPending
- 単純に「データがあるかないか」だけを見る
- 古いdataがある場合は、trueにならない
- fetchingのstatusは関係なし
isLoading
- 初回フェッチが実行中の状態
-
isPending&&isFetchingと同じ意味 - クエリが無効化されていると false になる
enabled: false の場合
-
isPending: true（データがないから） -
isLoading: false（フェッチしていないから）
実際の使い分けパターン
isPending
- 初回ローディング画面（スピナー、スケルトン）
- データが確実にない時の条件分岐
isFetching
- 更新中インジケーター（小さなスピナー、プログレスバー）
- フォームの送信ボタンを無効化
- 「更新中」の視覚的フィードバック
isLoading
- 初回フェッチ中かつ実際に通信している時のみ
- enabled条件付きクエリで実際のローディング状態を知りたい時
どれを使うか困ったら
迷ったら、isFetchingを使うようにしています。
古いデータが表示されたまま、いきなりパッとデータが更新されると、ん？
という事が多々あったため。
fetch中にバックグラウンドでデータを更新、その間は、ユーザーに古いデータを見せておく、
等やりたい場合は、isPendingを使えばいいかなと。
enabledに関わらず、ローディング表示したいこともあるので、その時はisPendingがいいですね！
isLoadingは基本使わないかも、、
参考文献
宣伝
Next.jsを使ったフロントエンド開発などやってます。
お仕事のご依頼など、はこちらから！
Discussion