Make print() break long List and Object Values over multiple line (graphql#3860)

Co-authored-by: Ivan Goncharov <[email protected]>

Author: dylanowen

src/language/__tests__/printer-test.ts

@@ -110,6 +110,64 @@ describe('Printer: Query document', () => {
     `);
   });
 
+  it('puts large object values on multiple lines if line is long (> 80 chars)', () => {
+    const printed = print(
+      parse(
+        '{trip(obj:{wheelchair:false,smallObj:{a: 1},largeObj:{wheelchair:false,smallObj:{a: 1},arriveBy:false,includePlannedCancellations:true,transitDistanceReluctance:2000,anotherLongFieldName:"Lots and lots and lots and lots of text"},arriveBy:false,includePlannedCancellations:true,transitDistanceReluctance:2000,anotherLongFieldName:"Lots and lots and lots and lots of text"}){dateTime}}',
+      ),
+    );
+
+    expect(printed).to.equal(dedent`
+      {
+        trip(
+          obj: {
+            wheelchair: false
+            smallObj: { a: 1 }
+            largeObj: {
+              wheelchair: false
+              smallObj: { a: 1 }
+              arriveBy: false
+              includePlannedCancellations: true
+              transitDistanceReluctance: 2000
+              anotherLongFieldName: "Lots and lots and lots and lots of text"
+            }
+            arriveBy: false
+            includePlannedCancellations: true
+            transitDistanceReluctance: 2000
+            anotherLongFieldName: "Lots and lots and lots and lots of text"
+          }
+        ) {
+          dateTime
+        }
+      }
+    `);
+  });
+
+  it('puts large list values on multiple lines if line is long (> 80 chars)', () => {
+    const printed = print(
+      parse(
+        '{trip(list:[["small array", "small", "small"], ["Lots and lots and lots and lots of text", "Lots and lots and lots and lots of text", "Lots and lots and lots and lots of text"]]){dateTime}}',
+      ),
+    );
+
+    expect(printed).to.equal(dedent`
+      {
+        trip(
+          list: [
+            ["small array", "small", "small"]
+            [
+              "Lots and lots and lots and lots of text"
+              "Lots and lots and lots and lots of text"
+              "Lots and lots and lots and lots of text"
+            ]
+          ]
+        ) {
+          dateTime
+        }
+      }
+    `);
+  });
+
   it('Legacy: prints fragment with variable directives', () => {
     const queryASTWithVariableDirective = parse(
       'fragment Foo($foo: TestType @test) on TestType @testDirective { id }',

src/language/printer.ts

@@ -148,8 +148,22 @@ const printDocASTReducer: ASTReducer<string> = {
   BooleanValue: { leave: ({ value }) => (value ? 'true' : 'false') },
   NullValue: { leave: () => 'null' },
   EnumValue: { leave: ({ value }) => value },
-  ListValue: { leave: ({ values }) => '[' + join(values, ', ') + ']' },
-  ObjectValue: { leave: ({ fields }) => '{ ' + join(fields, ', ') + ' }' },
+  ListValue: {
+    leave: ({ values }) => {
+      const valuesLine = '[' + join(values, ', ') + ']';
+
+      if (valuesLine.length > MAX_LINE_LENGTH) {
+        return '[\n' + indent(join(values, '\n')) + '\n]';
+      }
+      return valuesLine;
+    },
+  },
+  ObjectValue: {
+    leave: ({ fields }) => {
+      const fieldsLine = '{ ' + join(fields, ', ') + ' }';
+      return fieldsLine.length > MAX_LINE_LENGTH ? block(fields) : fieldsLine;
+    },
+  },
   ObjectField: { leave: ({ name, value }) => name + ': ' + value },
 
   // Directive