graphiql README

The project's README from github.com/graphql/graphiql. As one markdown file: README.md.

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 pkg.pr.new Discord Code Coverage GitHub top language GitHub language count Snyk Vulnerabilities for GitHub Repo CII Best Practices

Overview

GraphiQL (pronounced like "graphical") 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:

graphiql

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

monaco-graphql

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

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

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

Animated Codemirror GraphQL Completion Example

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

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

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

graphql-language-service

NPM npm downloads Snyk Vulnerabilities for npm package

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

NPM npm downloads Snyk Vulnerabilities for npm package

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

NPM npm downloads Snyk Vulnerabilities for npm package

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:

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?!

Active

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

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

graphiql (graphql/graphiql)

Searching Database…

16.9K ·GitHub
这是什么?这是官方的 GraphQL IDE——一个图形化的浏览器内交互式 IDE,用于探索 GraphQL API,是 GraphQL 基金会的官方项目。这个 monorepo 还承载了 GraphQL LSP 生态,用于开发浏览器和 IDE 工具。
这是一个应用还是一组包?这是一个 monorepo:包含 GraphiQL IDE 本身,以及 CodeMirror 5/6 和 Monaco 的编辑器模式、共享的 graphql-language-service、一个 LSP 服务器和命令行工具,还有多个 VS Code 扩展。
我怎么试用它?在浏览器里打开在线演示——main 分支也有一个 Netlify 构建版本。如果想搭配你自己的 API 使用,可以部署一个指向你 GraphQL 服务器的 GraphiQL 实例;文档在 packages/graphiql 里。
如果我想把这个 IDE 嵌入到自己的应用里,需要什么?GraphiQL 是一个 React 组件——这个 IDE 用 React 实现,配合 CodeMirror 的 GraphQL 模式和 GraphQL Language Service。语言服务服务器和命令行工具则是 Node 程序。
使用前有什么需要注意的坑?有两点:README 警告说,如果连接的 GraphQL 服务器不可信,所有版本的 GraphiQL 都可能受到 XSS 攻击;另外浏览器版本只面向现代浏览器——不支持 Internet Explorer。
这些东西实际能运行在哪里?IDE 运行在现代化的常青浏览器里,而语言服务服务器和命令行工具则是为 Node 运行时构建的——VS Code 扩展同样基于 Node。
我主要用 VS Code,有适合我的扩展吗?有。graphql.vscode-graphql 已上架 VS Code 市场,基于语言服务服务器构建。还有一个只提供语法高亮的扩展,以及一个支持内联执行查询的扩展。
我在开发自己的编辑器工具,可以复用其中一部分吗?这正是这个生态的半数意义所在:codemirror-graphql 提供了由 schema 驱动的解析模式,带实时 lint 和自动补全提示;cm6-graphql 支持 CodeMirror 6;monaco-graphql 支持 Monaco;LSP 服务器则可以支撑任何基于 LSP 的 IDE 扩展。
我能用插件扩展 GraphiQL 本身吗?GraphiQL 插件 API 目前正在设计中——提案通道是开放的,你可以在 /proposals/ 目录下提交一个文档并发起 PR 来提出你的想法。
它能连接任意 GraphQL 服务器吗?可以,任何 GraphQL 端点都行——仓库里甚至自带一个连接 GitHub API 的纯 JavaScript webpack 演示。但按照 XSS 提示的要求,请确保那是你信任的服务器。
Creator
graphql
Size
36.7 MB
Stars
16.9K
Age
11y
Commits · 90 Days