Drizzle Team•6mo ago

Can not open Drizzle Studio in browser

After a successful run of: - drizzle-kit generate:pg - and database migration, based on the generated schema - the database itself - looks legit. I even managed to seed some data via a custom script. When I run drizzle-kit studio and try to open https://local.drizzle.studio, I get the error modal, from the attached screenshot. Also here is the part of the output, I got inside the dev tools:

Drizzle Studio is up and running on https://local.drizzle.studio
TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'PgTable'
    |     property 'id' -> object with constructor 'PgSerial'
    --- property 'table' closes the circle
    at JSON.stringify (<anonymous>)
    at Context.json (/Users/user/proj/my-api-proj/node_modules/.pnpm/@drizzle-team+studio@0.0.39/node_modules/@drizzle-team/studio/server.js:5206:25)
    at /Users/user/proj/my-api-proj/node_modules/.pnpm/@drizzle-team+studio@0.0.39/node_modules/@drizzle-team/studio/server.js:8296:16
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async /Users/user/proj/my-api-proj/node_modules/.pnpm/@drizzle-team+studio@0.0.39/node_modules/@drizzle-team/studio/server.js:703:9
    at async /Users/user/proj/my-api-proj/node_modules/.pnpm/@drizzle-team+studio@0.0.39/node_modules/@drizzle-team/studio/server.js:6557:7
    at async /Users/user/proj/my-api-proj/node_modules/.pnpm/@drizzle-team+studio@0.0.39/node_modules/@drizzle-team/studio/server.js:5808:62
    at async Server.<anonymous> (/Users/user/proj/my-api-proj/node_modules/.pnpm/@drizzle-team+studio@0.0.39/node_modules/@drizzle-team/studio/server.js:6455:13)

Drizzle Studio is up and running on https://local.drizzle.studio
TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'PgTable'
    |     property 'id' -> object with constructor 'PgSerial'
    --- property 'table' closes the circle
    at JSON.stringify (<anonymous>)
    at Context.json (/Users/user/proj/my-api-proj/node_modules/.pnpm/@drizzle-team+studio@0.0.39/node_modules/@drizzle-team/studio/server.js:5206:25)
    at /Users/user/proj/my-api-proj/node_modules/.pnpm/@drizzle-team+studio@0.0.39/node_modules/@drizzle-team/studio/server.js:8296:16
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async /Users/user/proj/my-api-proj/node_modules/.pnpm/@drizzle-team+studio@0.0.39/node_modules/@drizzle-team/studio/server.js:703:9
    at async /Users/user/proj/my-api-proj/node_modules/.pnpm/@drizzle-team+studio@0.0.39/node_modules/@drizzle-team/studio/server.js:6557:7
    at async /Users/user/proj/my-api-proj/node_modules/.pnpm/@drizzle-team+studio@0.0.39/node_modules/@drizzle-team/studio/server.js:5808:62
    at async Server.<anonymous> (/Users/user/proj/my-api-proj/node_modules/.pnpm/@drizzle-team+studio@0.0.39/node_modules/@drizzle-team/studio/server.js:6455:13)

I tried to debug by following the dev tools call stack but was dealing with a minified code there, thus - failed. I would appreciate at least a link to drizzle-kit studio source code (if it is public), to figure out the possible issue.

8 Replies

Aaroned•6mo ago

@Kamilius seems like some kind of circular reference... could you share the schema?

Kamilius•6mo ago

@Aaroned sure, here it is:

message.txt

Kamilius•6mo ago

Sorry, it's around 140 lines...

Aaroned•6mo ago

@Kamilius I think your schema looks good. Have you seen this: https://github.com/drizzle-team/drizzle-orm/issues/463

Kamilius•6mo ago

Yes, I've seen this one, but the thing is not in querying, but with starting Studio at all

Aaroned•6mo ago

@Kamilius have you tried going back to a fresh db with a basic single table single column schema, to test whether it's a schema issue, or a config/installation issue?

Kamilius•6mo ago

@Aaroned Thanks, you've pushed me toward commenting out everything, and then start to uncomment piece-by-piece. The issue was - missing property specification in relations. Ex:

// was
...
  requiredKnowledgeLevel: one(knowledgeLevels, {
    fields: [interviews.requiredKnowledgeLevelId],
    references: [knowledgeLevels]
  }),

// became
...
  requiredKnowledgeLevel: one(knowledgeLevels, {
    fields: [interviews.requiredKnowledgeLevelId],
    references: [knowledgeLevels.id] // <---- this place right here. `.id` was missing, which caused JSON circular reference
  }),
...

// was
...
  requiredKnowledgeLevel: one(knowledgeLevels, {
    fields: [interviews.requiredKnowledgeLevelId],
    references: [knowledgeLevels]
  }),

// became
...
  requiredKnowledgeLevel: one(knowledgeLevels, {
    fields: [interviews.requiredKnowledgeLevelId],
    references: [knowledgeLevels.id] // <---- this place right here. `.id` was missing, which caused JSON circular reference
  }),
...

Now everything works like a charm 🙂 How to mark an answer as "Resolved"?

Aaroned•6mo ago

@Kamilius Good find 👍 this is just a chat, so no “resolved” state 👍

Gaming

Programming

Can not open Drizzle Studio in browser