graphql/graphiql

GraphiQL & the GraphQL LSP Reference Ecosystem for building browser & IDE tools.

graphiql's Issues

Webjars support

Hi,

I'm trying to embed graphiql in my Play! app. In order to get the dependency in my project the most popular way (for js/css/html) is via webjars which packages npm modules (also bower packages) into jars to be included in JVM apps.

The problem is, when trying to deploy the latest version of graphiql to webjars, it fails to read the license with the following message:

Failed! No valid licenses found. Detected licenses: See LICENSE The acceptable licenses on BinTray are at: https://bintray.com/docs/api/#_footnote_1 License detection first uses the package metadata (e.g. package.json or bower.json) and falls back to looking for a LICENSE, LICENSE.txt, or LICENSE.md file in the master branch of the GitHub repo. Since these methods failed to detect a valid license you will need to work with the upstream project to add discoverable license metadata to a release or to the GitHub repo.

The problem seems to be that the license field in package.json is set to See LICENSE, instead of the name of the license. I really don't know if this is supposed to be like this, but I'm wondering if there is any other way we could specify the license that would make webjars work.

In order to reproduce the problem:

1. go to http://www.webjars.org/npm,
2. On the top right cornet click on Add a new NPM WebJar
3. Type graphiql in the name
4. Select 0.1.1 in the version
5. Click Deploy!

Another issue could be that graphiql license is not compatible with WebJars. See full list in this footnote. I'm not sure about this either.

Thanks for your time.

Proper treatment of deprecated portions of schema

Dynamically change schema

Right now <GraphiQL /> doesn't support to change the schema dynamically through props (schema or fetcher). However QueryEditor seems to support it (https://github.com/graphql/graphiql/blob/master/src/components/QueryEditor.js#L115)

I could work on a PR if that is something you would like to improve :)

HTML embedded in description field is not escaped

Steps to reproduce

• Define a graphql type with a description field that contains markup. For example <input type="checkbox">
• Inspect the type in docs panel in graphiql

Expected behaviour

• The string <input type="checkbox"> is shown in docs panel

Actual behaviour

• A checkbox is shown in the docs panel

As far as I can tell, it's just a matter of adding {sanitize: true} as a config option when calling the marked function.

Results render before all promises resolved, do not update

with large (long running) queries, the results render before all of the promises have resolved and do not update once they have completed.

In my implementation, due to the concurrency of resolve methods, I hit many API # of connections limitations. so I delay 1second and reattempt for a set number of tries. According to my logs that part works great but the results returned in graphical do not show a good portion of the data returned.

How to use Graphiql when /graphql protected by JWT token (authorization header)

My /graphql route is protected by JWT token, so every HTTP request needs to set:

 headers: {
      Authorization: 'Bearer ' + token
    }

To get through the authentication middleware and hit /graphql.

How to manage this authentication step when using graphiql ? graphiql is so convenient, it's a pity to not use it :(
thanks for any suggestion!

Unclosed string in variable editor causes a freeze

Normally, typing a " causes its closing quote to appear. But if you delete one, the browser locks up. For example:

GraphiQL editor appears unstyled

The graphiql component appears to be rendering, but is not styled like the examples.

Docs button doesn't work in 0.42 using Firefox

I'm attempting to use this example. Running:

node index.js

then hitting http://localhost:3000 in Firefox 42.0 with all addons disabled produces the following unhelpful error when I click Docs:

TypeError: e.split is not a function
error source line:


...o),t=i+1)}return r}:function(e){return e.split(/\r\n?|\n/)},es=window.getSelecti...


graphiql.min.js (line 9, col 824)

Seems to work fine in Chrome, but fails in Firefox 42.

Thanks.

Cmd-Space key combination conflicts in OS X

In OS X, multilingual users use Cmd-Space key combination to switch between input methods. And Ctrl-Space is mapped to Spotlight shortcut key.

