getServerSideProps 和 mysql (RowDataPacket)答案

【问题标题】：getServerSideProps and mysql (RowDataPacket)getServerSideProps 和 mysql (RowDataPacket)
【发布时间】：2020-07-26 01:08:47
【问题描述】：

我想通过 Next.js 使用 getServerSideProps 方法（如 explained in the docs）进行服务器端渲染。

数据应该来自数据库，所以我使用mysql 包。这会导致以下错误：

Error serializing `.assertions[0]` returned from `getServerSideProps` in "/assertion". Reason: `object` ("[object Object]") cannot be serialized as JSON. Please only return JSON serializable data types.

我认为这是因为mysql 中的query 方法返回特殊对象（RowDataPacket）。我想传递给getServerSideProps 的结果在登录时如下所示：

[ RowDataPacket { id: 1, title: 'Test' } ]

我可以通过使用JSON.parse(JSON.stringify(result)) 包装结果来修复此错误，但这对我来说似乎很奇怪。

那么，我的简单问题是：如何正确使用mysql.query和getServerSideProps？

或者这是一个应该由Next.js 解决的问题？

谢谢

【问题讨论】：

标签： next.js node-mysql

【解决方案1】：

我自己也遇到过这个问题。当我遇到问题时，它与 MySQL 无关。问题是getServerSideProps() 期望您返回一个“JSON 可序列化数据类型”，这基本上意味着一个普通的 JavaScript 对象 (POJO)。

要修复它，只需创建一个新的 POJO 即可返回。您可以采取以下几种方式：

// using spread operator to create new object
const plainData = {
  ...queryResult
}

// recreating the object with plucked props
const plainData = {
  title: queryResult.title,
  content: queryResult.content
}

// data conversion (wax-on wax-off)
const plainData = JSON.parse(JSON.stringify(queryResult))

您的特定数据位于数组中，因此您最简单的解决方案是上蜡脱蜡，因为它支持数组。否则你必须映射它。

为什么？

您可以看到您的对象附加了RowDataPacket。这意味着它是RowDataPacket 的一个实例，NextJS 不允许任何实例，除非它严格等于Object.prototype（参见related code）

这看起来很奇怪，但他们已经描述了为什么需要in a Github Issue。 TL；DR 日期在页面水合时会导致客户端出现问题。

【讨论】：