graphql/graphiql

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

GraphQL IDE Monorepo

Security Notice: All versions of graphiql < 1.4.7 are vulnerable to an XSS attack in cases where the GraphQL server to which the GraphiQL web app connects is not trusted. Learn more in the graphiql security docs directory

Looking for the GraphiQL Docs?: This is the root of the monorepo! The full GraphiQL docs are located at packages/graphiql

Overview

GraphiQL is the reference implementation of this monorepo, GraphQL IDE, an official project under the GraphQL Foundation. The code uses the permissive MIT license.

Whether you want a simple GraphiQL IDE instance for your server, or a more advanced web or desktop GraphQL IDE experience for your framework or plugin, or you want to build an IDE extension or plugin, you've come to the right place!

The purpose of this monorepo is to give the GraphQL Community:

• a to-specification official language service (see: API Docs)
• a comprehensive LSP server and CLI service for use with IDEs
• a codemirror mode
• a monaco mode (in the works)
• an example of how to use this ecosystem with GraphiQL.
• examples of how to implement or extend GraphiQL.

graphiql

/ˈɡrafək(ə)l/ A graphical interactive in-browser GraphQL IDE. Try the live demo. We also have a demo using our latest netlify build for the main branch.

The GraphiQL IDE, implemented in React, currently using GraphQL mode for CodeMirror & GraphQL Language Service.

Learn more about GraphiQL in packages/graphiql/README.md

monaco-graphql

Provides monaco editor with a powerful, schema-driven graphql language mode. Uses the graphql-language-servicedirectly.

See the webpack example for a plain javascript demo using GitHub API

codemirror-graphql

Provides CodeMirror 5 with a parser mode for GraphQL along with a live linter and typeahead hinter powered by your GraphQL Schema. Uses the graphql-language-service.

cm6-graphql

Provides CodeMirror 6 with a full-featured language mode for GraphQL. Uses the graphql-language-service.

graphql-language-service

Provides language services for graphql-language-service-server codemirror-graphql and monaco-graphql. Previously published separately as the now-retired graphql-language-service-interface, graphql-language-service-parser, graphql-language-service-utils and graphql-language-service-types.

graphql-language-service-server

Provides language services for LSP-based IDE extensions using the graphql-language-service

graphql.vscode-graphql

An example implementation of graphql-language-service-server for Visual Studio Code. Available on the marketplace. OVSX fix is pending.

graphql.vscode-graphql-syntax

A new syntax highlighting-only extension for vscode to be used by other vscode extensions.

graphql.vscode-graphql-execution

An extension for vscode-graphql that allows inline query execution.

graphql-language-service-cli

Provides a CLI for the language service server.

Browser & Runtime Support

Many of these packages need to work in multiple environments.

By default, all typescript packages target es6.

graphql-language-service-server and graphql-language-service-cli are made for the node runtime, so they target es2017

codemirror-graphql and the graphiql browser bundle use the .browserslistrc, which targets modern browsers to keep bundle size small and keep the language services performant where async/await is used, and especially to avoid the requirement of regenerator-runtime or special babel configuration.

.browserslistrc:

last 2 versions
Firefox ESR
not dead
not IE 11
not ios 10
maintained node versions

To be clear, we do not support Internet Explorer or older versions of evergreen browsers.

Development

To get setup for local development of this monorepo, refer to DEVELOPMENT.md

Contributing to this repo

This is an open source project, and we welcome contributions. Please see CONTRIBUTING.md for details on how to contribute.

This repository is managed by EasyCLA. Project participants must sign the free GraphQL Specification Membership agreement before making a contribution. You only need to do this one time, and it can be signed by individual contributors or their employers.

To initiate the signature process please open a PR against this repo. The EasyCLA bot will block the merge if we still need a membership agreement from you.

Please note that EasyCLA is configured to accept commits from certain GitHub bots. These are approved on an exception basis once we are confident that any content they create is either unlikely to consist of copyrightable content or else was written by someone who has already signed the CLA (e.g., a project maintainer). The bots that have currently been approved as exceptions are:

• github-actions (exclusively for the changesets Action)

You can find detailed information here. If you have issues, please email [email protected].

Maintainers

Maintainers of this repository regularly review PRs and issues and help advance the GraphiQL roadmap

Alumni

Without these amazing past maintainers, where would we be?!

• @leebyron - original author of all libraries
• @asiandrummer - original creator of GraphiQL
• @wincent - early co-author and maintainer
• @lostplan - maintained the language service ecosystem until about 2017
• @IvanGoncharov - maintainer and transitional mentor to @acao and others
• @orta - has helped with so many parts of the project over the years, and provided the original redesign!
• @divyenduz - the original creator of vscode-graphql, and contributor to much of the ecosystem. Thanks Divy!

Active

Maintainers who are currently active (to varying degrees, please contact us via our discord channels!):

• @imolorhe
• @yoshiakis
• @urigo
• @timsuchanek
• @thomasheyenbrock
• @n1ru4l
• @acao
• @stonexer
• @B2o5T
• @dotansimha
• @saihaj
• @jonathanawesome
• @cshaver

Thank you graphql community for all the help & support! I did it all for you, and I couldn't have done it without you ❤️ - @acao

Fielding Proposals!

The door is open for proposals for the new GraphiQL Plugin API, and other ideas on how to make the rest of the IDE ecosystem more performant, scalable, interoperable and extensible. Feel free to open a PR to create a document in the /proposals/ directory. Eventually we hope to move these to a repo that serves this purpose.

Community

• Discord - Most discussion outside of GitHub happens on the GraphQL Discord Server
• Twitter - @GraphiQL and #GraphiQL
• GitHub - Create feature requests, discussions issues and bugs above
• Working Group - Yes, you're invited! Monthly planning/decision making meetings, and working sessions every two weeks on zoom! Learn more.

graphiql's Issues

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.

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.

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.

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?

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.

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.

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?

"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.

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.

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!

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.

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.

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.

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

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.

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"
  }

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.

Query Variables panel not visible in Safari 9.0

vs.

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

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.

./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!

Proper treatment of deprecated portions of schema

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/

'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.

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>

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.

GraphiQL editor appears unstyled

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

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.

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

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.

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?

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 :)

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.

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.

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.

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?

"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

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.

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 😞)

URL param to ensure docs panel displays?

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

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?

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.

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!

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:

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.

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?

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.

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.