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

Overview

Black Lives Matter 🖤

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

Build Status Discord Code Coverage GitHub top language GitHub language count Snyk Vulnerabilities for GitHub Repo LGTM Grade LGTM Alerts CII Best Practices

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.

Latest Stable Ecosystem

[email protected] and ecosystem are organized as below. Any further changes to [email protected] are made against 1.0.0 branch

Diagram of the current Monorepo and third party ecosystem

Proposed Ecosystem

As we re-write for [email protected] ecosystem, this monorepo will contain an sdk and plugins.

Diagram of the proposed Monorepo and third party ecosystem

GraphiQL

Breaking Changes & Improvements: several interfaces are being dropped for new ones are arriving for GraphiQL 1.0.0! Read more in this issue

NPM jsDelivr hits (npm) npm downloads Snyk Vulnerabilities for npm package npm bundle size (version) npm bundle size (version)

Screenshot of GraphiQL with Doc Explorer Open

/ˈɡ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

How To Setup/Implement GraphiQL

codesandbox.io graphiql exmaple stackblitz.com graphiql example

The GraphiQL Readme explains some of the ways to implement GraphiQL, and we also have the examples directory as well!

Monaco GraphQL

NPM jsDelivr hits (npm) npm downloads Snyk Vulnerabilities for npm package

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

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

CodeMirror GraphQL

NPM jsDelivr hits (npm) npm downloads Snyk Vulnerabilities for npm package

Animated Codemirror GraphQL Completion Example

Provides CodeMirror with a parser mode for GraphQL along with a live linter and typeahead hinter powered by your GraphQL Schema

GraphQL Language Service

NPM npm downloads Snyk Vulnerabilities for npm package

Provides a command-line interface for running GraphQL Language Service Server for various IDEs.

GraphQL Language Service Server

NPM npm downloads Snyk Vulnerabilities for npm package

An almost fully LSP compliant server process backing the GraphQL Language Service.

GraphQL Language Service Interface

NPM jsDelivr hits (npm) npm downloads Snyk Vulnerabilities for npm package

Runtime agnostic Language Service used by GraphQL mode for CodeMirror and GraphQL Language Service Server

GraphQL Language Service Parser

NPM npm downloads Snyk Vulnerabilities for npm package

An online immutable parser for GraphQL, designed to be used as part of syntax-highlighting and code intelligence tools such as for the GraphQL Language Service and codemirror-graphql.

GraphQL Language Service Types

NPM npm downloads

Flow and Typescript type definitions for the GraphQL Language Service.

GraphQL Language Service Utilities

NPM npm downloads Snyk Vulnerabilities for npm package

Utilities to support the GraphQL Language Service.

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 rengenerator-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 generated by the bot itself or written by someone who has already signed the CLA (e.g., a project maintainer).

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 regulary review PRs and issues and help advance the GraphiQL roadmap

Alumni

Originally this was three seperate repositories

  • @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

Active

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, scaleable, 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 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.
Comments
  • How to use Graphiql when /graphql protected by JWT token (authorization header)

    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!

    opened by sulliwane 87
  • lsp server doesn't start using coc.vim

    lsp server doesn't start using coc.vim

    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 []
    
    bug lsp-server 
    opened by ajkaanbal 65
  • TypeError: Cannot read property 'schemaPath' of undefined

    TypeError: Cannot read property 'schemaPath' of undefined

    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

    lsp-server 
    opened by tomitrescak 36
  • Political phrasing is used in the read me which is controversial and might provoke anti semitism

    Political phrasing is used in the read me which is controversial and might provoke anti semitism

    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

    opened by aviv1ron1 35
  • Cannot build with webpack

    Cannot build with webpack

    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
    
    opened by wmertens 31
  • Editor is not showing on first render

    Editor is not showing on first render

    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

    bug 
    opened by moti-maestro 31
  • Uncaught Error: Mode graphql failed to advance stream.

    Uncaught Error: Mode graphql failed to advance stream.

    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

    bug 
    opened by darinallen 31
  • feat: monaco variables json, improved schema & worker loading & monaco api

    feat: monaco variables json, improved schema & worker loading & monaco api

    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
    enhancement graphiql monaco-graphql 
    opened by acao 29
  • Schema must be an instance of GraphQLSchema

    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

    opened by sulliwane 29
  • feat(graphql-config): add graphql config extensions

    feat(graphql-config): add graphql config extensions

    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
    opened by divyenduz 28
  • feat: Add `@graphiql/plugin-code-exporter`

    feat: Add `@graphiql/plugin-code-exporter`

    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

    opened by LekoArts 27
  • fix: VariableJSONSchema for custom scalars

    fix: VariableJSONSchema for custom scalars

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

    after: image

    opened by bboure 2
  • When using large schema files, you can not jump quickly every time

    When using large schema files, you can not jump quickly every time

    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

    bug graphiql 
    opened by stfujnkk 1
  • [vscode-graphql-syntax] GraphQL: Syntax - highlight error

    [vscode-graphql-syntax] GraphQL: Syntax - highlight error

    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

    Screenshot from 2022-12-27 15-00-17

    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

    bug lsp-server 
    opened by lamanabie 0
  • [graphiql] Working with Explore Plugin and defaultTabs prop

    [graphiql] Working with Explore Plugin and defaultTabs prop

    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

    bug graphiql 
    opened by harshil1712 0
  • [graphiql] Support pasting in GraphQL request format (JSON) and in

    [graphiql] Support pasting in GraphQL request format (JSON) and in "Copy as cURL" format

    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>
    
    enhancement graphiql 
    opened by aleksandr-vin 0
