Я прочитал документы React-Query, но все еще не понимаю, как использовать staleTime и cacheTime для кэширования данных.
Я хочу хранить данные в течение 2 минут в кеше после первого вызова API. Независимо от того, монтируется или размонтируется компонент, мне не нужен вызов API в течение 2 минут после первого получения данных. Я использовал это, но он не вызывает API через 2 минуты, если я использую только безвременье, и он вызывает API каждый раз (компонент при монтировании и компонент при отключении), если я использую только время кэширования.
Так в чем проблема? и как лучше всего это сделать?
const query = useQuery("getuserlist", getusertList, {
// staleTime: 120000,
cacheTime: 120000,
});
🤔 А знаете ли вы, что...
JavaScript - это скриптовый язык программирования, разработанный Netscape Communications Corporation.
No matter component mounts or unmounts, I don't want an API call for 2 mins after the first time get data
Это то, что staleTime
делает. staleTime
сообщает вам, насколько свежи ваши данные. Очень похоже на Cache-Control: max-age=120
.
Поэтому, если вы установите staleTime: 120000
, в вашем примере вы гарантированно получите нет еще один сетевой запрос в течение двух минут после первого успешного.
cacheTime
это совсем другое. Думайте об этом как о времени сбора мусора. В основном он описывает, как долго данные должны храниться в кеше, прежде чем они могут быть удалены сборщиком мусора. Это относится только к неиспользуемым запросам, поскольку активные запросы по определению не могут быть удалены сборщиком мусора.
Я также обозначил эти различия в мой блог:
StaleTime: The duration until a query transitions from fresh to stale. As long as the query is fresh, data will always be read from the cache only - no network request will happen! If the query is stale (which per default is: instantly), you will still get data from the cache, but a background refetch can happen under certain conditions.
CacheTime: The duration until inactive queries will be removed from the cache. This defaults to 5 minutes. Queries transition to the inactive state as soon as there are no observers registered, so when all components which use that query have unmounted.
I used this but it does not call API after 2 min
Это что-то совершенно другое. Когда staleTime
истекает, ваши данные помечаются как устаревшие, но это не означает, что они будут немедленно обновлены. staleTime
по умолчанию zero
, так что это вообще не сработает.
Если вы хотите получать данные каждые 2 минуты, установите refetchInterval
:
refetchInterval: 120000