<h2 id="isfetching" data-line="1" class="code-line">
<a class="header-anchor-link" href="#isfetching" aria-hidden="true"></a> isFetching</h2>
<ul data-line="3" class="code-line">
<li data-line="3" class="code-line">現在フェッチ処理が実行中（初回・再フェッチ問わず）</li>
</ul>
<h2 id="ispending" data-line="5" class="code-line">
<a class="header-anchor-link" href="#ispending" aria-hidden="true"></a> isPending</h2>
<ul data-line="7" class="code-line">
<li data-line="7" class="code-line">単純に「データがあるかないか」だけを見る</li>
<li data-line="8" class="code-line">古いdataがある場合は、trueにならない</li>
<li data-line="9" class="code-line">fetchingのstatusは関係なし</li>
</ul>
<h2 id="isloading" data-line="11" class="code-line">
<a class="header-anchor-link" href="#isloading" aria-hidden="true"></a> isLoading</h2>
<ul data-line="13" class="code-line">
<li data-line="13" class="code-line">初回フェッチが実行中の状態</li>
<li data-line="14" class="code-line">
<code>isPending</code> &amp;&amp; <code>isFetching</code> と同じ意味</li>
<li data-line="15" class="code-line">クエリが無効化されていると false になる</li>
</ul>
<h2 id="enabled%3A-false-%E3%81%AE%E5%A0%B4%E5%90%88" data-line="17" class="code-line">
<a class="header-anchor-link" href="#enabled%3A-false-%E3%81%AE%E5%A0%B4%E5%90%88" aria-hidden="true"></a> enabled: false の場合</h2>
<ul data-line="19" class="code-line">
<li data-line="19" class="code-line">
<code>isPending</code>: true（データがないから）</li>
<li data-line="20" class="code-line">
<code>isLoading</code>: false（フェッチしていないから）</li>
</ul>
<h2 id="%E5%AE%9F%E9%9A%9B%E3%81%AE%E4%BD%BF%E3%81%84%E5%88%86%E3%81%91%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3" data-line="22" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E4%BD%BF%E3%81%84%E5%88%86%E3%81%91%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3" aria-hidden="true"></a> 実際の使い分けパターン</h2>
<h3 id="ispending-1" data-line="24" class="code-line">
<a class="header-anchor-link" href="#ispending-1" aria-hidden="true"></a> isPending</h3>
<ul data-line="26" class="code-line">
<li data-line="26" class="code-line">初回ローディング画面（スピナー、スケルトン）</li>
<li data-line="27" class="code-line">データが確実にない時の条件分岐</li>
</ul>
<h3 id="isfetching-1" data-line="29" class="code-line">
<a class="header-anchor-link" href="#isfetching-1" aria-hidden="true"></a> isFetching</h3>
<ul data-line="31" class="code-line">
<li data-line="31" class="code-line">更新中インジケーター（小さなスピナー、プログレスバー）</li>
<li data-line="32" class="code-line">フォームの送信ボタンを無効化</li>
<li data-line="33" class="code-line">「更新中」の視覚的フィードバック</li>
</ul>
<h3 id="isloading-1" data-line="35" class="code-line">
<a class="header-anchor-link" href="#isloading-1" aria-hidden="true"></a> isLoading</h3>
<ul data-line="37" class="code-line">
<li data-line="37" class="code-line">初回フェッチ中かつ実際に通信している時のみ</li>
<li data-line="38" class="code-line">enabled条件付きクエリで実際のローディング状態を知りたい時</li>
</ul>
<h2 id="%E3%81%A9%E3%82%8C%E3%82%92%E4%BD%BF%E3%81%86%E3%81%8B%E5%9B%B0%E3%81%A3%E3%81%9F%E3%82%89" data-line="40" class="code-line">
<a class="header-anchor-link" href="#%E3%81%A9%E3%82%8C%E3%82%92%E4%BD%BF%E3%81%86%E3%81%8B%E5%9B%B0%E3%81%A3%E3%81%9F%E3%82%89" aria-hidden="true"></a> どれを使うか困ったら</h2>
<p data-line="42" class="code-line">迷ったら、isFetchingを使うようにしています。<br>
古いデータが表示されたまま、いきなりパッとデータが更新されると、ん？<br>
という事が多々あったため。</p>
<p data-line="46" class="code-line">fetch中にバックグラウンドでデータを更新、その間は、ユーザーに古いデータを見せておく、<br>
等やりたい場合は、isPendingを使えばいいかなと。</p>
<p data-line="49" class="code-line">enabledに関わらず、ローディング表示したいこともあるので、その時はisPendingがいいですね！</p>
<p data-line="51" class="code-line">isLoadingは基本使わないかも、、</p>
<h2 id="%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE" data-line="53" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE" aria-hidden="true"></a> 参考文献</h2>
<p data-line="55" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__6aaedfe3f02d9" src="https://embed.zenn.studio/card#zenn-embedded__6aaedfe3f02d9" data-content="https%3A%2F%2Ftanstack.com%2Fquery%2Flatest%2Fdocs%2Fframework%2Freact%2Freference%2FuseQuery" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://tanstack.com/query/latest/docs/framework/react/reference/useQuery" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://tanstack.com/query/latest/docs/framework/react/reference/useQuery</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__69995bf72f8ae" src="https://embed.zenn.studio/card#zenn-embedded__69995bf72f8ae" data-content="https%3A%2F%2Fzenn.dev%2Ftaisei_13046%2Fbooks%2F133e9995b6aadf%2Fviewer%2Fc22ed5" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/taisei_13046/books/133e9995b6aadf/viewer/c22ed5" style="display:none" target="_blank">https://zenn.dev/taisei_13046/books/133e9995b6aadf/viewer/c22ed5</a></p>
<h2 id="%E5%AE%A3%E4%BC%9D" data-line="58" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%A3%E4%BC%9D" aria-hidden="true"></a> 宣伝</h2>
<p data-line="60" class="code-line">Next.jsを使ったフロントエンド開発などやってます。<br>
お仕事のご依頼など、はこちらから！</p>
<p data-line="63" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__042e180e333b3" src="https://embed.zenn.studio/card#zenn-embedded__042e180e333b3" data-content="https%3A%2F%2Fwww.htmlgo.site%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.htmlgo.site/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.htmlgo.site/</a></p>


TanStack Query v5の useQuery (isPending, isFetching, isLoading)の使い分け

Discussion