在NextJS中使用SWR在页面之间突变数据

Question

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

这可以在单个页面/组件中实现。但是，我不能在多个页面中这样做，因为在重定向到索引页面后，数据会自动从服务器中提取。

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

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

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

现在有人知道我如何避免SWR突变的重新蚀刻吗？

Answer 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,
};
};