Query Composer

[jasonbahl]

User Story

End User
As a user of the GraphiQL IDE, I would like to be able to click on fields and have the query be "built" / "composed" in the IDE so that I don't have to type the query manually.

Developer
As a developer extending the GraphiQL IDE, I would like to be able to provide custom components for Custom Scalar types so that when I introduce custom scalars to the Schema, I can also introduce custom UI components to the Query Composer for interacting with that Scalar.

i.e. - If we add a Datetime Scalar to the Schema, when using the Query Composer I should have a Date Picker instead of a generic text input.

Acceptance Criteria

• Button should exist that toggles visibility of a Query Composer UI
• The Composer should allow users to click fields and compose queries
• The Composer should provide custom UI elements for input arguments matching the Scalar Type of the input (i.e. a field with an Int type should have a number input, and a String field should have a text input, etc)
• Components for input (i.e. field arguments) should be filterable to allow for supporting custom scalars (i.e. if the field is a Datetime Scalar, I should be able to interact with a Date Picker component 🤷🏻‍♂️)
• ANT Design components from previous Composer are NOT a requirement
• Users should be able to add new Queries or new Mutations
• Users should be able to clone a Query/Mutation in the same document
• Users should be able to "delete" a Query/Mutation from a document
• When the document is directly modified, the composer should reflect the changes
• When the composer is modified, the document should reflect the changes
• Query operations should be able to be named from the composer

[josephfusco]

Official GraphiQL plugin to handle this.

https://github.com/graphql/graphiql/tree/main/packages/graphiql-plugin-explorer