BigInt breaks Prisma studio on many side of many-many and many-one relations

[IrisMurray]

BigInt @id column breaks many side of relations. Initially reported on prisma/prisma#11397.

With the following prisma schema opening the Animal Model in studio one cannot click on the identifiers link. It is possible to click on the Animal link from the AnimalIdentifier model, but opening in new tab creates an error with

Prisma Client Error
Unable to run script
Message: BigInt value can't be serialized in JSON
  
Query:
[object Object]

1. Prisma version (prisma -v or npx prisma -v):

❯ npx prisma -v    
Environment variables loaded from prisma/.env
prisma                  : 3.9.0-dev.39
@prisma/client          : 3.8.1
Current platform        : debian-openssl-1.1.x
Query Engine (Node-API) : libquery-engine ad863f03b62ab3b5ff48437f761c4f5d7d7c8256 (at node_modules/@prisma/engines/libquery_engine-debian-openssl-1.1.x.so.node)
Migration Engine        : migration-engine-cli ad863f03b62ab3b5ff48437f761c4f5d7d7c8256 (at node_modules/@prisma/engines/migration-engine-debian-openssl-1.1.x)
Introspection Engine    : introspection-core ad863f03b62ab3b5ff48437f761c4f5d7d7c8256 (at node_modules/@prisma/engines/introspection-engine-debian-openssl-1.1.x)
Format Binary           : prisma-fmt ad863f03b62ab3b5ff48437f761c4f5d7d7c8256 (at node_modules/@prisma/engines/prisma-fmt-debian-openssl-1.1.x)
Default Engines Hash    : ad863f03b62ab3b5ff48437f761c4f5d7d7c8256
Studio                  : 0.456.0

2. Logs from Developer Tools Console or Command line, if any:

TypeError: BigInt value can't be serialized in JSON
    er http://localhost:5555/assets/index.js:1
    bs http://localhost:5555/assets/vendor.js:27
    Ha http://localhost:5555/assets/vendor.js:27
    bl http://localhost:5555/assets/vendor.js:27
    gu http://localhost:5555/assets/vendor.js:27
    hu http://localhost:5555/assets/vendor.js:27
    iu http://localhost:5555/assets/vendor.js:27
    Xi http://localhost:5555/assets/vendor.js:27
    unstable_runWithPriority http://localhost:5555/assets/vendor.js:18
    Ki http://localhost:5555/assets/vendor.js:27
    Xi http://localhost:5555/assets/vendor.js:27
    Qi http://localhost:5555/assets/vendor.js:27
    eu http://localhost:5555/assets/vendor.js:27
    enqueueForceUpdate http://localhost:5555/assets/vendor.js:27
    forceUpdate http://localhost:5555/assets/vendor.js:9
    batchUpdate http://localhost:5555/assets/vendor.js:385
    setTimeout handler*Zy</t.prototype.batchUpdate http://localhost:5555/assets/vendor.js:385
    mountReactPortal http://localhost:5555/assets/vendor.js:385
    createReactComponent http://localhost:5555/assets/vendor.js:385
    init http://localhost:5555/assets/vendor.js:385
    t http://localhost:5555/assets/vendor.js:203
    init http://localhost:5555/assets/vendor.js:385
    initComponent http://localhost:5555/assets/vendor.js:253
    createAndInitUserComponent http://localhost:5555/assets/vendor.js:253
    newCellEditor http://localhost:5555/assets/vendor.js:253
    createCellEditor http://localhost:5555/assets/vendor.js:285
    startEditingIfEnabled http://localhost:5555/assets/vendor.js:285
    startRowOrCellEdit http://localhost:5555/assets/vendor.js:285
    startEditingCell http://localhost:5555/assets/vendor.js:285
    startEditingCell http://localhost:5555/assets/vendor.js:297
    handleClickRelation http://localhost:5555/assets/index.js:1
    ue http://localhost:5555/assets/vendor.js:27
    ge http://localhost:5555/assets/vendor.js:27
    Ce http://localhost:5555/assets/vendor.js:27
    Ce http://localhost:5555/assets/vendor.js:27
    uo http://localhost:5555/assets/vendor.js:27
    ao http://localhost:5555/assets/vendor.js:27
    po http://localhost:5555/assets/vendor.js:27
    vo http://localhost:5555/assets/vendor.js:27
    Ve http://localhost:5555/assets/vendor.js:27
    Ue http://localhost:5555/assets/vendor.js:27
    on http://localhost:5555/assets/vendor.js:27
    tn http://localhost:5555/assets/vendor.js:27
    unstable_runWithPriority http://localhost:5555/assets/vendor.js:18
    Ki http://localhost:5555/assets/vendor.js:27
    Ge http://localhost:5555/assets/vendor.js:27
    Jo http://localhost:5555/assets/vendor.js:27
    Zo http://localhost:5555/assets/vendor.js:27
    Xo http://localhost:5555/assets/vendor.js:27
    mo http://localhost:5555/assets/vendor.js:27
    dn http://localhost:5555/assets/vendor.js:27
    el http://localhost:5555/assets/vendor.js:27
    yu http://localhost:5555/assets/vendor.js:27
    gu http://localhost:5555/assets/vendor.js:27
    hu http://localhost:5555/assets/vendor.js:27
    iu http://localhost:5555/assets/vendor.js:27
    Xi http://localhost:5555/assets/vendor.js:27
    unstable_runWithPriority http://localhost:5555/assets/vendor.js:18
    Ki http://localhost:5555/assets/vendor.js:27
    Xi http://localhost:5555/assets/vendor.js:27
    Qi http://localhost:5555/assets/vendor.js:27
    su http://localhost:5555/assets/vendor.js:27
    Bc http://localhost:5555/assets/vendor.js:50
    Uc http://localhost:5555/assets/vendor.js:50
    Gc http://localhost:5555/assets/vendor.js:50
    Cc http://localhost:5555/assets/vendor.js:50
    Cc http://localhost:5555/assets/vendor.js:50
    n http://localhost:5555/assets/vendor.js:50
    init http://localhost:5555/assets/index.js:1
    Cc http://localhost:5555/assets/vendor.js:50
    n http://localhost:5555/assets/vendor.js:50
    databrowser http://localhost:5555/assets/index.js:1
    async* http://localhost:5555/http/databrowser.js:1
