Кеш

💡

Обновитесь до последней версии (≥ 1.0.0), чтобы использовать этот функционал.

⚠️

В большинстве случаев вы не должны напрямую писать в кеш, поскольку это может вызвать неопределенное поведение SWR. Если вам нужно вручную изменить ключ, рассмотрите возможность использования API SWR.
См. также: Мутация, Сброс кеша между тестами.

По умолчанию SWR использует глобальный кеш для хранения и обмена данными между всеми компонентами. Но вы также можете настроить это поведение с помощью опции provider в SWRConfig.

Провайдеры кеша предназначены для включения SWR с более индивидуализированными хранилищами.

Провайдер кеша

Поставщик кеша — это объект типа Map, который соответствует следующему определению TypeScript (может быть импортировано из swr):

interface Cache<Data> {
  get(key: string): Data | undefined
  set(key: string, value: Data): void
  delete(key: string): void
  keys(): IterableIterator<string>
}

Например, экземпляр JavaScript Map (opens in a new tab) можно напрямую использовать в качестве провайдера кеша для SWR.

Создание провайдера кеша

Опция provider в SWRConfig получает функцию, которая возвращает провайдер кеша. Затем провайдер будет использоваться всеми хуками SWR в пределах SWRConfig. Например:

import useSWR, { SWRConfig } from 'swr'
 
function App() {
  return (
    <SWRConfig value={{ provider: () => new Map() }}>
      <Page/>
    </SWRConfig>
  )
}

Все хуки SWR внутри <Page/> будут читать и писать из этого экземпляра Map. Вы также можете использовать другие реализации поставщика кеша для вашего конкретного случая использования.

💡

В приведённом выше примере, когда компонент <App /> повторно монтируется, провайдер также будет повторно создан. Провайдеры кеша должны быть размещены выше в дереве компонентов или вне рендеринга.

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

⚠️

Если используется провайдер кеша, глобальный mutate не будет работать для хуков SWR в пределе этого <SWRConfig>. Пожалуйста, используйте это взамен.

Доступ к текущему провайдеру кеша

Находясь внутри компонента React, вам нужно использовать хук useSWRConfig, чтобы получить доступ к текущему провайдеру кеша, а также к другим конфигурациям, включая mutate:

import { useSWRConfig } from 'swr'
 
function Avatar() {
  const { cache, mutate, ...extraConfig } = useSWRConfig()
  // ...
}

Если он не находится под каким-либо <SWRConfig>, он вернет конфигурации по умолчанию.

Экспериментально: Расширение провайдера кеша

🧪

Это экспериментальный функционал, его поведение может измениться в будущих обновлениях.

Когда несколько компонентов <SWRConfig> вложены, провайдер кеша может быть расширен.

Первым аргументом для функции provider является поставщик кеша верхнего уровня <SWRConfig> (или кеш по умолчанию, если нет родительского <SWRConfig>), вы можете использовать его для расширения провайдера кеша:

<SWRConfig value={{ provider: (cache) => newCache }}>
  ...
</SWRConfig>

Примеры

Постоянный кеш на основе LocalStorage

Возможно, вы захотите синхронизировать свой кеш с localStorage. Вот пример реализации:

function localStorageProvider() {
  // При инициализации мы восстанавливаем данные из `localStorage` в Map.
  const map = new Map(JSON.parse(localStorage.getItem('app-cache') || '[]'))
 
  // Перед выгрузкой приложения мы записываем все данные обратно в `localStorage`.
  window.addEventListener('beforeunload', () => {
    const appCache = JSON.stringify(Array.from(map.entries()))
    localStorage.setItem('app-cache', appCache)
  })
 
  // Мы по-прежнему используем map для записи и чтения для производительности.
  return map
}

Затем используйте его как провайдер:

<SWRConfig value={{ provider: localStorageProvider }}>
  <App/>
</SWRConfig>

💡

В качестве улучшения вы также можете использовать кеш памяти в качестве буфера и периодически записывать в localStorage. Вы также можете реализовать аналогичный многоуровневый кеш с помощью IndexedDB или WebSQL.

Сброс кеша между тестами

При тестировании приложения вы можете сбросить кеш SWR между тестами. Вы можете просто обернуть ваше приложение пустым провайдером кеша. Вот пример с Jest:

describe('тестирование', async () => {
  it('тестовый пример', async () => {
    render(
      <SWRConfig value={{ provider: () => new Map() }}>
        <App/>
      </SWRConfig>
    )
  })
})

Модификация данных кеша

const { cache } = useSWRConfig()
 
cache.get(key) // Получить текущие данные для ключа.

🚨

вы не должны писать в кеш напрямую, это может привести к неопределенному поведению.

Вы можете использовать mutate для модификации кеша. Например, вы можете очистить все данные кеша, как показано ниже.

const { mutate } = useSWRConfig()
 
mutate(
  key => true, // какие ключи кеша обновляются
  undefined, // обновить данные кеша до `undefined`
  { revalidate: false } // не ревалидировать
)

Дополнительную информацию можно найти здесь.

Понимание SWR Производительность