はじめに
TanStack Query（旧 React Query）でデータを更新したあとに invalidateQueries を呼んだ際に、その挙動が直感的に分かりづらかったため、この記事ではその仕組みを簡単にまとめます。
invalidateQueries とは何か
問題
データを更新したあとに invalidateQueries を呼んだ際に、一時的に古いデータが表示される挙動がありました。なぜこのような挙動になるのかが気になり、仕組みを調べました。
invalidateQueries とは
invalidateQueries を簡単に説明すると、キャッシュを stale（古い）状態にして、次に useQuery がデータを取得する際に最新かどうかを確認できる状態にするためのメソッドです。
TanStack Query は、一度取得したデータをキャッシュとして保存し、それを再利用します。
データを更新したあとに invalidateQueries を呼ぶと、キャッシュは即時削除されませんが、stale（古い）状態として扱われるようになります。
それは、本当に古い情報だった場合は新たに最新のものを取得してもいいよ、という状態になるということです。
なぜ stale するのか
なぜこのようなことをするかというと、毎回新しいものを取得すると通信が増えてしまったり、画面表示が遅くなったりするので、一旦キャッシュを表示しつつ、必要なタイミングで最新かどうかを確認して取得するようにしています。
invalidateQueries は、データ更新後にキャッシュを stale（古い）状態にするための役割を担っています。
なぜ古い状態のデータが表示されていたのか
データを更新したあとに invalidateQueries を呼んだにもかかわらず古いデータが一時的に表示されていたのは、キャッシュが削除されず、そのまま画面に表示され続けていたためです。
その後にデータが取得されたため、最新のものが表示されるようになったということです。
さいごに
invalidateQueries は、キャッシュを stale（古い）状態にして、次に useQuery がデータを取得する際に最新かどうかを確認できる状態にするためのメソッドということがわかりました。
この辺りの挙動はしっかりと理解していないと意図しないものになってしまうので、気をつけようと思いました。