# GraphQL Playground

浏览器内的 GraphQL 客户端：编写查询与变量，发送到任意 GraphQL 端点，查看格式化的 JSON 结果或错误数组——开发阶段快速迭代 Schema 的理想工具

> 标准页面: https://elysiatools.com/zh/tools/graphql-playground

- **分类:** Development

- **关键词:** graphql, graphql playground, graphql 客户端, gql, 查询, mutation, 内省, api 探索, graphiql, relay, apollo

## 概述

GraphQL Playground 是一款便捷的浏览器端 GraphQL 客户端工具。您只需输入 GraphQL 服务的端点地址，编写查询语句（Query）或变更操作（Mutation），并配置所需的变量与请求头，即可直接向服务器发送请求并实时查看格式化后的 JSON 响应结果或错误信息，是开发和调试 GraphQL API 的理想助手。

## 输入项

- **GraphQL 端点** (text): https://api.example.com/graphql
- **查询** (textarea)
- **变量（JSON）** (textarea): { "id": "1" }
- **请求头** (textarea): Authorization: Bearer token x-api-key: xxx

## 适用场景

- 需要快速测试或调试远程或本地的 GraphQL API 端点时。
- 在开发阶段需要验证 GraphQL 查询语句（Query）或变更（Mutation）的语法与返回结构时。
- 需要通过自定义请求头（如 Authorization 令牌）或动态变量（Variables）测试受保护的 API 接口时。

## 工作原理

- 在“GraphQL 端点”输入框中填写目标 API 的 URL 地址。
- 在“查询”区域编写您的 GraphQL 查询或变更语句，并在“变量”和“请求头”中配置所需的参数。
- 点击发送按钮，工具将向指定的端点发起 HTTP POST 请求。
- 实时接收并展示格式化后的 JSON 响应数据或详细的错误数组。

## 使用案例

- 前端开发者在接入数据前，快速验证后端 GraphQL 接口的数据结构。
- 后端开发者在开发过程中，临时测试新编写的 Schema 和解析器（Resolver）。
- API 文档阅读者通过实际发送请求，探索和理解公开的 GraphQL API。

## 常见问题

### 这个工具支持发送 Mutation（变更）操作吗？

支持。您可以在查询区域编写任何标准的 GraphQL Query 或 Mutation 操作。

### 如何在请求中传递身份验证 Token？

您可以在“请求头”输入框中以键值对形式（例如 Authorization: Bearer your-token）填写您的认证信息。

### 为什么我的请求被拒绝并提示跨域错误（CORS）？

这通常是因为目标 GraphQL 服务器未允许来自本站域名的跨域请求。您需要确保目标服务器配置了允许的 CORS 策略。

### 变量（Variables）应该以什么格式编写？

变量必须使用标准的 JSON 格式编写，例如 {"id": "123", "limit": 10}。

### 这个工具会保存我的查询历史或敏感请求头吗？

所有的请求均在您的浏览器端直接发起，我们不会在服务器端存储您的查询内容、变量或敏感的请求头信息。

## 相关工具

