Как получилось, что 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),
}}
>
.......