GraphQL查询变量填充预览器

粘贴含$variable声明的GraphQL query/mutation，自动识别变量列表生成填写表单，拼装为完整JSON请求体预览可复制。

免费在线工具

Loading…

使用说明

在上方文本框中粘贴包含 $variable: Type 声明的 GraphQL query 或 mutation，点击「解析变量」，工具会自动提取所有变量名和类型信息，并在下方生成对应的填写表单。

支持识别的类型系统包括普通标量 ($id: ID!)、列表类型 ($filter: [String!]!)、以及非空修饰符 (!)。每个变量会标注为「必填」或「可选」，列表类型变量会有额外「列表」标记。

变量输入框会依据类型自动填充默认值（Int/Float 填 0，Boolean 填 true，ID 填 "id"，String 填 ""），可直接修改。填好后点击「生成请求体」，得到标准格式的 {"query": "...", "variables": {...}} JSON 请求体。

值若为可解析的 JSON 格式（如数字、布尔值、null），会自动转换为对应的 JSON 类型；若无法解析则保留为字符串。

点击「加载示例」可快速载入一段典型 GraphQL 查询快速体验功能。

本工具聚焦 GraphQL 客户端开发中的一个高频痛点：手写 variables 对象容易缺漏出错，类型不匹配还会被服务端拒绝。工具自动解析查询中的变量声明，生成表单并拼装完整请求体，减少手动拼写的低级错误。

支持 $id: ID!、$name: String、$filter: [String!]! 等常见变量声明格式，自动识别必填(!)和列表([])修饰符并给出视觉标记，帮助开发者一眼看出哪些变量需要填写。

值自动类型推断：输入 42 解析为数字、true 为布尔值、null 或空为 null、其余保留字符串，避免手动加引号的繁琐。

GraphQL API 调试

在后端未提供 GraphiQL 或 Playground 的情况下，快速拼装请求体通过 curl 或 Postman 发送测试请求。

团队成员交接查询模板

把写好的 query 粘贴给同事，对方只需在表单填变量值就能得到可执行的请求 JSON，减少沟通成本。

支持哪些 GraphQL 变量类型？

工具能识别所有以 $变量名: 类型格式声明的标量类型 (String/Int/Float/Boolean/ID)，包括带 ! (非空) 和 [] (列表) 修饰符的类型。自定义输入对象类型也会被提取，但填写的值需要手动输入 JSON 格式。

变量值会被自动转换为 JSON 类型吗？

会的。填写的内容会尝试用 JSON.parse 解析：数字自动转为整数或浮点数，true/false 转为布尔值，null 或空字符串转为 null。无法解析为 JSON 的内容保留原字符串。

为什么有些变量标注「必填」，有些是「可选」？

工具根据变量声明末尾是否有 ! 符号判断：$id: ID! 为必填，$name: String 为可选。这只是显示提示，不会阻止你提交空值。

query 里有重复的 $变量名会怎样？

工具会自动去重，同一个变量名只出现一次填写框。这在 GraphQL 中本身就是规范要求的——同一个操作中变量名必须唯一。