在 NextJS 中使用 SWR 跨页面改变数据答案

【问题标题】：Mutate data across pages with SWR in NextJS在 NextJS 中使用 SWR 跨页面改变数据
【发布时间】：2020-10-27 22:31:55
【问题描述】：

我在 NextJS 项目中使用 SWR。我正在我的索引页面中获取数据列表。在我的创建页面中，我向数据添加了一个新条目。现在我想利用 SWR mutate 对缓存的数据进行变异，不要从服务器重新加载数据列表。

这在单个页面/组件中是可能的。但是，我不能在多个页面中执行此操作，因为在我重定向到索引页面后，数据会自动从服务器获取。

当前发生的事情：获取所有数据，重定向到创建页面，向数据添加单个条目，重定向到索引，获取所有数据

我想要的：获取所有数据，重定向到创建页面，向数据添加单个条目，重定向到索引，无需重新获取即可正确显示数据。

我在这里做了一个简单的演示：https://codesandbox.io/s/sad-pike-gzoc3?file=/pages/create.js 我使用mutate("https://swapi.dev/api/people/", "New Name", false); false 表示不应该重新获取。但它不起作用。

现在有谁可以避免使用 SWR mutate 重新获取？

【问题讨论】：

我认为你需要revalidateOnMount: false，然后你需要在React.useEffect()中手动执行对应的mutate()

标签： javascript reactjs next.js vercel

【解决方案1】：

在这个例子中，一个空数组被用作初始值，然后被变异。

  export const useSomething = () => {
  const { data } = useSWR(
    'dummy-key',
    async () => {
      return [];
    },
    {
      revalidateOnMount: !cache.get('dummy-key'),
      revalidateOnFocus: false,
      shouldRetryOnError: false,
    }
  );

  const setData = (data) => {
    mutate(
      'dummy-key',
      async (cacheData) => {
        return [...cacheData, data];
      },
      false
    );
  };

  return {
    data,
    setData,
  };
};

【讨论】：