It would be better if some other key combination is added, like Option-Space. (Originally I was going to send a pull request, but didn't come up with the key combination that feels right 😞)

live demo does not work

The live demo seems to be faulted.
No matter the query input the response is always:
SyntaxError: Unexpected end of input

Example input query:

{
  allStarships{
    starships{
      name
    }
  }
}

but i have tested several other queries with the same result.

It seems like the parser expects some more characters, but the current error response does not allow for any really constructive examination of what is wrong.

Graphiql height is not 100%

When I open Graphiql it looks like this

It looks like that html and body tags need to have their height set to 100% so the layer #graphiql-container can expand too.

I've tried also opening in safari and in chrome on incognito window (without any extension running) and the same happens.

Query Variables panel not visible in Safari 9.0

vs.

Can hang GraphiQL with carefully crafted variables

Typing this query and these variables into the SWAPI GraphiQL hung the browser tab for me. Couldn't get it back unless I cleared local storage.

Graphiql not working

Graphiql not working with the latest version of react.

Warning: React.findDOMNode is deprecated. Please use ReactDOM.findDOMNode from require('react-dom') instead.

Uncaught TypeError: Cannot read property 'length' of undefined.

Error with rendering when using alongside another version of React

When I include GraphiQL inside my application alongside Relay, I get the following error when trying to render the component:

Uncaught TypeError: Cannot read property 'firstChild' of undefined

I did some Googling, and it seems to suggest there may be 2 versions of React present. My package.json file looks like this:

  "dependencies": {
    "assets-webpack-plugin": "^2.2.0",
    "babel-loader": "^5.3.2",
    "babel-relay-plugin": "0.1.2",
    "babel-runtime": "^5.8.20",
    "basscss": "^7.0.3",
    "basscss-border-colors": "^1.1.1",
    "classnames": "^2.1.3",
    "css-loader": "^0.16.0",
    "cssnext-loader": "^1.0.1",
    "file-loader": "^0.8.4",
    "graphiql": "^0.1.0",
    "graphql": "^0.4.2",
    "graphql-relay": "^0.3.1",
    "react": "^0.14.0-beta3",
    "react-dom": "^0.14.0-beta3",
    "react-relay": "^0.1.1",
    "react-router": "^1.0.0-beta3",
    "relay-nested-routes": "^0.3.1",
    "style-loader": "^0.12.3",
    "url-loader": "^0.5.6",
    "webpack": "^1.11.0"
  }

If I go ahead and delete rm -rf node_modules/graphiql/node_modules/react, then rendering works a treat!

GraphiQL expects 200 status for errors

In order to render an error on the right panel, GraphiQL expects the response to have a 200 status. In case of a bad query, the server needs to respond with 200 in order the see the error in the UI.

We had a case where bad queries were send to the server e.g. asking for something that doesn't exists. Looking at the server logs wouldn't show the issue as everything was 200. So we changed our graphql server to return 422 on bad queries.

But now GraphiQL doesn't show anything on the right, as it expects 200.

So I am not sure about this, is this a graphql spec issue or should GraphiQL handle some errors and try to render the response?

"graphql" being a devDependencies make it impossible to use in a dependent project

I have a project that depends on graphiql AND graphql, but I'm getting Error: Schema must be an instance of GraphQLSchema. Also ensure that there are not multiple versions of GraphQL installed in your node_modules directory.

and I actually have both node_modules/graphql and node_modules/graphiql/node_modules/graphql .

I don't think graphiql should devDep on graphql in the first place, because it's already a peerDep

Add busy indicator, error indicator

Would make it easier to tell whether your query is still in flight, or if it returned with errors at the bottom.

Expose errors in building schema

As #16 encountered, if an introspection result causes issues with building a client schema today we just silently continue without a schema - instead we should present some error so the developer can quickly find and fix the issue.

Ctrl+T (for opening a new tab) gets blocked

In OSS GraphiQL, if I have the cursor in the results section (e.g. I highlighted something to copy), ctrl+t seems to get blocked/captured, and it doesn't open a new tab. On Firefox/Ubuntu.

Looks like the editor traps any ctrl + key for the suggestion popup, might be causing the issue.

Fallback introspection query never actually happens

Just starting messing with GraphiQL and the graphql-java implementation, which doesn't support subscriptionType yet. According to #55, this was fixed with a fallback query, but it seems to be implemented by catching the fetcher's result.

The thing is... it appears that the fetcher is not actually supposed to (and, at least in the example directory, does not) throw, at least in the case of a standard GraphQL error!

For reference, the result that is returned when introspection fails is this:

{
  "errors": [
    {
      "validationErrorType": "FieldUndefined",
      "message": "Validation error of type FieldUndefined: Field subscriptionType is undefined",
      "locations": [
        {
          "line": 6,
          "column": 7
        }
      ],
      "errorType": "ValidationError"
    }
  ],
  "data": null
}

I also tried manually throwing in the fetcher if the result contains errors; this works, but degrades the user experience as normal validation errors will not show up in the right-hand panel.

Readme improvements

Two possible improvements::

1. Link to http://graphql-swapi.parseapp.com/graphiql/ or something like it.
2. Add screenshot that shows autocomplete in action.

Live demo doesn't work

Clicking run at http://graphql-swapi.parseapp.com/graphiql/ gives

Uncaught TypeError: e.getFields is not a function

in defaultGetDefaultFieldNames.

example fails to run

I'm using node v5.1.0 and npm 3.3.12 which is probably the cause of this.

after having properly npm install (in example/),
when running npm start, the build.sh will fail:

 @ prestart /Users/gre/perso/graphiql/example
> npm run build


> @ build /Users/gre/perso/graphiql/example
> . build.sh

cp: node_modules/graphiql/graphiql.js: No such file or directory

codemirror widths and lefts are so large they push codemirror to right edge of browser

using babel and webpack-dev-server to bundle and serve the the rendered GraphiQL component. For some reason the margin-left and certain width style properties are set to almost the entire width of the screen so all i see is a blank space and then the first character of each code line up against the right side of the browser window

<div class="CodeMirror-sizer" style="margin-left: 1904px; margin-bottom: 0px; border-right-width: 30px; min-height: 675px; min-width: 619px; padding-right: 0px; padding-bottom: 0px;">
   <div ....>....
  </di>
</div>

Embedding GraphiQL + html overflow: hidden

I'm trying to embed GraphiQL in a site however the overflow: hidden at the top off app.css prevents the rest of my site from working (as a single page app everything shares a single css file):

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  width: 100%;
}

