Что такое staleTime, cacheTime в React-Query

Я прочитал документы React-Query, но все еще не понимаю, как использовать staleTime и cacheTime для кэширования данных.

Я хочу хранить данные в течение 2 минут в кеше после первого вызова API. Независимо от того, монтируется или размонтируется компонент, мне не нужен вызов API в течение 2 минут после первого получения данных. Я использовал это, но он не вызывает API через 2 минуты, если я использую только безвременье, и он вызывает API каждый раз (компонент при монтировании и компонент при отключении), если я использую только время кэширования.

Так в чем проблема? и как лучше всего это сделать?

     const query = useQuery("getuserlist", getusertList, {
        // staleTime: 120000,
         cacheTime: 120000,
      
      });

🤔 А знаете ли вы, что...
JavaScript - это скриптовый язык программирования, разработанный Netscape Communications Corporation.


1
351
1

Ответ:

Решено

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