Как использовать мутации SWR с заданным начальным значением?

Question

Проблема в том, что если я уберу начальное значение, все заработает. Я думаю, что данные с начальными значениями не кешируются. Но я не знаю, как это решить. В случае с исходными данными mutate вернуть undefinded.

В компоненте страницы:

  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 также предоставляет функцию locate mutate, поэтому вам не нужно указывать URL-адрес в том же компоненте.

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

Answer 2

Я использую версию swr 1.2.2. Похоже, что после версии 1.0 initialData больше не существует. Он заменен на резервные данные