Используете ли вы React для своих проектов веб-разработки? Если это так, вы, возможно, слышали о SWR — мощном хуке для выборки данных, который обещает упростить и ускорить ваши процессы выборки данных. Но даже опытные разработчики могут бороться с нюансами эффективного использования SWR. Вот где это руководство приходит! Опираясь на свой собственный опыт неправильного использования SWR, я предоставлю доступный обзор наиболее важных аспектов этого инструмента, а также советы, как избежать распространенных ошибок. Независимо от того, являетесь ли вы опытным профессионалом или только начинаете работать с React, вы не захотите упустить эту возможность упростить выборку данных и вывести свои проекты на новый уровень.

Запрос

Функция useSWR имеет три параметра: key, fetcher и options?. Ключ используется для кэширования данных, поэтому, если данные обычно не изменяются или если мы вручную перепроверяем наши данные, мы можем использовать статический ключ, например /users, но когда наши данные изменяются из-за некоторых ключей или нескольких ключей, рекомендуется использовать динамический ключ, например:

const { data } = useSWR(`/users/${userId}`, fetcher)

// or

const { data } = useSWR([userId, customerId], fetcher)

Параметр fetcher используется для получения данных из нужного источника, например:

const { data } = useSWR(key, async () => {
  return await fetchMyData()
})

Объект options? используется для управления конкретным поведением запроса. Эти параметры можно задать индивидуально, на уровне запроса или в поставщике глобальной конфигурации SWRConfig. К вариантам? относятся, например:

// Controls whether the query can be sent or not
isPaused: () => boolean

// Controls how often to refresh data
refreshInterval: number

Изменение данных

Если вы хотите изменить свои данные, у вас есть два способа сделать это: связанное изменение или глобальное изменение. Связанное изменение — это деконструкция функции изменения из useSWR и Global Mutate — это когда вы импортируете функцию mutate из swr. Так в чем же разница?

// Bound Mutate
const { data, mutate } = useSWR(…)
…

// Mutates origin function by default, 
// no key needed, can be called where the function is
await mutate()

// Global Mutate
import { mutate } from "swr"

…

// Specific key is needed, can be called anywhere
await mutate(key)

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

isLoading или isValidating

В swr 2.0.0 добавлено состояние isLoading, которое срабатывает, когда у функции нет данных, и остается истинным до тех пор, пока не получит их либо из кеша, либо из вашего источника. С другой стороны, если кешированные данные по какой-либо причине устарели, например, при использовании статического ключа для динамической выборки данных, если вы используете isLoading для условного рендеринга, то вполне вероятно, что вы получите устаревшие данные. , либо до повторной проверки кеша, либо в худшем случае ваши компоненты получат эти данные и не обновят их.

Состояние isValidating было первоначальным состоянием загрузки, но когда вы хотите иметь кэшированные данные, оно обычно выполняется медленнее, поскольку будет ждать, чтобы проверить, является ли ваш кэш действительным или нет.

Вот — действительно хороший иллюстрированный способ продемонстрировать это в действии. TL;DR:

// Source: https://swr.vercel.app
function Stock() {
  const { data, isLoading, isValidating } = useSWR(STOCK_API, fetcher, {
  refreshInterval: 3000
  });

  // If it's still loading the initial data, there is nothing to display.
  // We return a skeleton here.
  if (isLoading) return <div className="skeleton" />;

  // Otherwise, display the data and a spinner that indicates a background
  // revalidation.
  return (
  <>
    <div>${data}</div>
    {isValidating ? <div className="spinner" /> : null}
  </>
  );
}

Полезные ссылки

Официальная документация по swr: Здесь

Также отличное объяснение swr 2.0.0: Здесь