我想在Next.js中使用Tansack Table构建一个表。我在MySQL数据库上使用Prisma。
使用Date对象(在数据库中存储)的最佳方法是什么?我知道我可以序列化和反序列化数据来让它工作,但它给我的印象是混乱的。
当我序列化数据时,当我将props从getStaticProps
传递到页面时,我丢失了类型。
解决方案是否只是为了避免使用Date对象(即只是保持它们序列化)并使用字符串?
使用我的数据库公开的类型(下面的示例中为PostData
)作为在整个应用程序中使用的类型似乎是一个不错的做法。但如何做到这一点,而不手动转换变量来回?
//pages/columns.tsx
const post = Prisma.validator<Prisma.Post>()({
select: {
id: true, // type string
title: true, //type string
lastModified: true, //type Date
});
export type PostData = Prisma.PostGetPayload<typeof post>; //I'm hoping this is the type I can reuse throughout my app, especially when I render the table on the client.
const columnHelper = createColumnHelper<PostData>();
export const columns = [
columnHelper.accessor("title", {
header: "Title",
}),
columnHelper.accessor("lastModified", {
header: "Last Modified",
})
]
//pages/index.tsx
export const getStaticProps: GetStaticProps = async () => {
//get the data from the DB
const result = await prisma.post.findMany({
select: {
id: true,
title: true,
lastModified: true,
},
});
// Serialize data by converting Date objects to string representations
const data = result.map((row) => ({
...row,
lastModified: row.lastModified.toISOString() // Convert to ISO string representation
}));
return {
props: {
data,
},
};
};
const Home = ({data}) => {
console.log(data) // This works. But data is of type "any" now.
// I would like data to be of type PostData
// but for that to happen I would now need to convert 'lastModified'
// back to type Date. Manually casting it back to be type Date seems...
// bad practice (?), though I could be wrong.
return (
<>
//render the table here
</>)
}
export default Home;
1条答案
按热度按时间qzlgjiam1#
好的,看起来解决方案是安装这个插件:https://github.com/blitz-js/next-superjson-plugin
在
getStaticProps
中定义类型,如下所示:这样,
data
在组件内部的类型为PostData[]
,如here所解释的。