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!

I'm having the same issue described here:

https://github.com/neoclide/coc.nvim/issues/3687

and here:

https://stackoverflow.com/questions/68750196/graphql-lsp-with-coc-neovim

I gather these logs:

vim version: NVIM v0.7.0-dev+1233-gabbc9148d
node version: v17.5.0
coc.nvim version: 0.0.80-a554a31c 2022-03-11 19:04:48 +0800
coc.nvim directory: $HOME/.vim/bundle/coc.nvim
term: tmux
platform: linux

## Log of coc.nvim


2022-03-11T09:17:35.905 INFO (pid:3255126) [services] - registered service "languageserver.graphql"
2022-03-11T09:17:35.908 INFO (pid:3255126) [services] - graphql state change: stopped => starting
2022-03-11T09:17:35.935 INFO (pid:3255126) [plugin] - coc.nvim initialized with node: v17.5.0 after 87ms
2022-03-11T09:17:35.940 INFO (pid:3255126) [language-client-index] - Language server "languageserver.graphql" started with 3255169
2022-03-11T09:17:36.264 INFO (pid:3255126) [services] - graphql state change: starting => running
2022-03-11T09:17:36.268 INFO (pid:3255126) [services] - service languageserver.graphql started
2022-03-11T09:17:36.312 INFO (pid:3255126) [services] - graphql state change: running => stopped
2022-03-11T09:17:36.312 INFO (pid:3255126) [services] - graphql state change: stopped => starting
2022-03-11T09:17:36.315 INFO (pid:3255126) [language-client-index] - Language server "languageserver.graphql" started with 3255218
2022-03-11T09:17:36.633 INFO (pid:3255126) [services] - graphql state change: starting => running
2022-03-11T09:17:36.678 INFO (pid:3255126) [services] - graphql state change: running => stopped
2022-03-11T09:17:36.678 INFO (pid:3255126) [services] - graphql state change: stopped => starting
2022-03-11T09:17:36.680 INFO (pid:3255126) [language-client-index] - Language server "languageserver.graphql" started with 3255249
2022-03-11T09:17:36.991 INFO (pid:3255126) [services] - graphql state change: starting => running
2022-03-11T09:17:37.034 INFO (pid:3255126) [services] - graphql state change: running => stopped
2022-03-11T09:17:37.034 INFO (pid:3255126) [services] - graphql state change: stopped => starting
2022-03-11T09:17:37.037 INFO (pid:3255126) [language-client-index] - Language server "languageserver.graphql" started with 3255260
2022-03-11T09:17:37.342 INFO (pid:3255126) [services] - graphql state change: starting => running
2022-03-11T09:17:37.386 INFO (pid:3255126) [services] - graphql state change: running => stopped
2022-03-11T09:17:40.344 INFO (pid:3255126) [attach] - receive notification: showInfo []

Hi,

