Вот некоторые методы и приемы реализации сборщика данных с помощью SWR:

1. Базовая функция выборки. Самый простой способ использовать SWR — предоставить функцию выборки, которая выполняет выборку данных. Функция выборки может использовать встроенный API fetchили любую другую библиотеку HTTP для отправки запросов на сервер.

Пример:

import useSWR from 'swr';
const fetcher = (url) => fetch(url).then((res) => res.json());
const MyComponent = () => {
  const { data, error } = useSWR('/api/data', fetcher);
  if (error) return <div>Error: {error.message}</div>;
  if (!data) return <div>Loading...</div>;
  return <div>Data: {data}</div>;
};

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

Пример:

const fetcher = (url) => fetch(url, { headers: { Authorization: 'Bearer token' } }).then((res) => res.json());

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

Пример:

const fetcher = (url) => fetch(url).then((res) => res.json());
const MyComponent = () => {
  const { data, error, size, setSize } = useSWR('/api/data', fetcher, { initialData: [] });
  const loadMore = () => {
    setSize(size + 1);
  };
  if (error) return <div>Error: {error.message}</div>;
  if (!data) return <div>Loading...</div>;
  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
      <button onClick={loadMore}>Load More</button>
    </div>
  );
};