Teach prettier/graphql about formatting fragment variables. (#6016)

Fragment variables are an experimental extension to GraphQL schema.
Formatting should follow the same rules as formatting an OperationDefinition node,
hence code is the same.

CHANGELOG.unreleased.md

@@ -239,6 +239,21 @@ Examples:
   <div *ngIf="isRendered | async"></div>
   ```
 
+- GraphQL: Support GraphQL fragment variables ([#6016] by [@adek05])
+
+  ```
+  // Input
+  fragment F($var: Int) on Type { node }
+
+  // Output (Prettier stable)
+  // Fails to parse
+
+  // Output (Prettier master)
+  fragment F($var: Int) on Type {
+     node
+  }
+  ```
+
 - TypeScript: Support `readonly` operator ([#6027] by [@ikatyang])
 
   <!-- prettier-ignore -->

src/language-graphql/parser-graphql.js

@@ -36,10 +36,15 @@ function removeTokens(node) {
 }
 
 function fallbackParser(parse, source) {
+  const parserOptions = {
+    allowLegacySDLImplementsInterfaces: false,
+    experimentalFragmentVariables: true
+  };
   try {
-    return parse(source, { allowLegacySDLImplementsInterfaces: false });
+    return parse(source, parserOptions);
   } catch (_) {
-    return parse(source, { allowLegacySDLImplementsInterfaces: true });
+    parserOptions.allowLegacySDLImplementsInterfaces = true;
+    return parse(source, parserOptions);
   }
 }
 

src/language-graphql/printer-graphql.js

@@ -73,6 +73,24 @@ function genericPrint(path, options, print) {
       return concat([
         "fragment ",
         path.call(print, "name"),
+        n.variableDefinitions && n.variableDefinitions.length
+          ? group(
+              concat([
+                "(",
+                indent(
+                  concat([
+                    softline,
+                    join(
+                      concat([ifBreak("", ", "), softline]),
+                      path.map(print, "variableDefinitions")
+                    )
+                  ])
+                ),
+                softline,
+                ")"
+              ])
+            )
+          : "",
         " on ",
         path.call(print, "typeCondition"),
         printDirectives(path, print, n),

tests/graphql_fragment_variables/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`fragment_variables.graphql 1`] = `
+====================================options=====================================
+parsers: ["graphql"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+fragment F($var: Int) on Type {
+  field
+}
+
+fragment G($first_variable: Int,   $second_variable: String =  "Very complex default argument value") on Type {
+  field
+}
+=====================================output=====================================
+fragment F($var: Int) on Type {
+  field
+}
+
+fragment G(
+  $first_variable: Int
+  $second_variable: String = "Very complex default argument value"
+) on Type {
+  field
+}
+
+================================================================================
+`;

tests/graphql_fragment_variables/fragment_variables.graphql

@@ -0,0 +1,7 @@
+fragment F($var: Int) on Type {
+  field
+}
+
+fragment G($first_variable: Int,   $second_variable: String =  "Very complex default argument value") on Type {
+  field
+}

tests/graphql_fragment_variables/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["graphql"]);

tests_integration/__tests__/__snapshots__/format.js.snap

@@ -4,8 +4,6 @@ exports[`html parser should handle CRLF correctly 1`] = `"\\"<!--\\\\r\\\\n  tes
 
 exports[`markdown parser should handle CRLF correctly 1`] = `"\\"\`\`\`\\\\r\\\\n\\\\r\\\\n\\\\r\\\\n\`\`\`\\\\r\\\\n\\""`;
 
-exports[`should work with foo plugin instance 1`] = `"\\"tabWidth:8\\""`;
-
 exports[`typescript parser should throw the first error when both JSX and non-JSX mode failed 1`] = `
 "Expression expected. (9:7)
    7 | );