::: React Queryメモ :::
cacheTimeとstaleTime
cacheTimeはデータをキャッシュする時間。デフォルトで5分。
staleTimeはキャッシュされたデータを古いとみなす時間。デフォルトで0(キャッシュを見る度にfetchが走る)。
useQueryの挙動
例えばuseQuery(['todos'], fetchTodos)インスタンスが新しくマウントされると
['todos']クエリキーにfetchしたデータのキャッシュが格納される。
このuseQuery hookはstaleTimeが経過した時にデータを古いものとみなす。
useQuery(['todos'], fetchTodos)インスタンスがもうひとつマウントされると
['todos']クエリキーのキャッシュデータが返される。
fetchが成功すると['todos']クエリキーにfetchしたデータのキャッシュが格納される。
2つのインスタンスがアンマウントされて使われなくなっても、cacheTime(デフォルトで5分)が経過する前に別のインスタンスがマウントされた場合は、バックグラウンドでfetchTodos関数を動かしつつ、キャッシュされたデータをまず返し、fetchTodosが成功したら新しいデータをキャッシュする。
全てのインスタンスがアンマウントされ、cacheTime(デフォルトで5分)が経過すると、キャッシュされていたデータは削除され、ガベージコレクションとなる。
staleTimeをinfinityにすると
staleTimeをinfinityにすると、キャッシュは常に新しいものとみなされるため、バックグラウンドでのfetchが自動的に行われずに済む。(無駄なfetchを減らすことができる)
最新データを取得したい場合は、queryClient.invalidateQueries("todos")を実行することで、意図したタイミングで再度fetchを走らせることができる。
useQueryの第一引数
useQueryの第一引数は配列。
たとえばuseQuery(['todos', 'todo-id'], fetchTodos)だった場合は、
queryClient.invalidateQueries(['todos'])と記述することでtodosに関する全てのキャッシュを、
queryClient.invalidateQueries(['todos', 'todo-id'])と記述することである特定のキャッシュだけを無効化することができる。
参照
Discussion