GraphiQL UI中Merge按钮的用途是什么？和Prettify按钮有何区别？能否提供示例？

Merge 按钮的设计初衷 #

Merge按钮的核心设计目标是零散代码片段整合，针对用户在编辑区零散编写、多渠道粘贴的多段独立GraphQL操作片段，自动完成以下动作：

• 识别零散的代码块，将其对齐为符合GraphQL语法规范的完整文档结构
• 自动合并重复的fragment定义、重复的变量声明，消除结构层面的冗余
• 自动处理不同片段间的操作名冲突，生成可直接执行的完整查询文档

当编辑区不存在需要整合的零散冗余片段时，Merge按钮仅会做常规的排版对齐，这也是很多用户感知不到它和Prettify差异的核心原因。

Prettify 按钮的核心定位 #

Prettify按钮的功能完全围绕排版格式化设计，全程不会对现有代码的逻辑结构做任何调整，仅会按照GraphQL的语法缩进规则，将压缩为单行、缺少换行的代码调整为易读的缩进格式，所有代码的操作拆分、片段数量、变量定义都会和调整前完全一致。

核心功能差异 #

• 结构处理逻辑不同：Merge会主动对代码的逻辑结构做合规性整合、冗余清除；Prettify不修改任何代码逻辑，仅调整视觉排版
• 适用场景不同：Merge适用于多段零散查询拼接后，需要快速整合为可执行文档的场景；Prettify适用于结构完整的压缩代码，需要快速调整为易读格式的场景

效果对比示例 #

假设你在编辑区粘贴了两段独立的零散查询片段，代码如下：

query GetUser { user(id: 1) { name } }
query GetOrder { order(id: 2) { total } }

点击 Prettify 的输出效果 #

仅对两段代码分别做缩进排版，不做任何结构调整：

query GetUser {
  user(id: 1) {
    name
  }
}

query GetOrder {
  order(id: 2) {
    total
  }
}

点击 Merge 的输出效果 #

在完成排版的基础上，自动整合结构、消除冗余——比如如果两段代码中存在重复定义的同名fragment、重复声明的变量，Merge会自动合并去重，将零散的片段统一纳入符合GraphQL规范的文档结构，确保可以直接选中对应操作发起执行。

内容的提问来源于stack exchange，提问作者Andreas Vogler