0004: Use GraphQL Editor for Visualization

Date: 2024-07-29

Status

Accepted

Context

A key feature of the application is the ability for users to see and interact with both the JSON Schema and the resulting GraphQL SDL. While the JSON Schema can be displayed in a standard text editor, GraphQL schemas are better understood through a visual representation that shows types, fields, and their relationships.

Developing a custom GraphQL editor from scratch is a significant undertaking that would require a substantial investment in development time and effort. Such an editor would need to handle syntax highlighting, real-time validation, auto-completion, and a visual graph representation.

To provide a high-quality user experience without derailing the project’s focus, we need a pre-existing, stable, and feature-rich component that can be embedded into our front-end application.

Decision

We will use the graphql-editor library as the component for visualizing and editing the GraphQL SDL in our React front end.

This component will be integrated into the application to display the GraphQL schema that is generated by the Rust/WASM converter. It will provide users with a feature-rich, interactive graph-based view of their schema, enabling them to intake_processly explore and understand the conversion output.

Consequences

Positive

• Accelerated Development: We gain a powerful schema visualization and editing tool without the high cost of building it ourselves, allowing us to focus on the core conversion logic.
• Enhanced User Experience: The graphical representation of the GraphQL schema is much more intuitive and user-friendly than raw SDL text. This makes the tool more accessible and intake_processer to use.
• Rich Feature Set: graphql-editor comes with many built-in features, such as real-time validation and a node-based graph interface, which would be complex to implement from scratch.
• Stability: By using a mature, widely-adopted library, we benefit from its stability and community support.

Negative

• External Dependency: We are adding a major JavaScript dependency to our front-end stack. This introduces a reliance on the graphql-editor project’s maintenance and release cycle.
• Integration Overhead: Some effort will be required to integrate the component into our application, manage its state, and customize its appearance to match our UI.
• Limited Customization: While the library is configurable, our ability to customize its features and behavior is ultimately limited by the options it exposes. Any highly specific UI/UX requirements may be difficult or impossible to implement.