Would it be possible to extract the shared css into a file and move the html + body height fixes to a separate file for standalone GraphiQL setups?

Execute named operation under a cursor

When I'm working with GraphiQL, more often than not, I have several queries in the editor pane. A typical use-case is to have a mutation and query around in order to make changes and see their effects on different queries.

At the moment I need to comment out all of the queries except one I would like to execute. It can become tiresome after some time. That's because I would like to suggest an alternative approach: an ability to execute query under the cursor. As far as i saw, this is pretty common feature available in similar applications. For instance, I use this feature a lot in elasticsearch sense (which is now part of marvel plugin) and find it pretty useful.

So the idea would be to either have a separate context sensitive shortcut/button or make existing shortcut and "run" button context sensitive. If an editor cursor is positioned somewhere inside of some named query, then in addition to a query, GraphiQL will also send the operation name to a server.

Opt-in to accepting mutations on GET

Performing mutations on an http GET request is typically bad behavior. It's usually only presumed safe to do this if providing some single-use token to avoid CSRF attacks.

express-graphql should not execute mutations on GET requests unless some opt-in is provided.

URL param to ensure docs panel displays?

Is there a way to specify a link to a certain view with the docs panel open?

"prettify" query

my common usecase is to paste a query that was generated by Relay and see what it does.

However, the Relay queries are pretty obfuscated, it would be great to have a button that prettify the query textarea.

I was playing around with this code:

function blockIndent(editor, from, to) {
  editor.operation(function() {
    for (var i = from; i < to; ++i)
      editor.indentLine(i, "smart");
  });
}

but it just indents, it does not do the "return to new line" work.

Error while running example

Issue

• project assumes babel and browserify are installed globally

I cannot run: npm install simply because I don't have babel and browserify installed globally, and I think this would be most of the cases.

Possible solution

Quick hack would be to include graphiql.css and graphiql.min.js in the project, but that would increase the size of it.

Or just change the way the resources are being built.

Add response time and size

After each request, it'd be nice to see the response time + size of the response in KB somewhere. E.g. 251ms, 23.3kb

cannot get queryType of undefine

when recreating the query from the README verbatim I get the error in the title in Chome 45.0.2454.101 and Firefox 41.0.1 OSX 10.9.5

A way to pass the operationName

I think there is no way to pass the operationName along with request to the server. Is there any planned feature?

./resources/build.sh util.error: Use console.error instead

When trying the build script in ./resources/directory, I went into the console.error and warning as the attached screen demonstrates. Is this my local issue or build script issue? Thank you very much in advance!

Saving queries/mutations?

I was wondering if it could possibly be a feature to maybe save queries/mutations written to local storage or something without complicating the UI too much. I'm not familiar exactly with the scope of what graphiql is meant to solve and what its not meant to solve, but that could possibly be a neat feature.

React versions clash with Relay and Graphiql

When using graphiql in Relay app, getting following issue on npm install:

npm ERR! peerinvalid The package react does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@~0.13.x || ~0.14.x
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0-beta3

package.json content:

