如何使用给定的初始值进行 useSWR 突变？

Question

问题是，如果我删除初始值，那么一切正常。我认为没有缓存具有初始值的数据。但我不知道如何解决这个问题。如果初始数据发生变异 return 未定义。

在页面组件中：

  const { data, error } = useSWR("/api/company/", {
    initialData: company,
  });

export const getServerSideProps: GetServerSideProps<IManage> = async (ctx) => {
  ensureAuth(ctx);
  let company: ICompany[] | null = null;
  await instanceWithSSR(ctx) // axios config
    .get(`/api/company/`)
    .then((response) => {
      company = response?.data;
    })
    .catch((error) => {
      console.log(error);
    });
  return {
    props: {
      company: company || null,
    },
  };
};

我的突变：

  mutate(url, async (company: ICompany[]) => {
    console.log(company)
    if (company) {
      return [...company, companyItem];
    }
  }, false);

Answer 1

我不确定你的公司有效载荷，但对于初始值，它在装载时不会重新验证，所以你需要将 revalidateOnMount 设置为 true。

 const { data, error, mutate } = useSWR("/api/company/", {
    initialData: company,
    revalidateOnMount: true
  });

useSWR 还提供定位突变，因此您无需在同一组件中提供 url。

mutate(async(prev) => [...prev, companyItem])

Answer 2

我使用的是swr 1.2.2版本。看起来在 1.0 版本之后 initialData 不再存在。它替换为 fallbackData

如何使用给定的初始值进行 useSWR 突变？

How to make useSWR mutations with a given initial value?

reactjs

next.js

swr