Pretty format variable definitions for both operations and fragments.

src/language/__tests__/printer-test.js

@@ -60,7 +60,9 @@ describe('Printer: Query document', () => {
       'query ($foo: TestType) @testDirective { id, name }',
     );
     expect(print(queryAstWithArtifacts)).to.equal(dedent`
-      query ($foo: TestType) @testDirective {
+      query (
+        $foo: TestType
+      ) @testDirective {
         id
         name
       }
@@ -70,7 +72,9 @@ describe('Printer: Query document', () => {
       'mutation ($foo: TestType) @testDirective { id, name }',
     );
     expect(print(mutationAstWithArtifacts)).to.equal(dedent`
-      mutation ($foo: TestType) @testDirective {
+      mutation (
+        $foo: TestType
+      ) @testDirective {
         id
         name
       }
@@ -82,7 +86,9 @@ describe('Printer: Query document', () => {
       'query ($foo: TestType = {a: 123} @testDirective(if: true) @test) { id }',
     );
     expect(print(queryAstWithVariableDirective)).to.equal(dedent`
-      query ($foo: TestType = {a: 123} @testDirective(if: true) @test) {
+      query (
+        $foo: TestType = {a: 123} @testDirective(if: true) @test
+      ) {
         id
       }
     `);
@@ -96,7 +102,9 @@ describe('Printer: Query document', () => {
       },
     );
     expect(print(queryAstWithVariableDirective)).to.equal(dedent`
-      fragment Foo($foo: TestType @test) on TestType @testDirective {
+      fragment Foo(
+        $foo: TestType @test
+      ) on TestType @testDirective {
         id
       }
     `);
@@ -161,7 +169,10 @@ describe('Printer: Query document', () => {
       { 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
       }
     `);
@@ -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 {
@@ -203,7 +217,9 @@ describe('Printer: Query document', () => {
         }
       }
 
-      subscription StoryLikeSubscription($input: StoryLikeSubscribeInput) @onSubscription {
+      subscription StoryLikeSubscription(
+        $input: StoryLikeSubscribeInput
+      ) @onSubscription {
         storyLikeSubscribe(input: $input) {
           story {
             likers {

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,13 @@ function printBlockString(value, isDescription) {
     ? `"""\n${isDescription ? escaped : indent(escaped)}\n"""`
     : `"""${escaped.replace(/"$/, '"\n')}"""`;
 }
+
+/**
+ * Prints variables one per line.
+ */
+function printVariableDefinitions(args) {
+  if (!args || args.length === 0) {
+    return '';
+  }
+  return '(\n' + indent(join(args, '\n')) + '\n)';
+}