Pretty format variable definitions for both operations and fragments.

When there is more than a couple argument values, pretty formatting
isn't doing a good job.

Instead I would like to take the following approach:

When there is one argument, print as is, meaning:

  query Q ($arg: Type = Default) {

When there is more than one do the following:

  query Q (
    $arg1: Type = Default,
    $arg2
  ) {

An alternative would be to have closing bracket be in the same line
as final argument. I am fine with either, as changes which introduce
another argument on last position always touch two lines - traiiling
comma will have to be added.

Author: Adrian Zgorzalek

src/language/__tests__/printer-test.js

@@ -157,11 +157,22 @@ describe('Printer: Query document', () => {
         fragment Foo($a: ComplexType, $b: Boolean = false) on TestType {
           id
         }
+
+        fragment Simple($a: Boolean = true) on TestType {
+          id
+        }
       `,
       { experimentalFragmentVariables: true },
     );
     expect(print(fragmentWithVariable)).to.equal(dedent`
-      fragment Foo($a: ComplexType, $b: Boolean = false) on TestType {
+      fragment Foo(
+        $a: ComplexType,
+        $b: Boolean = false
+      ) on TestType {
+        id
+      }
+
+      fragment Simple($a: Boolean = true) on TestType {
         id
       }
     `);
@@ -174,7 +185,10 @@ describe('Printer: Query document', () => {
 
     expect(printed).to.equal(
       dedent(String.raw`
-      query queryName($foo: ComplexType, $site: Site = MOBILE) @onQuery {
+      query queryName(
+        $foo: ComplexType,
+        $site: Site = MOBILE
+      ) @onQuery {
         whoever123is: node(id: [123, 456]) {
           id
           ... on User @onInlineFragment {

src/language/printer.js

@@ -28,7 +28,7 @@ const printDocASTReducer = {
   OperationDefinition(node) {
     const op = node.operation;
     const name = node.name;
-    const varDefs = wrap('(', join(node.variableDefinitions, ', '), ')');
+    const varDefs = printVariableDefinitions(node.variableDefinitions);
     const directives = join(node.directives, ' ');
     const selectionSet = node.selectionSet;
     // Anonymous queries with no directives or variable definitions can use
@@ -78,7 +78,7 @@ const printDocASTReducer = {
   }) =>
     // Note: fragment variable definitions are experimental and may be changed
     // or removed in the future.
-    `fragment ${name}${wrap('(', join(variableDefinitions, ', '), ')')} ` +
+    `fragment ${name}${printVariableDefinitions(variableDefinitions)} ` +
     `on ${typeCondition} ${wrap('', join(directives, ' '), ' ')}` +
     selectionSet,
 
@@ -283,3 +283,17 @@ function printBlockString(value, isDescription) {
     ? `"""\n${isDescription ? escaped : indent(escaped)}\n"""`
     : `"""${escaped.replace(/"$/, '"\n')}"""`;
 }
+
+/**
+ * Prints variables one per line with a trailing comma, when there is more
+ * than one argument. Otherwise print inline.
+ */
+function printVariableDefinitions(args) {
+  if (!args || args.length === 0) {
+    return '';
+  }
+  if (args.length === 1) {
+    return '(' + args[0] + ')';
+  }
+  return '(\n' + indent(join(args, ',\n')) + '\n)';
+}