@vovashaplin

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

У меня есть useSWR и в него кладу данные c 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 часть от которой приходят chats:
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,
    },
  };
};


Вот глобальные настройки:
<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),
          }}
        >
.......
  • Вопрос задан
  • 111 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы