Как получилось, что useSWR выдает объект, когда ему нужен массив?

У меня есть useSWR, и я помещаю в него данные с SSR как начальные и получаю массив. Если я сделаю консольный журнал чатов из SSR, то они исправно отображают нормальную информацию.

Проблема в том, что useSWR иногда чудесным образом возвращает мне ОБЪЕКТ или даже становится пустым массивом во время второго журнала консоли. Как это возможно?

И самое удивительное, что аналогичная схема работает и на других страницах, где есть только 1 запрос useSWR (при необходимости могу доказать скриншотами или кодом, там то же самое). Но на странице где ЭТО произошло эти запросы 3. Давно ломаю голову, думаю это волшебство. Я склонен считать, что виноват спекулянт, но он это отрицает.

const ChatList: React.FC<IChatList> = ({ chats }) => {
  const { data, error } = useSWR("/api/chat/", {
    initialData: chats,
  });

  console.log(data);

  if (error) return <ErrorMessage message="Ошибка загрузки чатов..." />;

  if (!data) return <LoadingSpinner />;

  if (data.length === 0)
    return <EmptyMessage message="У вас пока нет чатов..." />;

  return (
    <SChatList>
      {data.map((item, key) => {
        return (
          <ChatListItem
            key={`chat__key__${item.user_name}__${key}`}
            id={item.id}
            userName={item.user_name}
            isNotify={false}
            isRead={item.is_read}
          />
        );
      })}
    </SChatList>
  );
};

Получите чаты от SSR:

export const getServerSideProps: GetServerSideProps<ISupport> = async (ctx) => {
  let chats: IChat[] | null = null;
  await instanceWithSSR(ctx)
    .get("/api/chat/")
    .then((response) => {
      chats = response?.data;
    })
    .catch((error) => {
      console.log(error);
    });
  return {
    props: {
      chats: chats || null,
    },
  };
};

Глобальная конфигурация useSWR:

<SWRConfig
          value={{
            revalidateOnMount: true,
            revalidateOnFocus: false,
            dedupingInterval: 5000,
            fetcher: (url) =>
              axios({
                url: url,
                baseURL: process.env.DB_HOST,
                headers: {
                  "Content-Type": "application/json",
                  Authorization: `Token ${Cookie.get("token")}`,
                },
              }).then((r) => r.data),
          }}
        >
.......

0 ответов

Другие вопросы по тегам