javascript - 使用 swr 时可以只获取一次数据吗？

Question

例如，我使用 react 路由器切换到不同的页面:

const Apage = () => {
    const { data, error } = useSWR('/a-data', fetcher);
    return (
        <div>{data}</div>
    );
};

const Bpage = () => {
    const { data, error } = useSWR('/b-data', fetcher);
    return (
        <div>{data}</div>
    );
};

使用 swr，当我不是第一次访问该页面时，我可以立即获取数据。
但是，每次我访问页面时，它都会调用 api 来获取数据。
如果我不需要重新验证数据是否过时，我可以只获取一次数据吗？

Answer 1

驻波比 0.3.8
您应该防止由下一个选项控制的自动重新验证:

{
  revalidateOnFocus: false,
  revalidateOnMount:false,
  revalidateOnReconnect: false,
  refreshWhenOffline: false,
  refreshWhenHidden: false,
  refreshInterval: 0,
}

根据 documentation refreshWhenOffline , refreshWhenHidden和 refreshInterval默认情况下禁用，因此只需设置:

{
  revalidateOnFocus: false,
  revalidateOnMount:false,
  revalidateOnReconnect: false,
}

这将限制 SWR 运行 fetching 方法。但是，您仍然需要第一次运行才能获取数据。
你最终可能会得到这样的结果:

const useStaleSWR = (dataKey) => {
  const revalidationOptions = {
    revalidateOnMount: !cache.has(dataKey), //here we refer to the SWR cache
    revalidateOnFocus: false,
    revalidateOnReconnect: false,
  };

  return useSWR(dataKey, fetcher, revalidationOptions);
}

SWR 缓存从 0.2.0 version 开始公开

毕竟，我不建议为此目的使用 SWR。为再次获取数据而构建的 SWR。如果您有静态数据 - 获取一次并存储在 session /本地存储中或定义您自己的缓存。