Как React Query или Apollo Client обеспечивает обновление данных?

2

И React Query, и Apollo Client кэшируют ответ API, и во второй раз новый запрос не отправляется, но данные возвращаются из кеша. И, если данные изменяются на сервере, данные также обновляются в кеше.

  1. Но как React Query или клиент Apollo знает, когда отправлять новый запрос API или когда отправлять данные из кеша? Происходят ли какие-либо фоновые сетевые запросы?

  2. Если да, то почему мы не видим ни одного запроса API на вкладке сети, когда данные возвращаются из кеша?

  3. Если React Query отправляет запросы API в фоновом режиме, чтобы проверить, обновились ли данные, не является ли это пустой тратой ресурсов, потому что мы отправляем ненужные вызовы API в фоновом режиме и, возможно, данные никогда не меняются, но мы постоянно отправляем запросы API?

Я попытался найти это, но не смог найти удовлетворительного ответа. Везде говорится, что данные кешируются и кеш обновляется, но как это происходит? Кто-нибудь может объяснить процесс?

1

Попытка ответить с точки зрения реактивных запросов:

  1. But how does React Query or Apollo client knows that when to send a new API request or when to send data from cache? Are there any background network requests going on?

React Query включает в себя механизм кэширования устаревших при повторной проверке, что означает, что, когда в кеше есть данные, вы получите их мгновенно (даже если они могут быть устаревшими), а затем могут быть фоновые обновления на стратегические точки во времени . К этим моментам времени относятся, когда вы перефокусируете окно браузера или когда монтируется новый компонент, который использует запрос. RQ ли не заново получать на каждый повторно вынести.

  1. If so then why don't we see any of the API request in the network tab when data is returned from the cache?

обновляются только устаревшие запросы - это можно настроить, установив staleTime . Значение по умолчанию - 0(ноль), поэтому каждый запрос по умолчанию считается устаревшим, так что response-query может обновлять его в эти стратегические моменты времени. Поэтому, если запрос не устарел или вы не достигли одной из этих стратегических точек, вы просто получите данные из кеша без фоновой повторной выборки.

  1. If React Query is sending API requests in background to check if data has updated, isn't it the waste of resources because we are sending unnecessary API calls in the background and may be the data never changes but we are continuously sending API requests?

Потенциально да, но это зависит от вашего ресурса. React Query по умолчанию пытается оптимизировать точность данных, а не минимизировать количество сетевых запросов. Это можно настроить, установив staleTime. Если вы хотите получить только один раз и никогда больше не обновлять, попробуйте установить более высокое значение staleTime.

Я пытаюсь осветить это в своей статье React Query as a State Manager :

The answer depends totally on our problem domain. If we fetch a Twitter post with all its likes and comments, it is likely outdated (stale) pretty fast. If we fetch exchange rates that update on a daily basis, well, our data is going to be quite accurate for some time even without refetching.

Другой способ оптимизировать частоту попадания запросов в серверную часть - использовать http-кеширование. Вы можете увидеть это в действии в простом примере из документации , где мы запрашиваем github api. Он отвечает следующим заголовком управления кешем:

cache-control: public, max-age=60, s-maxage=60

Это означает, что даже если response-query пытается выполнить повторную выборку для каждого фокуса вкладки браузера, сетевые запросы не будут попадать в github api в течение следующих 60 секунд. Вы по-прежнему можете увидеть запрос на вкладке сети в инструментах разработчика вашего браузера, но вместо этого ответ будет приходить из "дискового кеша".

3
  • Большое спасибо за ответ. Пожалуйста, поправьте меня, если я ошибаюсь. Итак, вы имеете в виду, что данные для пользовательского интерфейса возвращаются из кеша, но в фоновом режиме сетевые запросы выполняются всякий раз, когда вы нажимаете на пользовательский интерфейс или снова загружаете этот компонент. Обновление данных в пользовательском интерфейсе не гарантируется. Цель RQ - не минимизировать сетевой запрос, а сделать приложение быстрым и удобным.
    newbie
    19 сен в 11:49
  • И еще один вопрос: не является ли слишком много сетевых запросов плохим подходом, потому что какой-то запрос может занять много времени, чтобы вернуть данные?
    newbie
    19 сен в 11:50
  • 1
    В значительной степени да. Опять же, ваша работа как разработчика - настроить это под свои нужды. Если запрос стоит дорого и не должен часто обновляться, возможно, установите для этого запроса большое значение staleTime Infinity. response-query не делает никаких предположений о вашей проблемной области и, следовательно, не знает об этом
    TkDodo
    19 сен в 15:08