next.js - getServerSideProps 和 mysql (RowDataPacket)

Question

我想使用 getServerSideProps 使用 Next.js 进行服务器端渲染方法如 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.

我认为这样做的原因是，因为 query方法来自 mysql返回特殊对象( RowDataPacket )。我想传递给 getServerSideProps 的结果登录时看起来像这样:

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

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

所以，我的简单问题是: 使用方法 mysql.query和 getServerSideProps正确吗？

或者这可能是应该由 Next.js 解决的问题?

谢谢

Answer 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 日期会在页面水合时导致客户端出现问题。