Make print() break arguments over multiple lines

[draperunner]

Hi! We are using the print function to pretty-print our queries. It works quite well, but there is one thing that I think could be improved upon, and that's the rendering of arguments.

This first image illustrates our problem. The main query takes a lot of parameters, and when formatting the query, all of these are put on the same line.

This next image illustrates the result of the changes made in this PR. All parameters are put on individual lines, and object values are also "prettified".

Questions

1. Should a parameter be kept on one line if there is only the one?

2. Should perhaps array values also be broken over multiple lines, or is the following okay?

[IvanGoncharov]

@draperunner Thanks for PR 👍
I think we need to follow prettier lead on how to format GraphQL queries.
Can you please research how prettier format arguments?

[IvanGoncharov]

Should perhaps array values also be broken over multiple lines, or is the following okay?

Let's first solve arguments and latter move to other areas in separate PRs.
The long-term plan is to mirror a prettier approach to formatting but it should be done as a series of PRs.

[draperunner]

Okay, I've tested how Prettier handles arguments. See examples below.

• Arguments are put on multiple lines if line length exceeds configured tabWidth (80 chars is default)
• Objects are prettified only if the line length exceeds configured tabWidth (80 chars is default)

So, what is your thoughts going forward with this? The existing printer in this projects has no awareness of line length, which is important to Prettier. Implementing it would be like reimplementing Prettier. Maybe the graphql part of Prettier could be a dependency of graphql-js? Or maybe one shouldn't use grahpql-js for formatting, but Prettier instead? Or, one could assume that line length is always exceeded, and always break the arguments over multiple lines.

{
  trip(numTripPatterns: 3) {
    tripPatterns {
      distance
    }
  }
}

{
  trip(numTripPatterns: 3, wheelchairAccessible: false) {
    tripPatterns {
      distance
    }
  }
}

{
  trip(
    numTripPatterns: 3
    wheelchairAccessible: false
    maxPreTransitWalkDistance: 2000
  ) {
    tripPatterns {
      distance
    }
  }
}

{
  trip(to: { place: "SOME_ID", coordinates: { latitude: 0, longitude: 0 } }) {
    tripPatterns {
      distance
    }
  }
}

{
  trip(
    to: { place: "SOME_ID", coordinates: { latitude: 0, longitude: 9 } }
    from: { place: "OTHER_ID", coordinates: { latitude: 0, longitude: 9 } }
  ) {
    tripPatterns {
      distance
    }
  }
}

{
  trip(
    to: {
      place: "SOME_ID"
      coordinates: { latitude: 0, longitude: 9 }
      description: "Lorem ipsum is a long text"
    }
    from: { place: "OTHER_ID", coordinates: { latitude: 0, longitude: 9 } }
  ) {
    tripPatterns {
      distance
    }
  }
}

[IvanGoncharov]

@draperunner Prettier is an unnecessary big dependency for projects that only work with GraphQL.
Also, the main purpose of graphql-js is to be a reference implementation for other languages and they should be able to use our implementation as a reference on how to implement pretty printing.
Another factor is that we working on adding support for Deno so we can't depend on other NPM packages.
Can't speak for the prettier team but in the long run, it would be great if prettier use graphql-js for formating.

If you want to work on this please focus this PR on arguments, and create separate PRs for object fields.
Also please locate and copy relevant test-cases from the Prettier codebase but please change them to match the style of our existing tests.
As for line width, you can create a constant equal to 80 and for now, use it only with arguments.

[draperunner]

@IvanGoncharov I have now added a couple of tests. I have added the MAX_LINE_LENGTH constant and arguments are only put on multiple lines if this length is exceeded.

I've updated the prints kitchen sink test by copying the results from running Prettier on __fixtures__/kitchen-sink.graphql, but I've removed the parts that are not relevant now: some object prettifying and other formatting that Prettier did.

Another thing I noticed is that Prettier does not use trailing commas when arguments are on multiple lines, so I have removed that to match Prettier's behavior.