graphql/graphiql

这是什么？

核心功能

• 01基于浏览器的 GraphiQL IDE，内置 Doc Explorer 用于浏览 Schema。
• 02提供感知 GraphQL Schema 的语法校验与自动补全语言服务。
• 03提供 LSP 服务器和 CLI，用于在 IDE 中集成 GraphQL 支持。
• 04支持 CodeMirror 5、CodeMirror 6 和 Monaco 编辑器。
• 05提供 VS Code 扩展，支持语法高亮与行内查询执行。

适用场景

• 为服务端或文档站点添加可交互的 GraphQL 调试界面。
• 在 Web 应用中构建 GraphQL 编辑体验。
• 在 VS Code 或其他支持 LSP 的编辑器中提供 GraphQL 补全与校验。
• 基于共享的语言服务开发自定义 GraphQL IDE 插件。

快速上手

1. 1

   阅读 packages/graphiql/README.md 中的 GraphiQL 设置文档

2. 2

   如需在本地开发此单体仓库，请按照 DEVELOPMENT.md 操作

使用前须知

• !当所连接的 GraphQL 服务器不可信时，1.4.7 之前的 graphiql 版本存在 XSS 漏洞。
• !Monaco 模式仍在开发中。

标签

常见问题

graphiql 是什么？

GraphiQL 是一款浏览器内的 GraphQL IDE，同时包含支撑它及各类编辑器工具的语言服务与 LSP 服务器。 GraphiQL 是一款基于浏览器运行的图形化交互式 GraphQL IDE，使用 React 实现。开发者可以在其中编写并执行对 GraphQL 服务端的查询，并通过 Doc Explorer 浏览 Schema。本仓库是 GraphQL 基金会官方 monorepo 的参考实现。

graphiql 可以免费使用吗？用的什么许可证？

graphiql 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

graphiql 还在维护吗？

活跃维护中。graphiql 最近一次提交是在 2026年10月21日。

graphiql 适合用来做什么？

为服务端或文档站点添加可交互的 GraphQL 调试界面。 在 Web 应用中构建 GraphQL 编辑体验。 在 VS Code 或其他支持 LSP 的编辑器中提供 GraphQL 补全与校验。 基于共享的语言服务开发自定义 GraphQL IDE 插件。

graphiql 怎么安装和运行？

阅读 packages/graphiql/README.md 中的 GraphiQL 设置文档 如需在本地开发此单体仓库，请按照 DEVELOPMENT.md 操作

在哪里获取 graphiql？

源代码和安装说明在 GitHub 上：https://github.com/graphql/graphiql