getServerSideProps 和 mysql (RowDataPacket) [英] getServerSideProps and mysql (RowDataPacket)

问题描述

我想使用 getServerSideProps 方法使用 Next.js 进行服务器端渲染，例如 在文档中解释.

I'd like to do server side rendering with Next.js using the getServerSideProps method like explained in the docs.

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

The data should come from a database, so I'm using the mysql package. This results in the following error:

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 的结果在记录时如下所示:

I think the reason for this is, because the query method from mysql returns special objects (RowDataPacket). The result that I'd like to pass to getServerSideProps looks like this when logged:

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

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

I can fix this error by wrapping the result with JSON.parse(JSON.stringify(result)) but this seems very odd to me.

所以，我的简单问题是:如何正确使用 mysql.query 和 getServerSideProps?

So, my simple question is: How to use mysql.query and getServerSideProps correctly?

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

Or might this be an issue that should be addressed by Next.js?

谢谢

推荐答案

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

I've run into this issue myself. When I had the issue it wasn't related to MySQL. The problem is getServerSideProps() expects you to return a "JSON serializable data type" which basically means a Plain ol' JavaScript Object (POJO).

要修复它，只需创建一个新的 POJO 即可返回.您可以采用的几种方法是:

To fix it, simply create a new POJO to return. A few ways you can go are:

// 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))

您的特定数据在一个数组中，因此您最简单的解决方案是上蜡脱蜡，因为它将支持数组.否则，您必须对其进行映射.

Your specific data is in an array so your simplest solution is the wax-on wax-off since it will support arrays. Otherwise you've got to map over it.

您可以看到您的对象附加了 RowDataPacket.这意味着它是 RowDataPacket 的一个实例，NextJS 不允许任何实例，除非它严格等于 Object.prototype(参见 相关代码)

You can see your object has RowDataPacket attached to it. This means it's an instance of RowDataPacket and NextJS doesn't allow any instances unless it strictly equals the Object.prototype (see related code)

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

This seems weird, but they have already described why it's necessary in a Github Issue. TL;DR dates cause issues client-side when the page hydrates.

这篇关于getServerSideProps 和 mysql (RowDataPacket)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！