"dependencies": {
    "classnames": "^2.1.3",
    "express": "^4.13.1",
    "express-graphql": "^0.3.0",
    "graphiql": "^0.1.0",
    "graphql": "^0.4.2",
    "graphql-relay": "^0.3.1",
    "isomorphic-fetch": "^2.1.1",
    "jade": "^1.11.0",
    "moment": "^2.10.6",
    "react": "^0.14.0-beta3",
    "react-relay": "^0.1.0",
    "react-router": "1.0.0-beta3",
    "relay-nested-routes": "^0.3.1",
    "require-dir": "^0.3.0"
  }

Open source license

The license included in the LICENSE file for this project does not look like any standard open source license.

Facebook, Inc. (“Facebook”) owns all right, title and interest, including all
intellectual property and other proprietary rights, in and to the GraphiQL
software. Subject to your compliance with these terms, you are hereby granted a
non-exclusive, worldwide, royalty-free copyright license to ...

What license is this?

Is there a reason why this project could not be licensed with a normal OSI approved license like the BSD License used in GraphQL.js? I think this would ensure compatibility with open source licenses and that people using GraphQL can use GraphiQL without having to consult their lawyers about the custom license.

How to run a mutation? Add example to Readme

I can query just fine, but I'm having a hard time figuring out the correct format for mutations. Here's a screenshot of what I'm playing with:

https://www.dropbox.com/s/4g0r4ii3z3u7zir/Screenshot%202015-12-16%2010.58.25.png?dl=0

Basically I'm just not sure of the correct format for setting up the ChangeCohortInput but I remember seeing someone else do it by making that as a variable in the Query Variables section.

Schema is undefined, even after successful introspection query

I'm trying to hook this up to an automatically generated Ruby backend, so I'm almost sure that the root cause is on my end, but I'm not sure what else to check :)

I've cloned the repo & built the example, then copied graphql.min.js, graphql.css, and index.html into my own project. I tweaked the fetcher a bit to point at my endpoint and include cookies.

At this point, when I load the page, GraphiQL makes its request for the schema, and I can see the expected result coming back:

(full dump)

However, I don't get any type hinting, and when I try to submit a query, I get an error:

I can see it's coming from here:

Which is here: https://github.com/graphql/graphql-js/blob/81a7d7add03adbb14dc852bbe45ab030c0601489/src/utilities/TypeInfo.js#L125-L127

So ... somehow that local variable schema is undefined. I know I'm a long way down a lonely road, but do you have any suggestion what I can check next? Do you think my endpoint is responding properly? Is there something else I can test?

Schema must be an instance of GraphQLSchema

Hello,
I get this error when hitting /graphql with browser:

{
  "errors": [
    {
      "message": "Schema must be an instance of GraphQLSchema. Also ensure that there are not multiple versions of GraphQL installed in your node_modules directory."
    }
  ]
}

any suggestion? My schema is an instance of GraphQLSchema...and graphql appears only once in package.json

thanks

Enum documentation shows wrong descriptions

the overall enum description shows up in the documentation viewer for the enum values even if the enum values have a valid description.

GraphiQL peerDepends on React 0.4.0, causing issues when used with Relay (React ^0.4.2)

As in the title, it's kind of hard to satisfy an exact dependency like that. It'd work better if the dependency on React was ^0.4.0.

'Query variables' is not expandable by clicking on it in Chrome Canary.

Browser: Google Chrome
Version 49.0.2617.0 canary (64-bit)
OS: Win 10

Problem: 'QUERY VARIABLES' tab is not expandable by clicking on it.
It might be browser problem..

Also tested in Firefox Nightly 46.0a1, everything good there.

Is there a way to disable subscriptionType?

graphiql's introspection query is looking for a subscriptionType on the __schema, but my server doesn't support this yet. Can I somehow disable this?

Render HTML responses

There's no real feedback if a server responds with something other than a 200 with correct query data.

It would be awesome if GraphiQL could either render the server response directly (using an iframe with HTML5 srcdoc), or provide a hook to do so manually.

Can't query for fields on a type

This query results in type.getFields is not a function.

query ShipTypeQuery {
  __type(name:"Starship") {
    fields
  }
}

Edit: s/Ship/Starship/

Keyboard shortcut to add all fields

There are times when I want to add all fields then remove some. I'd be fantastic l if there was a way to add all fields in a given navigation context using a keyboard shortcut.

Direct link to query

First off this is very cool! It'd be great to be able to share a link to a particular query, is this in the works?