GraphiQL Workspace
A graphical interactive in-browser GraphQL IDE (GraphiQL), enhanced with following features:
- Tabbed navigation
- HTTP header editor
- Arbitrary endpoint support
- Workspace save/load (as JSON file)
- Local storage support
- Request proxy
- Saved queries
- Query history
You can use it in your own projects like this:
import React from 'react';import ReactDOM from 'react-dom';import GraphiQLWorkspace AppConfig from 'graphiql-workspace'; import 'graphiql-workspace/graphiql-workspace.css'import 'graphiql/graphiql.css' const config = "graphiql" bootstrapOptions;ReactDOM;
You still will need to add bootstrap CSS in you final application. For instance, you can use bootstrap-loader
in webpack config. For an example application, that uses graphiql-workspace, check out graphql-toolbox
Here is how it look like in your browser:
Getting started
After you cloned the project, do the npm install
and then use ./scripts/build.sh
or ./scripts/quickBuild.sh
to build the project.
In order to see it in action, you can use an example html page ./example/index.html
.
Standalone Usage
Here is an example HTML:
GraphiQL Workspace Example
Community
graphiql-workspace-app
— an instance ofcreate-react-app
that wrapsgraphiql-workspace
. Can be easily launched atgraphiql.yourcompany.com
as a lightweight Docker container (< 20MB). Hosted on GitLab.