Повторная проверка данных с помощью изменения в SWR - что мне использовать?

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

Чтобы обеспечить лучший пользовательский опыт, я хотел, чтобы пользователь видел новый контент в приложении, не обновляя страницу.

Я знаю о существовании мутации SWR, но пока не могу заставить ее работать.

Я попытался установить 1000 мс refreshIntervalв моем крючке, но я хотел знать, как это сделать, используя функцию mutate. Вот что я пробовал:

КСВ крюк

const fetcher = async (url: string, param: string) => {
    const res = await fetch(url + param);
    
   return res.json();
};


const { data, error } = useSWR(
 ["/api/albums/list?id=", appUser.id],
  (url, params) => fetcher(url, params)
);

Внутри createAlbum функция:

const data = await response.json();

mutate("/api/albums/list", data.newAlbums, false);

Буду рад получить обратную связь.

Источник

3 ответа

Решение

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

Использование global mutate

Для решения этой проблемы с помощью mutate функция экспортируется напрямую swr, достаточно передать один и тот же ключ обоим useSWR и mutate.

mutate(["/api/albums/list?id=", appUser.id]);

Это сделает недействительным кеш для хешированного ключа. Данные, полученные из вашего исходного хука, станут устаревшими и, следовательно, будут извлечены снова.

Использование связанной мутации

Другой вариант - воспользоваться mutate функция привязана к ключу swr.

const { data, error, mutate } = useSWR(
   ["/api/albums/list?id=", appUser.id],
   (url, params) => fetcher(url, params)
);

/*
 * Now you can just call `mutate()` without specifying `key` argument
 */

документы: https://github.com/vercel/swr#bound-mutate

Указание интервала обновления

Как вы сказали, для полноты картины можно было бы просто установить значение refreshIntervalопора Принудительное повторное получение при желании:

const { data, error } = useSWR(
   ["/api/albums/list?id=", appUser.id],
   (url, params) => fetcher(url, params),
   {
     refreshInterval: 1000, 
   }
);
Источник

Вы можете сделать как следует

const { data, mutate, error } = useSWR(
 ["/api/albums/list?id=", appUser.id],
  (url, params) => fetcher(url, params)
);

чтобы перезагрузить кеш swr просто позвоните mutate();.

Это изменение относится к вызову загрузки альбома. Swr автоматически обновляет ваши данные.

Источник

Причина, по которой ваш пользовательский интерфейс не обновляется после изменения, заключается в том, что первый аргумент передан в mutate() и useSWR() не подходят друг другу.

Первый аргумент - это, по сути, уникальный ключ, который SWR использует для связи ловушки с изменением. Обновите свой вызов mutate, чтобы использовать тот же ключ, что и перехватчик, и это должно решить вашу проблему.

mutate("/api/albums/list?id=", data.newAlbums, false);
Источник
Другие вопросы по тегам