SWR 挂钩不反映数据库更改

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}
    </>
  );
}

这个是用来显示首页浏览量的

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 });

或者在 API 的 API 请求之后使用 mutation 自己明确更新数据。

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}</>);
}

SWR 挂钩不反映数据库更改

SWR hook not reflecting database change

reactjs

aws-lambda

next.js

swr