The link to graphql-toolbox in the README.md takes you to a broken page that looks like spam

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

Link in question: http://toolbox.sangria-graphql.org/graphiql

Please use "license": "Apache-2.0" description instead of "license": "Apache License 2.0" within package.json. following standard declaration.

While the example looks to be fixed via 6c1500e, the live demo is still broken

See related PR #15

I'm interested in deploying graphiql-workspace so that it could be used to call multiple authenticated graphql endpoints that run on subdomains of my company's TLD. Currently, the implementation of fallbackFetcher precludes this because it calls fetch with credentials: 'same-origin' instead of credentials: 'include':

Would there be any objection to changing same-origin to include? (FWIW, that's what the reference example in the graphiql repo does.)

Alternatively, if the use of same-origin is deliberate, would it be possible to make it a configuration option?

Thanks!

Hi Oleg,

Looks like the subscriptions are not working in the latest version. GraphiQLSubscriptionsFetcher.js refers to a variable called observer, but it is not defined. Getting an exception when trying to subscribe to something.

I'm also wondering if sending subscriptions could be disabled when the ws url is not defined. I forgot to define it today and sent a subscription, but this resulted an odd error, because the query was sent to the HTTP server:

Apollo tried resolving a subscription when there's no event, so the payload was undefined.

Release date is 2015.. instead of 2016..

I was trying to upgrade to this latest version, but the fact that the source code is now in an external npm repo restricts the configuration by using the AppConfig class.

Unfortunately, I have little knowledge of JS and React, but it seems that there is only a subset that can be configured. This works on my project:

module.exports.setupGraphiQLWorkspace = function (bootstrapOptions = {
    defaultUrl: 'https://graphql.up.welt.de/graphql',
    defaultQuery: '{ search( section: "/wissenschaft/" ) {\n    headline\n  }\n}',
}) {this.bootstrapOptions = bootstrapOptions;
    const config = new AppConfig("graphiql", bootstrapOptions);
    ReactDOM.render(<GraphiQLWorkspace config={config}/>, document.getElementById('graphiql-workspace'));
};

How would I modify the defaultHeaders? I need to replace the default Authorization header with an X-Api-Key header.

Many valid URLs are rejected, e.g.:

• http://localhost:8080/graphql
• http://computername.local:7777/graphql

Seems like the validation requires a dot and 2-4 letters following it.
Local testing sounds like a common use-case to me, so I'd suggest relaxing the validation rules to permit any well-formed URL.

I notice in the README screenshot it shows a prettify button (as I see in other graphiql examples like http://try.sangria-graphql.org/graphiql )

However when following standalone example https://github.com/OlegIlyenko/graphiql-workspace#standalone-usage it does not show up. How do I get this?

@OlegIlyenko what do you think about exposing https://github.com/APIs-guru/graphql-voyager into the workspace directly, maybe as a sticky tab on the right ?

There seems to be issue with bootstrap css v4 and the current graphiql-workspace. I replaced the "latest" version url, as it appears in the standalone example, with the latest v3 version and things worked again.

After a little bit of investigation, the cause of this behaviour is the render method of the GraphiQLTab component, specifically: https://github.com/graphql/graphiql/blob/56150d504323bad8c60d895f0c6a87d95bae0b46/src/components/GraphiQL.js#L175

This will always evaluate to true because nextProps.schema is null which consequently trigger a this._fetchSchema();

This schema prop is passed down from us but it is never initialised when our component mount so unless updateSchema is triggered by the proxy being updated or the url being updated, this.state.schema is always null.

We should trigger a schemaUpdate when we are about to mount the tab.

Now that the project is properly published to npm, it should be trivial to add it to jsdelivr so it can be automatically managed by their bot.

@OlegIlyenko do you want to me to take care of that ?

Hi again Oleg,

I found your tool very useful indeed; it even changed how I see GraphiQL in my workflow. Initially, any new GraphQL server I created had /graphql and /graphiql endpoints, but now I see this an anti-pattern. The main reason is that not every GraphQL server in my team may be written in JS, plus there is also a problem of updating all these copies and carrying lots of identical dependencies around. Using just one GraphiQL tool at a fixed url and saving/loading its state looks much more universal! This reminds me of redux-devtools, which once were commonly placed into every new React app but then moved to a Chrome extension.

I made a standalone copy of graphiql-workspace, which is basically an instance of create-react-app with only one component. The app can be shipped as a pretty lightweight docker container (< 20MB!), which makes it extremely easy to launch at https://graphiql.yourcompany.com (this may be viewed as a slightly safer option than running a public copy, plus cors in graphql endpoints may become more straightforward to setup).

I uploaded the result to GtiLab, here's the URL: https://gitlab.com/kachkaev/graphiql-workspace-app

Feel free to share the link if you want and thanks again for your great work on bringing GraphiQL to a new level!

Hi Oleg!

At the moment query variables are empty by default in the interface. This causes an an error in every new tab that's trying to hit an apollo graphql server. Looks like it's because that server expects variables to be either not defined at all or defined as as something serializable. Now it's an empty string:

It would be nice if graphiql workspace made variables equal to {} by default or removed this data node from the request completely when empty.

Cheers!

Everything seems to work properly except some weird issue with propTypes. In terms of getting css to work I added

import 'graphiql/graphiql.css'
import 'graphiql-workspace/graphiql-workspace.css'

and also bootstrap as recommended in react-bootstrap docs according to #4 :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

Now the only weird thing I see is in the console:

First complaints about manually calling propTypes validation (bunch of these messages):

bundle.js:1287 Warning: You are manually calling a React.PropTypes validation function for the block prop on ButtonGroup

And also unrecognized properties (also quite a lot of these):

Warning: Unknown props animation, bsClass, unmountOnExit, bsStyle, stacked, justified, pullRight, pullLeft on

tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
in ul (created by Nav)
in Nav (created by Tabs)
in div (created by Tabs)
in TabContainer (created by Tabs)
in Tabs (created by Uncontrolled(Tabs))
in Uncontrolled(Tabs) (created by GraphiQLWorkspace)
in GraphiQLWorkspace

Not sure if this is done in workspace or some library it depends on.

In your example, you are requiring 2 css files:

import 'graphiql-workspace/graphiql-workspace.css'
import 'graphiql/graphiql.css'

Since graphiql-workspace.css is a standalone css file now, shouldnt we need to import react-bootstrap.css as well ?

When you add a very long header such as an auth token, the masked token does not wrap. As a result it pushes the edit and delete buttons far off the right side of the page.

In Firefox I can access the buttons by zooming out extremely far.

In Chrome I'm not even able to zoom out far enough to bring the buttons on screen.

Expected:
Either the position of the buttons should be moved (e.g. just under the header name), or the masked token should wrap lines, leaving space at the right for the buttons.

I just installed the create-react-app from the readme

Deps

  "devDependencies": {
    "eslint": "^3.16.1",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-react": "^6.10.0",
    "react-scripts": "^0.9.3"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "graphiql": "^0.9.3",
    "graphiql-workspace": "^1.0.4",
    "react": "^15.4.2",
    "react-bootstrap": "^0.30.7",
    "react-dom": "^15.4.2",
    "remark-cli": "^3.0.0",
    "remark-lint": "^6.0.0",
    "remark-preset-lint-recommended": "^2.0.0"
  }

I'm trying to build graphiql-workspace-app after updating to 1.0.5 and am getting this error:

Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve 'graphiql-subscriptions-fetcher' in '/path/to/graphiql-workspace-app/node_modules/graphiql-workspace/dist'

@tlvenn could this be related to your changes in package.json?

UPD: See CI build logs.

Any plans to add subscription support, eg, supporting a pluggable fetcher that would work with https://github.com/apollographql/GraphiQL-Subscriptions-Fetcher? It's relatively painless to get it working with vanilla GraphiQL.

First of all, thank you all contributors for this valuable tool. I'd like to report a bug that I encountered, which was introduced in version 1.0.5. See gif below.

The problem is that when I use 1.0.5 from the CDN and try to get linting on the fields of an operation, I get the following error.

Uncaught Error: Schema must be an instance of GraphQLSchema. Also ensure that there are not multiple versions of GraphQL installed in your node_modules directory.
    at invariant (graphiql-workspace.js:27632)
    at validate (graphiql-workspace.js:38890)
    at validateWithCustomRules (graphiql-workspace.js:40136)
    at getDiagnostics (graphiql-workspace.js:25019)
    at graphiql-workspace.js:3322
    at startLinting (graphiql-workspace.js:6663)
    at graphiql-workspace.js:6706

I could not trace any of the calls of that stack to the actual codebase here, so I'm guessing this has to do with a graphql/graphiql dependency in the bundled files.

Using 1.0.4 against the same schema, with the same query, works just fine.

cc @tlvenn - your commits were the main change from 4 to 5 so maybe you have an idea :)