Хук useSWR: загрузка, состояние загрузки и ошибки

useSWR(key, fetcher, options) — основной хук. key — это ключ кэша (обычно строка URL), fetcher — асинхронная функция, возвращающая данные, а options — необязательный объект конфигурации.

Хук возвращает объект с полями data, error, isLoading, isValidating и функцией mutate.

Ключом может быть строка URL, массив [url, params] или null. Строковые ключи соответствуют простым GET-запросам. Ключи-массивы позволяют включать такие переменные, как userId или фильтры, в идентификатор кэша.

Передача null полностью отключает запрос; это удобно для условного получения данных, когда необходимые данные ещё недоступны.

Функция получения данных получает ключ (или элементы ключа-массива в виде отдельных аргументов) и должна возвращать Promise. Полученное значение становится значением data. Если функция получения данных выдаёт исключение, устанавливается свойство error.

Пример: (url) => fetch(url).then(r => { if (!r.ok) throw new Error(r.status); return r.json(); }).

При первой загрузке data имеет значение undefined, а после успешного выполнения содержит значение, возвращённое функцией получения данных. error имеет значение undefined, если функция получения данных не выдала исключение; в противном случае в нём хранится объект выданной ошибки.

Проверяйте if (error), чтобы отобразить сообщение об ошибке, и if (!data), чтобы показать каркас загрузки и предоставить понятные резервные интерфейсы.

isLoading имеет значение true только при отсутствии кэшированных данных и выполняющемся запросе — во время самой первой загрузки этого ключа. isValidating имеет значение true каждый раз, когда выполняется запрос, включая фоновые ревалидации при наличии кэшированных данных.

Используйте isLoading для экранов загрузки, а isValidating — для ненавязчивого индикатора фонового обновления.

SWRConfig позволяет задать функцию получения данных по умолчанию, dedupingInterval, refreshInterval, обработчик onError и другие параметры для всех вызовов useSWR внутри своего поддерева. Это централизует конфигурацию и избавляет от повторения параметров в каждом хуке.

Вкладывайте несколько провайдеров SWRConfig, чтобы задавать разные значения по умолчанию для разных разделов приложения.

Передайте null в качестве ключа, чтобы пропустить запрос: useSWR(isLoggedIn ? '/api/user' : null, fetcher). SWR не будет выполнять запрос, пока ключ не станет ненулевым значением.

Это понятнее, чем параметр skip в React Query. Переход ключа от null к строке автоматически запускает первый запрос.

Объединяйте хуки SWR для зависимых запросов: const { data: user } = useSWR('/api/me', fetcher) затем const { data: orders } = useSWR(user ? '/api/orders/' + user.id : null, fetcher). Второй хук ожидает завершения первого.

Этот подход избавляет от цепочек useEffect и сохраняет зависимости данных декларативными и понятными.

Если компоненты Header и Sidebar оба вызывают useSWR('/api/user', fetcher), SWR выполняет только один запрос и передаёт его результат обоим компонентам. Оба компонента перерисовываются одновременно при обновлении data или error.

Это устранение дубликатов происходит автоматически в течение окна dedupingInterval (по умолчанию 2000 мс), без дополнительной настройки.

refreshInterval: 5000 выполняет опрос каждые 5 секунд. refreshWhenHidden: false прекращает опрос, когда вкладка невидима. shouldRetryOnError: false отключает автоматический повтор. revalidateOnFocus: false отключает ревалидацию при возвращении фокуса.

Комбинируйте параметры в соответствии с требованиями к актуальности данных: в панелях мониторинга часто используют refreshInterval, а для статического содержимого задают revalidateOnFocus: false.

Для постраничных данных включите номер страницы в ключ: useSWR(['/api/items', page], fetcher). При смене страницы запускается новый запрос для этой страницы, а предыдущие страницы кэшируются.

SWR также предоставляет useSWRInfinite для сценариев с курсорами или бесконечной прокруткой, используя функцию getKey, которая формирует ключи на основе индекса страницы и данных предыдущей страницы.

Что происходит, если передать null в качестве ключа для useSWR?

useSWR(key, fetcher) возвращает data, error, isLoading и isValidating. Ключи null отключают получение данных для условных и зависимых запросов. isLoading обозначает первую загрузку, а isValidating — любой выполняющийся запрос. SWRConfig централизует значения по умолчанию, а устранение дубликатов запросов между компонентами происходит автоматически.

Такие параметры, как refreshInterval, revalidateOnFocus и shouldRetryOnError, позволяют настраивать поведение, связанное с актуальностью данных, для отдельного хука или глобально.