I cannot make this run on Windows ;( I am receiving this error:

(node:6500) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
[Error - 14:13:40] Request textDocument/hover failed.
  Message: Request textDocument/hover failed with message: Cannot read property 'projectName' of undefined
  Code: -32603 

This is my .graphqlconfig.yml

projects:
  app:
    schemaPath: "src/data/yoga/schema.graphql"
    includes: ["src/**/*.graphql"]
    extensions:
      endpoints:
        default: "http://localhost:4000"
      codegen:
        - generator: prisma-binding
          language: typescript
          output: 
            binding: src/data/generated/api.ts
  prisma:
    schemaPath: "src/data/generated/prisma.graphql"
    includes: ["src/**/*.graphql"]
    extensions:
      prisma: src/data/prisma/prisma.yml
      codegen:
        - generator: prisma-binding
          language: typescript
          output: 
            binding: src/data/generated/prisma.ts

All Works well on MAC with this setup

The term "free palestine" which was posted on the readme: A. has no relevance to the project B. violates the graphql code of conduct C. is controversial politically D. is many times accompanied to anti semitic behavior such as the recent attacks on jews in LA: https://www.nytimes.com/2021/05/20/us/jewish-hate-crime-los-angeles.html

I'm trying to bundle graphiql which uses codemirror-graphql which uses graphql-language-service.

The build is failing because webpack can't parse the bundled js.flow files, and it is trying to parse those because of the dynamic import at https://github.com/graphql/graphql-language-service/blob/master/packages/graphql-language-service-interface/src/GraphQLLanguageService.js#L87 (probably) which could be importing anything at all.

Is it not possible to limit the require by making it something like:

require(`./${somePath}.js`)

?

If not, is it possible to not include the flow js files in the dist folder?

The webpack error is:

Module parse failed: .../node_modules/graphql-language-service-interface/dist/getOutline.js.flow Unexpected token (11:12)
You may need an appropriate loader to handle this file type.
|  */
|
| import type {
|   Outline,
|   TextToken,
 @ ./node_modules/graphql-language-service-interface/dist ^.*$
 @ ./node_modules/graphql-language-service-interface/dist/GraphQLLanguageService.js
 @ ./node_modules/graphql-language-service-interface/dist/index.js
 @ ./node_modules/codemirror-graphql/lint.js
 @ ./node_modules/graphiql/dist/components/QueryEditor.js
 @ ./node_modules/graphiql/dist/components/GraphiQL.js
 @ ./node_modules/graphiql/dist/index.js
 @ ./lib/universal/Graphql/index.jsx
 @ ./lib/universal/Root.jsx
 @ ./lib/client/index.js
 @ multi babel-polyfill stratokit/client

When I render , the component renders ok, but the editor is broken and you can neither type nor see what's there (although the correct elements do appear in the DOM, just with broken style). It's the same for the editor, the result section and the variables, since they all use CodeMirror.

Now, if I cause a re-render (by playing with state or moving to another page and returning), the editor loads okay and you can use the component.

Also, for some reason, I can't customize the GraphiQL component and it ignores the children nodes I supply (GraphiQL.Logo, Menu, etc.)

I reproduced the bug here: https://github.com/moti-maestro/graphiql-editor-bug

Has anyone else had this problem as well?

Thank you for your help

I am trying to use graphiql with a gatsby project and I am experiencing the same issue described in #163. As the author of that issue wrote, I can't type anything into the editor. The editor space is just blank. When looking at the developer tools I see:

Uncaught Error: Mode graphql failed to advance stream.

I've tried clearing the local storage, and that doesn't do anything. I believe this issue originated when I accidentally hit option-space instead of ctrl-space, which I've seen reported as an issue with another plugin:

https://github.com/jimkyndemeyer/js-graphql-intellij-plugin/issues/33

a ton of monaco-graphql changes here, many many breaking changes. API is entirely rewritten.

Changes

• adds variables JSON completion, validation, hover, etc using the JSON Schema support in monaco-graphql
  • you can now set variable diagnostics like this:

  monacoAPI.setDiagnosticSettings({ 
    // currently Record<string, string[]>, 
    // may opt for Record<string, { uris: string[], ...otherConfig }>
    variablesEditorValidation: {
      [myOperationModel.uri.toString()]: [variablesModel.uri.toString]
    },
   // same as json.jsonDefaults.setDiagnosticConfig() options
    variablesDiagnosticSettings: { 
      allowComments: true, // enables jsonc support
      validateSchema: 'error'
    }
  })
  

  • currently you can only overwrite this config all at once, but I may add a method to update it more atomically
  • this is an abstraction that inevitably leads to some encapsulation issues, so the readme will demonstrate how to add support without this method.
• uses graphql as the language ID finally. this defaults to microsoft's provided syntax support and language config (which you can find in the monaco-editor repository under basicLangauges).
  • important! this presumes that any improvements we need to make to the monarch grammar and language config will be contributed to monaco-editor, and we will serve as a full language worker implementation that extends their basic configuration.
• completely rewrote monaco graphql schema loading logic. schema is loaded synchronously in main process now, and passed off to the web worker. monaco does not do any business of fetching remote schema, ala codemirror-graphql. This is a feature as graphql userland has many ways to request remote schemas. See graphql-tools for example!
• accepts multiple schemas! using schemas ala monaco-json 🎉
  • for each SchemaConfig, you can provide either schema, introspectionJSON, introspectionJSONString, documentString and documentAST as schema input.
  • schema requires a uri that is not used for remote loading, but as a cache key and for the model uri. for definitions support, we will set an SDL string to a model at this URI that will be used for schema lookups. this can be a URL or a file URI, anything that works with monaco.URI.parse(). this is a common pattern with monaco, and the file URIs can either be an internal implementation detail, or can be presented to users ala vscode/codesandbox/etc, that's up to you.
  • ala monaco-json, each entry in schemas has a fileMatch array of normal file paths or globs to match up graphql files to their schemas <3
  • normalized graphql-config output could likely be mapped to this!
  • the api exposes a function to updateSchemas() in the GraphQLWorker.
  • whenever the schemas change, the editor language features are reset
  • GraphQLWorker will keep an in-memory cache of schema information despite changes to config

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

This PR is a port of https://github.com/graphql/graphql-language-service/pull/240

It adds GraphQL config extension support to the language server.

This would enable the following scenarios (not-exhaustive):

1. Using environment variables (or variables in a custom format)
2. Supply customDirectives dynamically - can be tool specific like Gatsby
3. Supply customValidationRules dynamically
4. Add endpoints, headers dynamically

Description

Adds https://github.com/OneGraph/graphiql-code-exporter, copying what https://github.com/graphql/graphiql/pull/2715 did. Only "problems" are:

• The library itself is pretty outdated, maybe one should consider vendoring it completely?
• The underlying UI doesn't use the new @graphiql/react components
• a11y issues

With a bunch of CSS overrides it works fine now.

Preview

https://user-images.githubusercontent.com/16143594/189112549-ecf5bde2-8cce-44a9-845a-33933e84bf74.mov

Related Issues

Doing that to unblock myself for https://github.com/gatsbyjs/gatsby/pull/36541

any is not an accepted value for type, which gives an error in validation.

In order to accept any value, we should just not add the type property at all.

before:

after:

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

I'm doing work about GraphQL API of shopify on VsCode. However, the graphql definition of shopify is very large, resulting jump to the definition is slow. At first, I thought it was caused by not setting the jump related index. Later, I found that I can jump very quickly when the first time. Therefore, I thought it was because the large file opened after the jump caused the plug-in to get stuck. I hope to cache this large file in the background instead of reloading it every time.

Expected Behavior

Jump to the definition quickly

Steps To Reproduce

Use the definition of shopify's graphql API , about 60,000 lines

Module pattern

• [ ] graphiql-umd
• [ ] graphiql-esm
• [x] graphiql-commonjs

Environment

- GraphiQL Version:
- OS: Windows10
- Browser:
- Bundler:
- `react` Version:
- `graphql` Version:

Anything else?

No response

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

I have .cts file in vscode with content

const a = 47

const is being highlighted with message: Syntax Error: Unexpected Name "const".GraphQL: Syntax

When i disable vscode extension GraphQL: Language Feature Support - highlight error does not shows up

Expected Behavior

In .cts files should not display errors from GraphQL: Syntax when no GQL syntax is being used

Steps To Reproduce

Install vscode plugins:
- GraphQL: Language Feature Support  v0.8.4
- GraphQL: Syntax Highlighting  v1.0.5

create any .cts file and write valid typescript ex.

const a = 47

vscode will highlight const with error: Syntax Error: Unexpected Name "const".GraphQL: Syntax

Environment

- VSCode plugins:
  - GraphQL: Language Feature Support  v0.8.4
  - GraphQL: Syntax Highlighting  v1.0.5
- OS: Fedora 36

Anything else?

No response

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

The playground doesn't run as expected when trying to implement the Explorer Plugin and the defaultTabs props. The following are the issues:

• On every refresh new tabs get added automatically. I've searched the existing and past GitHub issues, and it didn't help.
• On switching tabs, the query from the recently highlighted tab replaces the queries in all the tabs

Expected Behavior

• On refresh, no new tabs should be added automatically
• When switching between the tabs, the queries should persist

Steps To Reproduce

Here's the sample repo: https://github.com/harshil1712/react-gql-playground

Module pattern

• [ ] graphiql-umd
• [ ] graphiql-esm
• [ ] graphiql-commonjs

Environment

- GraphiQL Version: 2.2.0
- OS: MacOS 13.0.1
- Browser: Brave Version 1.46.140 Chromium: 108.0.5359.99
- Bundler:
- `react` Version: 18.2.0
- `graphql` Version:

Anything else?

No response

I'm checking graphql requests of my frontend via Developer Tools > Network tab, where I can either copy the Request text from Preview tab, which is a JSON, or I can right-click on the request and select "Copy as cURL", which will copy the shell command syntax with headers and --data-binary followed by JSON of GraphQL request again.

It would be nice to automatically analyse the text from paste buffer, when user paste it in GraphiQL and set query, variables and headers accordingly.

I've made a dirty hack on my copy of graphiql.html, which can be used as a starting point of that UX.

<!--
 *  Copyright (c) 2021 GraphQL Contributors
 *  All rights reserved.
 *
 *  This source code is licensed under the license found in the
 *  LICENSE file in the root directory of this source tree.
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>GraphiQL</title>
    <style>
      body {
        height: 100%;
        margin: 0;
        width: 100%;
        overflow: hidden;
      }

      #graphiql {
        height: 100vh;
      }
    </style>

    <!--
      This GraphiQL example depends on Promise and fetch, which are available in
      modern browsers, but can be "polyfilled" for older browsers.
      GraphiQL itself depends on React DOM.
      If you do not want to rely on a CDN, you can host these files locally or
      include them directly in your favored resource bundler.
    -->
    <script
      src="https://unpkg.com/react@17/umd/react.development.js"
      integrity="sha512-Vf2xGDzpqUOEIKO+X2rgTLWPY+65++WPwCHkX2nFMu9IcstumPsf/uKKRd5prX3wOu8Q0GBylRpsDB26R6ExOg=="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
      integrity="sha512-Wr9OKCTtq1anK0hq5bY3X/AvDI5EflDSAh0mE9gma+4hl+kXdTJPKZ3TwLMBcrgUeoY0s3dq9JjhCQc7vddtFg=="
      crossorigin="anonymous"
    ></script>

    <!--
      These two files can be found in the npm module, however you may wish to
      copy them directly into your environment, or perhaps include them in your
      favored resource bundler.
     -->
    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
  </head>

  <body onPaste="handlepaste(this, event);">
    <div id="graphiql">Loading...</div>
    <script
      src="https://unpkg.com/graphiql/graphiql.min.js"
      type="application/javascript"
    ></script>

    <script>
      var fetcher = GraphiQL.createFetcher({
        url: "https://swapi-graphql.netlify.app/.netlify/functions/index",
      });

      const readDataBinary = true;
      const readHeaders = true;

      /**
       * These headers will be overridden by browser anyway
       */
      const skipHeaders = [
        "Content-Type",
        "Origin",
        "Cookie",
        "Content-Length",
        //"Accept-Language",
        "Host",
        "User-Agent",
        "Referer",
        "Accept-Encoding",
        "Connection",
      ].map((x) => x.toLowerCase());

      var zSetQuery = {};
      var zSetVariables = {};
      var zSetHeaders = {};

      function smartSetJSON(data) {
        const obj = JSON.parse(data);
        if ("query" in obj) {
          zSetQuery(obj["query"]);
        }
        if ("variables" in obj) {
          zSetVariables(JSON.stringify(obj["variables"]));
        }
      }

      function handlepaste(x, event) {
        const data = event.clipboardData.getData("Text");
        try {
          smartSetJSON(data);
        } catch (e) {
          console.debug("Not a JSON, checking for cURL format");
          if (readDataBinary) {
            const regex = /\s+--data-binary\s'(.*)'/g;
            const matches = [...data.matchAll(regex)];
            for (i in matches) {
              smartSetJSON(matches[i][1]);
            }
          }
          if (readHeaders) {
            const regex = /\s+-H\s'([^:]+):\s+(.*)'/g;
            const matches = [...data.matchAll(regex)];
            const headers = {};
            for (i in matches) {
              if (!skipHeaders.includes(matches[i][1].toLowerCase())) {
                headers[matches[i][1]] = matches[i][2];
              }
            }
            if (headers !== {}) {
              zSetHeaders(JSON.stringify(headers));
            }
          }
        }
      }

      function CustomGraphiQL() {
        var [query, setQuery] = React.useState(``);
        var [variables, setVariables] = React.useState(``);
        var [headers, setHeaders] = React.useState(``);

        zSetQuery = setQuery;
        zSetVariables = setVariables;
        zSetHeaders = setHeaders;

        return React.createElement(GraphiQL, {
          fetcher: fetcher,
          defaultEditorToolsVisibility: true,
          plugins: [],
          query: query,
          onEditQuery: setQuery,
          variables: variables,
          onEditVariables: setVariables,
          headers: headers,
          onEditHeaders: setHeaders,
        });
      }

      ReactDOM.render(
        React.createElement(CustomGraphiQL),
        document.getElementById("graphiql")
      );
    </script>
  </body>
</html>