What is the "Merge" Button in GraphiQL?

Question

What is the purpose of the Merge button in GraphiQL UI. It seems to be doing the same thing as the Prettify button.

Please provide an example

Answer 1

The Merge button is used for flattening a query with defined fragments. It is different from Prettify which retains the original query but just indents it.

Using the GraphiQL netify demo schema, the following query is "Prettified"

query {
  test {
    person {
      name
      age
      ...friendNames
    }
  }
}

fragment friendNames on Person {
  friends {
    name
  }
}

When clicking the Merge button the result is as follows:

{
  test {
    person {
      name
      age
      friends {
        name
      }
    }
  }
}

To see a live demo of the above, you can follow this link