Create GraphQL Playground - #377
Conversation
| @@ -0,0 +1 @@ | |||
| https://www.figma.com/design/OhOGPhmbRZM9rlYWENffXf/Untitled?node-id=4-2&t=6QHWhg5S5r2LDtuV-1 | |||
There was a problem hiding this comment.
Same situation as #376: this adds one file containing a single Figma URL, with no code.
The description goes further than #376 in describing implementation that isn't here — it specifies embed.FS serving with zero external dependencies, a PLAYGROUND_ENABLED=false gate, a pre-populated X-API-Key header, and a production fallback for when introspection is disabled. Those are real backend behaviours with security implications (introspection gating in particular), and none of them are implemented in this diff.
Problems:
-
Closes #68would auto-close an unimplemented feature. Issue feat(go-api): GraphQL Playground at /playground #68 (feat(go-api): GraphQL Playground at /playground) is open and unbuilt. Merging this closes it while delivering no endpoint. -
Filename
GraphQL Playground— space, no extension. Same tooling/globbing problem as Create developer dashboard — event browser UI #376. -
The security-relevant parts need actual code review. Introspection gating and API key handling are exactly the things that need to be reviewed as code, not as a mockup.
Please close this and move the Figma link to a comment on #68, leaving the issue open. If you want to implement it, a fresh PR with the /playground handler, the PLAYGROUND_ENABLED gate, and tests for the disabled-in-production path would be very welcome — the design gives a clear target to build against.
2 participants
I designed a high-fidelity GraphQL Playground for Trident, optimized for the requested /playground endpoint.
Integrated Workspace: A cohesive dark-themed IDE layout using Trident's core color palette with GraphQL-inspired pink accents.
Developer-First UX: The UI features a code editor with syntax highlighting, a dedicated variables pane, and a formatted JSON results viewer.
Pre-configured Endpoint: The environment is hard coded to target your /graphql endpoint by default, eliminating manual setup for developers.
Self-Contained Aesthetic: Designed as a standalone single-page application that works seamlessly as an embedded asset, consistent with the embed.FS implementation plan.
The design includes a clear path for entering API keys and viewing schema documentation, significantly lowering the barrier for developers to explore and adopt the Trident API.
https://www.figma.com/design/EncndKNZMLFlxqEHdLYqEd/Untitled?node-id=4-284&m=dev&t=hpZGf77QeoqSBn4U-1
Closes #68