Elysia Tools
导航
Development
浏览器内的 GraphQL 客户端：编写查询与变量，发送到任意 GraphQL 端点，查看格式化的 JSON 结果或错误数组——开发阶段快速迭代 Schema 的理想工具
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
GraphQL Playground 是一款便捷的浏览器端 GraphQL 客户端工具。您只需输入 GraphQL 服务的端点地址，编写查询语句（Query）或变更操作（Mutation），并配置所需的变量与请求头，即可直接向服务器发送请求并实时查看格式化后的 JSON 响应结果或错误信息，是开发和调试 GraphQL API 的理想助手。
背景
正在开发一个需要展示全球国家和地区信息的 Web 应用，需要使用公开的 Countries GraphQL API 获取各大洲的编码和名称。
问题
需要确认 API 端点是否可用，并获取正确的 JSON 返回结构以编写前端 TypeScript 类型定义。
如何使用
在“GraphQL 端点”中输入 https://countries.trevorblades.com/，在“查询”中输入获取大洲信息的 query，然后点击发送。
endpoint: "https://countries.trevorblades.com/"
query: "query { continents { code name } }"结果
成功获取并预览了包含所有大洲编码和名称的格式化 JSON 数据，便于直接复制用于前端开发。
背景
刚完成了一个需要身份验证的用户详情查询接口，需要在本地环境中进行集成测试。
问题
需要在请求中携带 JWT Token，并传入动态的用户 ID 变量来测试接口的权限控制和数据返回。
如何使用
在“GraphQL 端点”输入本地服务地址，在“请求头”中添加 Authorization，在“变量”中输入 JSON 格式的用户 ID，编写查询并发送。
endpoint: "http://localhost:4000/graphql"
query: "query GetUser($id: ID!) { user(id: $id) { name email } }"
variables: "{\n \"id\": \"user_999\"\n}"
headers: "Authorization: Bearer eyJhbGci..."结果
成功通过身份验证，并获取到了指定 ID 用户的姓名和邮箱数据。
支持。您可以在查询区域编写任何标准的 GraphQL Query 或 Mutation 操作。
您可以在“请求头”输入框中以键值对形式（例如 Authorization: Bearer your-token）填写您的认证信息。
这通常是因为目标 GraphQL 服务器未允许来自本站域名的跨域请求。您需要确保目标服务器配置了允许的 CORS 策略。
变量必须使用标准的 JSON 格式编写，例如 {"id": "123", "limit": 10}。
所有的请求均在您的浏览器端直接发起，我们不会在服务器端存储您的查询内容、变量或敏感的请求头信息。