Utilizing Sequelize ORM in a Next.js App router, I am retrieving data from a MySQL database. The method "getTransactions" returns the following:
const { rows, count } = await Transaction.findAndCountAll({
limit,
offset,
where: whereClause,
order: [['created_at', 'DESC']],
});
return {
items: rows,
totalItems: count,
totalPages: Math.ceil(count / limit),
currentBalance,
};
When passing this data to a client component, a warning appears in the console:
Warning: Only plain objects can be passed to Client Components from Server Components. Objects with toJSON methods are not supported. Convert it manually to a simple value before passing it to props.
Server Component:
const data = await getTransactions({ page, limit, query: search });
return (
<TransactionsTable response={data} />
);
Client Component:
const TransactionsTable = ({ response }: { response : PaginatedTransactions | null }) => {
//TSX
}
I attempted to serialize and deserialize the data, ensuring that timestamps (created_at and updated_at) are converted to Dates before being sent to the client component. This resolved the issue and no warning is logged to the console. However, the necessity of this extra step remains unclear.
const data = await getTransactions({ page, limit, query: search });
const serialize = JSON.stringify(data);
const deserialize = JSON.parse(serialize, (key, value) => {
if (key === "created_at" || key === "updated_at") {
return new Date(value);
}
return value;
}) as PaginatedTransactions | null;
<TransactionsTable response={deserialize} />