diff --git a/changelog_unreleased/graphql/pr-7721.md b/changelog_unreleased/graphql/pr-7721.md new file mode 100644 index 000000000..0372dbb93 --- /dev/null +++ b/changelog_unreleased/graphql/pr-7721.md @@ -0,0 +1,23 @@ +#### Improve wrapping of GraphQL fragment directives ([#7721](https://github.com/prettier/prettier/pull/7721) by [@sasurau4](https://github.com/sasurau4)) + + +```graphql +# Input +fragment TodoList_list on TodoList @argumentDefinitions( + count: {type: "Int", defaultValue: 10}, +) { + title +} + +# Prettier stable +fragment TodoList_list on TodoList + @argumentDefinitions(count: { type: "Int", defaultValue: 10 }) { + title +} + +# Prettier master +fragment TodoList_list on TodoList +@argumentDefinitions(count: { type: "Int", defaultValue: 10 }) { + title +} +``` diff --git a/src/language-graphql/printer-graphql.js b/src/language-graphql/printer-graphql.js index 5da58a97b..537acd5e5 100644 --- a/src/language-graphql/printer-graphql.js +++ b/src/language-graphql/printer-graphql.js @@ -616,20 +616,7 @@ function printDirectives(path, print, n) { return ""; } - return concat([ - " ", - group( - indent( - concat([ - softline, - join( - concat([ifBreak("", " "), softline]), - path.map(print, "directives") - ), - ]) - ) - ), - ]); + return group(concat([line, join(line, path.map(print, "directives"))])); } function printSequence(sequencePath, options, print) { diff --git a/tests/graphql_bracket_spacing/__snapshots__/jsfmt.spec.js.snap b/tests/graphql_bracket_spacing/__snapshots__/jsfmt.spec.js.snap index e4d91a93d..196d3ed48 100644 --- a/tests/graphql_bracket_spacing/__snapshots__/jsfmt.spec.js.snap +++ b/tests/graphql_bracket_spacing/__snapshots__/jsfmt.spec.js.snap @@ -16,7 +16,7 @@ fragment Visit on HighlightedVisit =====================================output===================================== fragment Visit on HighlightedVisit - @argumentDefinitions(count: {type: "Int", defaultValue: 20}) { +@argumentDefinitions(count: {type: "Int", defaultValue: 20}) { name } @@ -38,7 +38,7 @@ fragment Visit on HighlightedVisit =====================================output===================================== fragment Visit on HighlightedVisit - @argumentDefinitions(count: { type: "Int", defaultValue: 20 }) { +@argumentDefinitions(count: { type: "Int", defaultValue: 20 }) { name } diff --git a/tests/graphql_directives/__snapshots__/jsfmt.spec.js.snap b/tests/graphql_directives/__snapshots__/jsfmt.spec.js.snap index 119499302..c943173bf 100644 --- a/tests/graphql_directives/__snapshots__/jsfmt.spec.js.snap +++ b/tests/graphql_directives/__snapshots__/jsfmt.spec.js.snap @@ -32,7 +32,7 @@ query MyQuery @directive(arg: 5) { field @skip(if: true) @nope otherField ...fragmentSpread - @include(if: ["this isn't even a boolean", "wow, that's really odd"]) + @include(if: ["this isn't even a boolean", "wow, that's really odd"]) } fragment YouCanHaveDirectivesHereToo on SomeType @yesReally(what: "yes") { @@ -45,10 +45,10 @@ fragment YouCanHaveDirectivesHereToo on SomeType @yesReally(what: "yes") { } thisFieldHasALotOfDirectives - @thisIsthefirst - @thisIsTheSecond - @thisIsTheThird - @thisIstheFourthWillBeTooLongForSure(and: "it has arguments as well") + @thisIsthefirst + @thisIsTheSecond + @thisIsTheThird + @thisIstheFourthWillBeTooLongForSure(and: "it has arguments as well") } query QueryWVars($x: String) @directive { diff --git a/tests/graphql_newline/__snapshots__/jsfmt.spec.js.snap b/tests/graphql_newline/__snapshots__/jsfmt.spec.js.snap index fc563c0b2..7af04e274 100644 --- a/tests/graphql_newline/__snapshots__/jsfmt.spec.js.snap +++ b/tests/graphql_newline/__snapshots__/jsfmt.spec.js.snap @@ -56,23 +56,23 @@ query MyQuery @directive( =====================================output===================================== query MyQuery - @directive( - arg: 5 +@directive( + arg: 5 + + # comment + arg2: 10 +) { + field + @skip( + if: true # comment - arg2: 10 - ) { - field - @skip( - if: true - - # comment - cursor: 10 - ) - @nope + cursor: 10 + ) + @nope otherField ...fragmentSpread - @include(if: ["this isn't even a boolean", "wow, that's really odd"]) + @include(if: ["this isn't even a boolean", "wow, that's really odd"]) } ================================================================================ diff --git a/tests/graphql_trailing_comma/__snapshots__/jsfmt.spec.js.snap b/tests/graphql_trailing_comma/__snapshots__/jsfmt.spec.js.snap index 213a2e2c2..ccfbde146 100644 --- a/tests/graphql_trailing_comma/__snapshots__/jsfmt.spec.js.snap +++ b/tests/graphql_trailing_comma/__snapshots__/jsfmt.spec.js.snap @@ -35,16 +35,16 @@ query Query( $PROJECT_UNIT_PROFILE_PICTURE_SIZE: Int $PROJECT_UNIT_CARD_SIZE: Int ) - @argumentDefinitions( - count: { - type: "Int" - defaultValue: 20 - someSuperSuperSuperSuperLongType: 301 - } - test: [ - { type: "Int", defaultValue: 20, someSuperSuperSuperSuperLongType: 301 } - ] - ) { +@argumentDefinitions( + count: { + type: "Int" + defaultValue: 20 + someSuperSuperSuperSuperLongType: 301 + } + test: [ + { type: "Int", defaultValue: 20, someSuperSuperSuperSuperLongType: 301 } + ] +) { cover_photo { image( width: $PROJECT_UNIT_CARD_SIZE @@ -95,16 +95,16 @@ query Query( $PROJECT_UNIT_PROFILE_PICTURE_SIZE: Int $PROJECT_UNIT_CARD_SIZE: Int ) - @argumentDefinitions( - count: { - type: "Int" - defaultValue: 20 - someSuperSuperSuperSuperLongType: 301 - } - test: [ - { type: "Int", defaultValue: 20, someSuperSuperSuperSuperLongType: 301 } - ] - ) { +@argumentDefinitions( + count: { + type: "Int" + defaultValue: 20 + someSuperSuperSuperSuperLongType: 301 + } + test: [ + { type: "Int", defaultValue: 20, someSuperSuperSuperSuperLongType: 301 } + ] +) { cover_photo { image( width: $PROJECT_UNIT_CARD_SIZE @@ -154,16 +154,16 @@ query Query( $PROJECT_UNIT_PROFILE_PICTURE_SIZE: Int $PROJECT_UNIT_CARD_SIZE: Int ) - @argumentDefinitions( - count: { - type: "Int" - defaultValue: 20 - someSuperSuperSuperSuperLongType: 301 - } - test: [ - { type: "Int", defaultValue: 20, someSuperSuperSuperSuperLongType: 301 } - ] - ) { +@argumentDefinitions( + count: { + type: "Int" + defaultValue: 20 + someSuperSuperSuperSuperLongType: 301 + } + test: [ + { type: "Int", defaultValue: 20, someSuperSuperSuperSuperLongType: 301 } + ] +) { cover_photo { image( width: $PROJECT_UNIT_CARD_SIZE