object ("[object Decimal]") cannot be serialized as JSON

[abriginets]

Bug description

Hello. I have a model City in my prisma schema with coordinates (latitude and longitude fields):

model City {
  id              Int               @id @default(autoincrement())
  slug            String            @unique
  country         Country           @relation(fields: [countryCode], references: [code])
  countryCode     String            @db.Char(2)
  code            String            @unique @db.Char(3)
  latitute        Decimal?          @db.Decimal(9, 6)
  longitude       Decimal?          @db.Decimal(9, 6)
  name            String
  timezone        String?
  CityTranslation CityTranslation[]
  CityCase        CityCase[]
}

But when I'm trying to acces this data using Prisma I get the following error:

SerializableError: Error serializing `.popularDirections.originCity.latitute` returned from `getServerSideProps` in "/".
Reason: `object` ("[object Decimal]") cannot be serialized as JSON. Please only return JSON serializable data types.

This is pretty strange because I thought Prisma would convert DECIMAL type to JavaScript's float automatically.

How to reproduce

Expected behavior

No response

Prisma information

model City {
  id              Int               @id @default(autoincrement())
  slug            String            @unique
  country         Country           @relation(fields: [countryCode], references: [code])
  countryCode     String            @db.Char(2)
  code            String            @unique @db.Char(3)
  latitute        Decimal?          @db.Decimal(9, 6)
  longitude       Decimal?          @db.Decimal(9, 6)
  name            String
  timezone        String?
  CityTranslation CityTranslation[]
  CityCase        CityCase[]
}

Environment & setup

• OS: Windows 10 WSL2 Ubuntu 20.04
• Database: PlanetScale MySQL
• Node.js version: 12.22.1

Prisma Version

prisma               : 2.29.1
@prisma/client       : 2.29.1
Current platform     : debian-openssl-1.1.x
Query Engine         : query-engine 1be4cd60b89afa04b192acb1ef47758a39810f3a (at node_modules/@prisma/engines/query-engine-debian-openssl-1.1.x)
Migration Engine     : migration-engine-cli 1be4cd60b89afa04b192acb1ef47758a39810f3a (at node_modules/@prisma/engines/migration-engine-debian-openssl-1.1.x)
Introspection Engine : introspection-core 1be4cd60b89afa04b192acb1ef47758a39810f3a (at node_modules/@prisma/engines/introspection-engine-debian-openssl-1.1.x)
Format Binary        : prisma-fmt 1be4cd60b89afa04b192acb1ef47758a39810f3a (at node_modules/@prisma/engines/prisma-fmt-debian-openssl-1.1.x)
Default Engines Hash : 1be4cd60b89afa04b192acb1ef47758a39810f3a
Studio               : 0.419.0
Preview Features     : planetScaleMode, nApi

[janpio]

This is pretty strange because I thought Prisma would convert DECIMAL type to JavaScript's float automatically.

The Decimal type is turned into a special Decimal type on the Javascript side, to not lose any data and precision there. Related issue: #6049

Here it is documented on how to create one: https://www.prisma.io/docs/concepts/components/prisma-client/working-with-fields#working-with-decimal Do we have better documentation on how to consume them via Client @matthewmueller?

[pantharshit00]

This is not a Prisma issue technically. JSON.stringify doesn't support serialization of many types like BigInts, Date etc.

People generally use the superjson(https://github.com/blitz-js/superjson#using-with-nextjs) here to solve this serialization issue but for Decimals, they also don't have a mapping(flightcontrolhq/superjson#152).

[pantharshit00]

Similar issue from examples with a workaround: prisma/prisma-examples#3047

[abriginets]

Does that makes sense to include a serialization tool into Prisma?

[joao-moonward]

Any update?

[CAJazzer]

My meager attempt at a generic conversion

 const makeJSSafe = (/** @type {any} */ obj) => {
  Object.keys(obj).map( key => {
    if (Object.getPrototypeOf(obj[key]).toStringTag == '[object Decimal]') obj[key] = obj[key].toNumber();
  });
}

// prices Model has  id: String, price: Decimal
const myData = await prisma.prices.findMany({
});

myData.map(obj => makeJSSafe(obj));