import { Callout } from 'nextra-theme-docs'
Обновитесь до последней версии (≥ 1.0.0), чтобы использовать этот функционал. В большинстве случаев вы не должны напрямую _писать_ в кеш, поскольку это может вызвать неопределенное поведение SWR. Если вам нужно вручную изменить ключ, рассмотрите возможность использования API SWR.См. также: [Мутация](/docs/mutation), [Сброс кеша между тестами](#сброс-кеша-между-тестами).
По умолчанию 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 можно напрямую использовать в качестве провайдера кеша для SWR.
Опция provider
в SWRConfig
получает функцию, которая возвращает провайдер кеша.
Затем провайдер будет использоваться всеми хуками SWR в пределах SWRConfig
. Например:
import useSWR, { SWRConfig } from 'swr'
function App() {
return (
<SWRConfig value={{ provider: () => new Map() }}>
<Page/>
</SWRConfig>
)
}
Все хуки SWR внутри <Page/>
будут читать и писать из этого экземпляра Map. Вы также можете использовать
другие реализации поставщика кеша для вашего конкретного случая использования.
import { Cache } from 'components/diagrams/cache'
В случае вложенности, хуки SWR будут использовать провайдер кеша верхнего уровня. Если нет провайдера кеша
верхнего уровня, он возвращается к провайдеру кеша по умолчанию, который является пустым Map
.
Находясь внутри компонента 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
. Вот пример реализации:
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>
При тестировании приложения вы можете сбросить кеш 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 } // не ревалидировать
)
Дополнительную информацию можно найти здесь.