Owner
GraphQL
GraphQL
MGE-GraphQL is a Python library for building GraphQL mutations fast and easily

MGE-GraphQL Introduction MGE-GraphQL is a Python library for building GraphQL mutations fast and easily. Data Validations: A similar data validation w

MGE Software 4 Apr 23, 2022
GraphQL security auditing script with a focus on performing batch GraphQL queries and mutations

BatchQL BatchQL is a GraphQL security auditing script with a focus on performing batch GraphQL queries and mutations. This script is not complex, and

Assetnote 267 Dec 24, 2022
This is a graphql api build using ariadne python that serves a graphql-endpoint at port 3002 to perform language translation and identification using deep learning in python pytorch.

Language Translation and Identification this machine/deep learning api that will be served as a graphql-api using ariadne, to perform the following ta

crispengari 2 Dec 30, 2021
A Django GraphQL Starter that uses graphene and graphene_django to interface GraphQL.

Django GraphQL Starter GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data... According to the doc

0101 Solutions 1 Jan 10, 2022
GraphQL framework for Python

Graphene ?? Join the community on Slack We are looking for contributors! Please check the ROADMAP to see how you can help ❤️ The below readme is the d

GraphQL Python 7.5k Jan 1, 2023
tartiflette-aiohttp is a wrapper of aiohttp which includes the Tartiflette GraphQL Engine, do not hesitate to take a look of the Tartiflette project.

tartiflette-aiohttp is a wrapper of aiohttp which includes the Tartiflette GraphQL Engine. You can take a look at the Tartiflette API documentation. U

tartiflette 60 Nov 8, 2022
ASGI support for the Tartiflette GraphQL engine

tartiflette-asgi is a wrapper that provides ASGI support for the Tartiflette Python GraphQL engine. It is ideal for serving a GraphQL API over HTTP, o

tartiflette 99 Dec 27, 2022
GraphQL is a query language and execution engine tied to any backend service.

GraphQL The GraphQL specification is edited in the markdown files found in /spec the latest release of which is published at https://graphql.github.io

GraphQL 14k Jan 1, 2023
GraphQL framework for Python

Graphene ?? Join the community on Slack We are looking for contributors! Please check the ROADMAP to see how you can help ❤️ The below readme is the d

GraphQL Python 7.5k Jan 1, 2023
Integrate GraphQL into your Django project.

Graphene-Django A Django integration for Graphene. ?? Join the community on Slack Documentation Visit the documentation to get started! Quickstart For

GraphQL Python 4k Dec 31, 2022
Ariadne is a Python library for implementing GraphQL servers using schema-first approach.

Ariadne Ariadne is a Python library for implementing GraphQL servers. Schema-first: Ariadne enables Python developers to use schema-first approach to

Mirumee Labs 1.9k Jan 1, 2023
Adds GraphQL support to your Flask application.

Flask-GraphQL Adds GraphQL support to your Flask application. Usage Just use the GraphQLView view from flask_graphql from flask import Flask from flas

GraphQL Python 1.3k Dec 31, 2022
A library to help construct a graphql-py server supporting react-relay

Relay Library for GraphQL Python GraphQL-relay-py is the Relay library for GraphQL-core. It allows the easy creation of Relay-compliant servers using

GraphQL Python 143 Nov 15, 2022
GraphQL Engine built with Python 3.6+ / asyncio

Tartiflette is a GraphQL Server implementation built with Python 3.6+. Summary Motivation Status Usage Installation Installation dependencies Tartifle

tartiflette 839 Dec 31, 2022
Django registration and authentication with GraphQL.

Django GraphQL Auth Django registration and authentication with GraphQL. Demo About Abstract all the basic logic of handling user accounts out of your

pedrobern 301 Dec 9, 2022
A new GraphQL library for Python 🍓

Strawberry GraphQL Python GraphQL library based on dataclasses Installation ( Quick Start ) The quick start method provides a server and CLI to get go

Strawberry GraphQL 2.8k Jan 1, 2023
tartiflette-aiohttp is a wrapper of aiohttp which includes the Tartiflette GraphQL Engine, do not hesitate to take a look of the Tartiflette project.

tartiflette-aiohttp is a wrapper of aiohttp which includes the Tartiflette GraphQL Engine. You can take a look at the Tartiflette API documentation. U

tartiflette 60 Nov 8, 2022
(Now finding maintainer) 🐍A Pythonic way to provide JWT authentication for Flask-GraphQL

Flask-GraphQL-Auth What is Flask-GraphQL-Auth? Flask-GraphQL-Auth is JWT decorator for flask-graphql inspired from Flask-JWT-Extended. all you have to

Seonghyeon Kim 64 Feb 19, 2022
ASGI support for the Tartiflette GraphQL engine

tartiflette-asgi is a wrapper that provides ASGI support for the Tartiflette Python GraphQL engine. It is ideal for serving a GraphQL API over HTTP, o

tartiflette 99 Dec 27, 2022