Skip to content

Latest commit

 

History

History
188 lines (139 loc) · 8.76 KB

cache.ru.mdx

File metadata and controls

188 lines (139 loc) · 8.76 KB

import { Callout } from 'nextra-theme-docs'

Кеш

Обновитесь до последней версии (≥ 1.0.0), чтобы использовать этот функционал. В большинстве случаев вы не должны напрямую _писать_ в кеш, поскольку это может вызвать неопределенное поведение SWR. Если вам нужно вручную изменить ключ, рассмотрите возможность использования API SWR.
См. также: [Мутация](/docs/mutation), [Сброс кеша между тестами](#сброс-кеша-между-тестами).

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

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

Провайдер кеша [#cache-provider]

Поставщик кеша — это объект типа 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.

Создание провайдера кеша [#create-cache-provider]

Опция 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.

Если используется провайдер кеша, глобальный `mutate` **не** будет работать для хуков SWR в пределе этого ``. Пожалуйста, используйте [это](#доступ-к-текущему-провайдеру-кеша) взамен.

Доступ к текущему провайдеру кеша [#access-current-cache-provider]

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

import { useSWRConfig } from 'swr'

function Avatar() {
  const { cache, mutate, ...extraConfig } = useSWRConfig()
  // ...
}

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

Экспериментально: Расширение провайдера кеша [#experimental-extend-cache-provider]

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

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

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

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

Примеры [#examples]

Постоянный кеш на основе LocalStorage [#localstorage-based-persistent-cache]

Возможно, вы захотите синхронизировать свой кеш с 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.

Сброс кеша между тестами [#reset-cache-between-test-cases]

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

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

Модификация данных кеша [#modify-the-cache-data]

const { cache } = useSWRConfig()

cache.get(key) // Получить текущие данные для ключа.
вы не должны писать в кеш напрямую, это может привести к неопределенному поведению.

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

const { mutate } = useSWRConfig()

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

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