A comprehensive GraphQL development tool that integrates editor-based request testing

by React

GraphQL One Stop Shop

A comprehensive GraphQL development tool that integrates editor-based request testing with live and dynamic visualization

Try it out! GraphQL One Stop Shop

Overview

GraphQL is a popular alternative to REST that has a rich and evolving ecosystem. Tools such as GraphiQL offer request testing in a code environment, while tools like GraphQL Voyager offer visualization of GraphQL schemas. One Stop Shop sets out to provide a streamlined developer experience by tightly coupling these two concepts into a single, integrated workflow. With OSS, simply enter a GraphQL API endpoint to receive an interactive visualization of the schema, build out requests in the editor with autocompletion and validation, and see all your changes dynamically reflected in the visualizer and response pane. Real-time feedback, visual highlighting, and auto-regraphing enable fluid and intuitive navigation. In addition, OSS provides complete control over how much complexity is shown at any given time, with the ability to narrow down overwhelming API’s to only their most relevant pieces. Customize your experience by utilizing numerous workflow modes such as ‘Active Only,’ ‘Suggestions,’ and even ‘Reverse’ which enables you to build out queries or mutations by interacting with nothing but the visualizer.

Getting Started

Head to graphql-oss.io to try it out!

  1. Set an endpoint (API URL, or local server)
  2. Navigate your visualization
  3. Build queries or mutations either through the editors or by interacting with the visualizer in Reverse Mode
  4. Enjoy live and dynamic feedback in the visualizer and response pane
  5. Experiment with different workflow modes to find your custom preferences
  6. Have fun and build!

Endpoint

Set your desired GraphQL API endpoint with the input at the top. This can be the URL of an API hosted on the web or a server running locally on your machine. If the endpoint is valid and accessible, OSS will autogenerate a balanced and proportionate directed-graph layout of the schema and connect the editors to the schema’s syntax and structure.

NOTE: At this time, OSS does not auto refresh the schema. If you make any server-side changes to the API, “refresh endpoint” must be clicked to properly reflect the updates.

Editor

The lefthand Editors of OSS allow you to build queries or mutations and view the data responses

The top editor is the Request Pane, used for creating queries & mutations. As you type, all operations are checked against the schema for autocompletion and validation. By default, “live mode” is on, meaning queries will automatically submit as you type for real-time feedback. You may also execute an operation manually by clicking “submit” or typing ⌘/ctrl + ⮐.

Testing Queries

The bottom Editor serves multiple purposes:

The “Results” tab displays the Results Pane, where response data from the API is displayed.

The “Variables” tab displays the Variables Pane, where variables can be entered in JSON format and will be automatically plugged in to the operation being executed. The variables pane is hooked into the Request pane for autocompletion and validation.

Upon successful response, performance metrics are displayed at the bottom.

Testing Mutations

Editor Features:

  • Copy Button – Copies the contents of the current editor window disregarding preamble comments
  • Live Query Mode (on | off) – Upon typing in the Request Pane, OSS validates and executes queries, updating results and visualizer highlighting in real time. Mutations are never automatically executed and require manual submission. If a query is not fully validated, it will not be sent to the API. However it may still be partially highlighted in the visualizer for guidance.
  • Reverse Mode (on | off) – Build queries or mutations by clicking through valid routes to any level of nestedness in the visualizer itself. Turning on Reverse Mode will reset the state of your visualizer and data, while turning it off will persist it so you can fill out variables or continue building out requests after the fact. Collisions occur when fields that have multiple possible active routes are chosen, and can be resolved through the collision interface when triggered. You may only select fields with open active routes, and you must start building from Query/Root or Mutation.

Building a Query with Reverse Mode

Reverse Mode Collision Handling

NOTE: At this time, subscriptions are not supported.

Visualizer

The righthand Visualizer is a dynamic and interactive directed-graph representation of the current endpoint’s schema.

Each Object Type from the Schema is represented as a Type Node which contains all the fields that belong to that Type. Relationships between Types and fields are rendered as arrows pointing from a field to its corresponding Object Type. Nodes are draggable and collapsible to suit your needs and preferences.

The control panel allows for easy zooming, centering, drag lock, and fullscreen control.

The minimap allows for easy navigation within the visualizer and highlights active nodes from a bird’s eye view

The display options panel provides workflow modes and visualizer options:

  • Active Only (on | off) – Only displays Type Nodes and Relationships that are currently active in the request pane

  • Suggestions (only available when Active Only is on) – Displays not only all active Type Nodes and Relationships, but also all nodes that are currently accessible from the furthest active nodes (leaves in the graph), effectively suggesting the next operational steps to be taken.

  • Auto Regraph (on | off) – Automatically refreshes the visualizer layout to proportionate and balanced spacing when the active or visibility statuses change for nodes or edges.
  • Target Position ( left | top ) – Updates the location of the arrowhead pointing to each node.
  • Minimap (on | off) – Toggles visualizer minimap
  • Controls (on | off) – Toggles visualizer control panel
  • Color Selection – Customize the colors of the visualizer
  • Collapse/Expand All – Collapse / expand all nodes. An individual node can be collapsed or expanded by clicking on its header.
  • Regraph – Manually refresh the visualizer layout to proportionate and balanced spacing at any given time.

Technologies Used

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Feel free to open tickets and start conversations around feedback or issues. All forks and suggestions are welcome – we’d love to collaborate with you!

If you like our application and find it useful, please consider starring our repo. This can help increase our overall impact and reach in the community, as well as attract more contributors and users. We’d greatly appreciate it!

License

GraphQL One Stop Shop is developed under the MIT license

GitHub

View Github