reactjs - SWR Hook 不反射(reflect)数据库更改

Question

此组件用于计算部署在 AWS Lambda 上的 Next.js 应用程序页面级别的浏览量

function ViewsCounter({ slug }: { slug: string }) {
  const { data } = useSWR(`/api/views/${slug}`, fetcher);
  const views = new Number(data?.total);

  useEffect(() => {
    const registerView = () =>
      fetch(`/api/views/${slug}`, { method: "POST" })
        .catch(console.log);
    registerView();
  }, [slug]);

  return (
    <>
      {views}
    </>
  );
}

这个是用来在首页显示view

function ViewsDisplay({ slug }: { slug: string }) {
  const { data } = useSWR(`/api/views/${slug}`, fetcher);
  const views = new Number(data?.total);

  return (
    <>
      {views}
    </>
  );
}

虽然它在本地主机上按预期工作，但看起来它只显示第一个获取的值并且出于某种原因不会重新验证它。
访问页面时，Counter被正确触发，DB中的值发生变化。
可能与变异有关，欢迎提供任何提示。

Answer 1

useSWR 默认情况下不会自动重新获取数据。

您可以使用 refreshInterval 启用自动重新获取选项。

const { data } = useSWR(`/api/views/${slug}`, fetcher, { refreshInterval: 1000 });

或者使用 mutation 自己显式更新数据在向 API 发出 POST 请求之后。

function ViewsCounter({ slug }: { slug: string }) {
    const { data, mutate } = useSWR(`/api/views/${slug}`, fetcher);
    const views = new Number(data?.total);

    useEffect(() => {
        const registerView = () =>
            fetch(`/api/views/${slug}`, { method: "POST" })
                .then(() => {
                    mutate();
                })
                .catch(console.log);
        registerView();
    }, [slug]);

    return (<>{views}</>);
}