graphqlgraphiql

What is the "Merge" Button in GraphiQL?


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


Solution

  • 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