useSWR中key发生变化时，即使key的数据已经存在于缓存中，如何显示Loading？

Question

我正在使用 useSWR 挂钩来获取数据。我想在按键发生变化时显示正在加载。我已将

filter

状态包含在 useSWR 的键中，因此每当状态更新时，它都会调用 API。

例如，在 UI 上，当我单击“已完成”复选框时（请参阅游乐场的 link），

isLoading

的值第一次为 true。然后，如果我取消选中并再次选中“已完成”复选框，则

isLoading

的值为 false，因为相同键的数据已存在于缓存中。

我知道 useSWR 钩子也暴露了

isValidating

。我无法使用它，因为我还每 5 秒轮询一次 api。因此，如果我在 UI 上使用

isValidating

，则每 5 秒就会显示一次加载。

我想在用户应用任何过滤器时显示“正在加载”。任何帮助将不胜感激

const [filter, setFilter] = useState({
   filterText: '',
   showCompleted: false,
});

const { data, error, isLoading, mutate } = useSWR(
    ['https://jsonplaceholder.typicode.com/todos', filter],
    async ([url, filter]) => {
        const res = await fetch(`${url}?completed=${filter.showCompleted}`);
        return await res.json();
    }
);

游乐场 - https://stackblitz.com/edit/vitejs-vite-n8hjaa?file=src%2FApp.jsx

Answer 1

isLoading 当有正在进行的请求且数据尚未加载时变为 true。 链接

换句话说，仅当缓存中没有数据时才使用

isLoading

（对于每个特定键）

让

swr

再次使用

isLoading

的一种方法是清除缓存而不触发重新验证（不调用 API 来设置新数据）。在下一次渲染中，由于没有可用的缓存，

swr

将再次以

isLoading

开始其模式

<input
    type="checkbox"
    onChange={(e) => {
      setFilter((prev) => ({ ...prev, showCompleted: e.target.checked }));
      mutate(undefined, { revalidate: false });
    }}
    checked={filter.showCompleted}
/>