- [package.json 依赖审计器](https://elysiatools.com/zh/tools/package-json-dependency-auditor): 审计 package.json 的依赖卫生、版本范围质量，并可选地从 package-lock.json 或 yarn.lock 深入检查传递依赖树。会标记重复依赖、通配符或预发布版本、未排序键、缺失元数据，以及运行时/开发时依赖误分类问题。
- [SQL 执行计划可视化器](https://elysiatools.com/zh/tools/sql-explain-plan-visualizer): 粘贴 EXPLAIN / EXPLAIN ANALYZE 输出（PostgreSQL/MySQL/SQLite），渲染为成本树，标注估算行数与实际行数的偏差热点，并给出具体的索引建议
- [Lodash 在线工具](https://elysiatools.com/zh/tools/lodash-online-utility): 对 JSON 输入运行安全、精选的 Lodash 数组、对象和字符串方法。
- [BOM字符移除器](https://elysiatools.com/zh/tools/data-bom-remover): 从文本和文件内容中移除BOM（字节顺序标记）字符。非常适合清理有编码问题的文本文件、修复CSV导入和为处理准备数据。 功能特点： - 检测并移除UTF-8 BOM (EF BB BF) - 检测并移除UTF-16 BOM (FE FF 或 FF FE) - 检测并移除UTF-32 BOM (00 00 FE FF 或 FF FE 00 00) - 支持多种输入格式 - 可视化BOM字符显示 - 详细检测报告 - 支持批量文本处理 常见用途： - 修复CSV文件导入错误 - 清理文本文件编码问题 - 为JSON解析准备数据 - 修复XML解析问题 - 解决API数据编码冲突 - 标准化文本数据格式
- [数据范围限制器](https://elysiatools.com/zh/tools/data-range-limiter): 将数值限制在指定范围内，通过裁剪、过滤或标记越界值。完美用于数据质量控制、传感器数据清洗、业务规则执行和数据预处理。 功能特点： - 范围裁剪（将值裁剪到最小/最大边界） - 范围过滤（移除越界行） - 范围标记（标记修改的值） - 每列范围配置 - 自动数值列检测 - 多种处理策略 - 详细修改报告 - 变更统计分析 - 业务规则执行 常见用途： - 传感器数据验证和清洗 - 机器学习输入准备 - 数据质量控制和验证 - 业务约束执行 - 异常值管理和控制 - 数据预处理管道
- [GraphQL转JSON](https://elysiatools.com/zh/tools/graphql-to-json): 将GraphQL查询或响应数据转换为JSON格式
- [HCL-JSON转换器](https://elysiatools.com/zh/tools/hcl-json-converter): 在HashiCorp配置语言(HCL)和JSON格式之间转换，用于Terraform配置
- [JSON键提取器](https://elysiatools.com/zh/tools/json-key-extractor): 从JSON对象中提取所有键，支持多种输出格式。非常适合分析JSON结构、生成文档和理解复杂的嵌套对象。

## 示例

- [Postman Collections - API 测试](https://elysiatools.com/zh/samples/postman-collections): 全面的 Postman collection 示例，包括 API 测试、自动化脚本、环境变量、mock 服务器和 REST API 的高级测试模式
- [Apache Arrow 示例](https://elysiatools.com/zh/samples/arrow): Apache Arrow 内存列式格式示例，用于高性能数据处理和分析
- [分布式追踪示例](https://elysiatools.com/zh/samples/distributed-tracing-samples): 使用 Jaeger、OpenTelemetry 和其他现代可观测性工具的综合分布式追踪示例，适用于微服务架构
- [AWS EventBridge 示例](https://elysiatools.com/zh/samples/eventbridge-samples): AWS EventBridge 示例，包括事件总线、规则、目标、模式注册表、自定义事件和跨账户事件路由，适用于无服务器事件驱动架构

## 相关内容

- [JSON 交换与格式翻译工具](https://elysiatools.com/zh/hubs/json-convert): 在一个专题里比较 JSON 与 CSV、YAML、TOML、GraphQL、XML、Markdown、Excel、BSON、EDN 等结构化格式之间的转换工具。
- [JSON 检查、对比与转换工具](https://elysiatools.com/zh/hubs/json-utility): 把 JSON 格式化、差异对比、路径检查、Schema 校验、合并、转换和导出工具集中到一个专题中，适合 API 与数据处理流程。
- [JSON Schema、Mock 数据与 API 夹具生成工具](https://elysiatools.com/zh/hubs/json-generate): 围绕JSON Schema 生成、Mock 负载构建与 API 夹具准备整理的一组工具。
- [JSON 格式化、对比与规范化工具](https://elysiatools.com/zh/hubs/json-format): 在一个专题中比较 JSON 格式化、差异对比、日志审查、配置比较和数据规范化工具，适合需要让 JSON 更易读、更易审查的流程。