react_devtools_backend.js:4061:25
[Studio.componentDidCatch] Caught an error during rendering undefined react_devtools_backend.js:4061:25
    overrideMethod moz-extension://444a70b0-3555-432a-8153-a95063386a8c/build/react_devtools_backend.js:4061
    F http://localhost:5555/assets/index.js:1
    componentDidCatch http://localhost:5555/assets/index.js:1
    callback http://localhost:5555/assets/vendor.js:27
    ys http://localhost:5555/assets/vendor.js:27
    ul http://localhost:5555/assets/vendor.js:27
    Cu http://localhost:5555/assets/vendor.js:27
    unstable_runWithPriority http://localhost:5555/assets/vendor.js:18
    Ki http://localhost:5555/assets/vendor.js:27
    mu http://localhost:5555/assets/vendor.js:27
    iu http://localhost:5555/assets/vendor.js:27
    Xi http://localhost:5555/assets/vendor.js:27
    unstable_runWithPriority http://localhost:5555/assets/vendor.js:18
    Ki http://localhost:5555/assets/vendor.js:27
    Xi http://localhost:5555/assets/vendor.js:27
    Qi http://localhost:5555/assets/vendor.js:27
    eu http://localhost:5555/assets/vendor.js:27
    enqueueForceUpdate http://localhost:5555/assets/vendor.js:27
    forceUpdate http://localhost:5555/assets/vendor.js:9
    batchUpdate http://localhost:5555/assets/vendor.js:385
    (Async: setTimeout handler)
    batchUpdate http://localhost:5555/assets/vendor.js:385
    mountReactPortal http://localhost:5555/assets/vendor.js:385
    createReactComponent http://localhost:5555/assets/vendor.js:385
    init http://localhost:5555/assets/vendor.js:385
    t http://localhost:5555/assets/vendor.js:203
    init http://localhost:5555/assets/vendor.js:385
    initComponent http://localhost:5555/assets/vendor.js:253
    createAndInitUserComponent http://localhost:5555/assets/vendor.js:253
    newCellEditor http://localhost:5555/assets/vendor.js:253
    createCellEditor http://localhost:5555/assets/vendor.js:285
    startEditingIfEnabled http://localhost:5555/assets/vendor.js:285
    startRowOrCellEdit http://localhost:5555/assets/vendor.js:285
    startEditingCell http://localhost:5555/assets/vendor.js:285
    startEditingCell http://localhost:5555/assets/vendor.js:297
    handleClickRelation http://localhost:5555/assets/index.js:1
    ue http://localhost:5555/assets/vendor.js:27
    ge http://localhost:5555/assets/vendor.js:27
    Ce http://localhost:5555/assets/vendor.js:27
    Ce http://localhost:5555/assets/vendor.js:27
    uo http://localhost:5555/assets/vendor.js:27
    ao http://localhost:5555/assets/vendor.js:27
    po http://localhost:5555/assets/vendor.js:27
    vo http://localhost:5555/assets/vendor.js:27
    Ve http://localhost:5555/assets/vendor.js:27
    Ue http://localhost:5555/assets/vendor.js:27
    on http://localhost:5555/assets/vendor.js:27
    tn http://localhost:5555/assets/vendor.js:27
    unstable_runWithPriority http://localhost:5555/assets/vendor.js:18
    Ki http://localhost:5555/assets/vendor.js:27
    Ge http://localhost:5555/assets/vendor.js:27
    Jo http://localhost:5555/assets/vendor.js:27
    Zo http://localhost:5555/assets/vendor.js:27
    Xo http://localhost:5555/assets/vendor.js:27
    mo http://localhost:5555/assets/vendor.js:27
    dn http://localhost:5555/assets/vendor.js:27
    el http://localhost:5555/assets/vendor.js:27
    yu http://localhost:5555/assets/vendor.js:27
    gu http://localhost:5555/assets/vendor.js:27
    hu http://localhost:5555/assets/vendor.js:27
    iu http://localhost:5555/assets/vendor.js:27
    Xi http://localhost:5555/assets/vendor.js:27
    unstable_runWithPriority http://localhost:5555/assets/vendor.js:18
    Ki http://localhost:5555/assets/vendor.js:27
    Xi http://localhost:5555/assets/vendor.js:27
    Qi http://localhost:5555/assets/vendor.js:27
    su http://localhost:5555/assets/vendor.js:27
    Bc http://localhost:5555/assets/vendor.js:50
    Uc http://localhost:5555/assets/vendor.js:50
    Gc http://localhost:5555/assets/vendor.js:50
    Cc http://localhost:5555/assets/vendor.js:50
    Cc http://localhost:5555/assets/vendor.js:50
    n http://localhost:5555/assets/vendor.js:50
    init http://localhost:5555/assets/index.js:1
    Cc http://localhost:5555/assets/vendor.js:50
    n http://localhost:5555/assets/vendor.js:50
    databrowser http://localhost:5555/assets/index.js:1
    <anonymous> http://localhost:5555/http/databrowser.js:1
