TanStack QueryのisPending・isLoading・isFetchingの違いを理解する

TanStack QueryのisPending・isLoading・isFetchingについて、違いはなんとなく理解しているものの、なぜこんなに似た状態が用意されているのか気になったので調べてみました。

isPending・isLoading・isFetchingの違い

一言でまとめると

• isPending: データがまだ利用できない状態
• isLoading: 初回データ取得中
• isFetching: 通信中（初回取得・再取得の両方を含む）

なぜこんなに似た状態があるのか？

これらは、TanStack Queryが内部で管理しているstatusとfetchStatusという2つの状態から導き出されています。

statusとは

statusは、クエリが保持しているデータの状態を表します。

取り得る値は次の3つです。

statusは通信中かどうかを表しているわけではない。

「データが利用できる状態なのか」「取得に失敗した状態なのか」といった、データそのものの状態を表しています。

fetchStatusとは

クエリの通信状態を表します。

statusとの違いは、データではなく通信に着目していることです。

つまり、

• statusはデータの状態
• fetchStatusは通信の状態

という役割で分かれています。

isPending・isLoading・isFetchingはどのように導き出されるのか

isPendingとisFetchingは、それぞれstatusとfetchStatusをそのまま分かりやすくしたものです。

isLoadingだけは少し特殊で、「データがまだ利用できず、かつ通信中である」場合にのみtrueになります。

そのため、例えばオフラインなどで通信が一時停止している場合は、

• status = 'pending'
• fetchStatus = 'paused'

となり、

• isPending = true
• isFetching = false
• isLoading = false

となる。

つまり、isLoadingは「初回ローディング中」を表現するための、より限定的な状態であることが分かります。

まとめ

isPending・isLoading・isFetchingは、それぞれ独立した状態ではなく、statusとfetchStatusから導き出される派生プロパティです。

• statusはデータの状態
• fetchStatusは通信の状態
• isPendingはstatusを分かりやすくしたもの
• isFetchingはfetchStatusを分かりやすくしたもの
• isLoadingは「データがまだ利用できず、かつ通信中」であることを表す

このように、まずstatusとfetchStatusの役割を理解すると、isPending・isLoading・isFetchingの違いも自然と理解しやすくなります。