TypeError: BigInt value can't be serialized in JSON
    er http://localhost:5555/assets/index.js:1
    bs http://localhost:5555/assets/vendor.js:27
    Ha http://localhost:5555/assets/vendor.js:27
    bl http://localhost:5555/assets/vendor.js:27
    gu http://localhost:5555/assets/vendor.js:27
    hu http://localhost:5555/assets/vendor.js:27
    iu http://localhost:5555/assets/vendor.js:27
    Xi http://localhost:5555/assets/vendor.js:27
    unstable_runWithPriority http://localhost:5555/assets/vendor.js:18
    Ki http://localhost:5555/assets/vendor.js:27
    Xi http://localhost:5555/assets/vendor.js:27
    Qi http://localhost:5555/assets/vendor.js:27
    eu http://localhost:5555/assets/vendor.js:27
    enqueueForceUpdate http://localhost:5555/assets/vendor.js:27
    forceUpdate http://localhost:5555/assets/vendor.js:9
    batchUpdate http://localhost:5555/assets/vendor.js:385
    setTimeout handler*Zy</t.prototype.batchUpdate http://localhost:5555/assets/vendor.js:385
    mountReactPortal http://localhost:5555/assets/vendor.js:385
    createReactComponent http://localhost:5555/assets/vendor.js:385
    init http://localhost:5555/assets/vendor.js:385
    t http://localhost:5555/assets/vendor.js:203
    init http://localhost:5555/assets/vendor.js:385
    initComponent http://localhost:5555/assets/vendor.js:253
    createAndInitUserComponent http://localhost:5555/assets/vendor.js:253
    newCellEditor http://localhost:5555/assets/vendor.js:253
    createCellEditor http://localhost:5555/assets/vendor.js:285
    startEditingIfEnabled http://localhost:5555/assets/vendor.js:285
    startRowOrCellEdit http://localhost:5555/assets/vendor.js:285
    startEditingCell http://localhost:5555/assets/vendor.js:285
    startEditingCell http://localhost:5555/assets/vendor.js:297
    handleClickRelation http://localhost:5555/assets/index.js:1
    ue http://localhost:5555/assets/vendor.js:27
    ge http://localhost:5555/assets/vendor.js:27
    Ce http://localhost:5555/assets/vendor.js:27
    Ce http://localhost:5555/assets/vendor.js:27
    uo http://localhost:5555/assets/vendor.js:27
    ao http://localhost:5555/assets/vendor.js:27
    po http://localhost:5555/assets/vendor.js:27
    vo http://localhost:5555/assets/vendor.js:27
    Ve http://localhost:5555/assets/vendor.js:27
    Ue http://localhost:5555/assets/vendor.js:27
    on http://localhost:5555/assets/vendor.js:27
    tn http://localhost:5555/assets/vendor.js:27
    unstable_runWithPriority http://localhost:5555/assets/vendor.js:18
    Ki http://localhost:5555/assets/vendor.js:27
    Ge http://localhost:5555/assets/vendor.js:27
    Jo http://localhost:5555/assets/vendor.js:27
    Zo http://localhost:5555/assets/vendor.js:27
    Xo http://localhost:5555/assets/vendor.js:27
    mo http://localhost:5555/assets/vendor.js:27
    dn http://localhost:5555/assets/vendor.js:27
    el http://localhost:5555/assets/vendor.js:27
    yu http://localhost:5555/assets/vendor.js:27
    gu http://localhost:5555/assets/vendor.js:27
    hu http://localhost:5555/assets/vendor.js:27
    iu http://localhost:5555/assets/vendor.js:27
    Xi http://localhost:5555/assets/vendor.js:27
    unstable_runWithPriority http://localhost:5555/assets/vendor.js:18
    Ki http://localhost:5555/assets/vendor.js:27
    Xi http://localhost:5555/assets/vendor.js:27
    Qi http://localhost:5555/assets/vendor.js:27
    su http://localhost:5555/assets/vendor.js:27
    Bc http://localhost:5555/assets/vendor.js:50
    Uc http://localhost:5555/assets/vendor.js:50
    Gc http://localhost:5555/assets/vendor.js:50
    Cc http://localhost:5555/assets/vendor.js:50
    Cc http://localhost:5555/assets/vendor.js:50
    n http://localhost:5555/assets/vendor.js:50
    init http://localhost:5555/assets/index.js:1
    Cc http://localhost:5555/assets/vendor.js:50
    n http://localhost:5555/assets/vendor.js:50
    databrowser http://localhost:5555/assets/index.js:1
    async* http://localhost:5555/http/databrowser.js:1
react_devtools_backend.js:4061:25

3. Does the issue persist even after updating to the latest prisma CLI dev version? (npm i -D prisma@dev) Yes

4. Prisma schema (if relevant):

model Animal {
  id           BigInt             @id @default(autoincrement())
  identifiers  AnimalIdentifier[]
  createdAt    DateTime           @default(now()) @map("created_at")
  updatedAt    DateTime           @default(now()) @updatedAt @map("updated_at")

  @@map("animal")
}

model AnimalIdentifier {
  id         BigInt   @id @default(autoincrement())
  scheme     String
  identifier String
  animalId   BigInt   @map("animal_id")
  animal     Animal   @relation(fields: [animalId], references: [id], onDelete: Cascade, onUpdate: NoAction)
  createdAt  DateTime @default(now()) @map("created_at")
  updatedAt  DateTime @default(now()) @updatedAt @map("updated_at")

  @@unique([scheme, identifier], map: "ix_animal_identifier_scheme_identifier")
  @@map("animal_identifier")
}