Enable prettier for some blocklisted fixtures with invalid GraphQL (#30425)

The invalid GraphQL in these fixtures somehow causes an unhandled
promise rejection error when running `yarn prettier-all`. This fixes
that issue by making the GraphQL valid.

.prettierignore

@@ -22,15 +22,6 @@ compiler/**/.next
 
 # contains invalid graphql`...` which results in a promise rejection error from `yarn prettier-all`.
 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-kitchensink.js
-compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-and-local-variables-with-default.js
-compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.js
-compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-kitchensink.js
-compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-inside-logical-expression.js
-compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-logical.js
-compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/readonly-object-method-calls-mutable-lambda.js
-compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/readonly-object-method-calls.js
-compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/tagged-template-in-hook.js
-compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/tagged-template-literal.js
 
 compiler/crates
 compiler/apps/playground/public

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-and-local-variables-with-default.expect.md

@@ -13,7 +13,14 @@ function useFragment(_arg1, _arg2) {
 }
 
 function Component(props) {
-  const post = useFragment(graphql`...`, props.post);
+  const post = useFragment(
+    graphql`
+      fragment F on T {
+        id
+      }
+    `,
+    props.post
+  );
   const allUrls = [];
   // `media` and `urls` are exported from the scope that will wrap this code,
   // but `comments` is not (it doesn't need to be memoized, bc the callback
@@ -59,7 +66,11 @@ function Component(props) {
   const $ = _c(9);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = graphql`...`;
+    t0 = graphql`
+      fragment F on T {
+        id
+      }
+    `;
     $[0] = t0;
   } else {
     t0 = $[0];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-and-local-variables-with-default.js

@@ -9,7 +9,14 @@ function useFragment(_arg1, _arg2) {
 }
 
 function Component(props) {
-  const post = useFragment(graphql`...`, props.post);
+  const post = useFragment(
+    graphql`
+      fragment F on T {
+        id
+      }
+    `,
+    props.post
+  );
   const allUrls = [];
   // `media` and `urls` are exported from the scope that will wrap this code,
   // but `comments` is not (it doesn't need to be memoized, bc the callback

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.expect.md

@@ -3,7 +3,14 @@
 
 ```javascript
 function Component(props) {
-  const post = useFragment(graphql`...`, props.post);
+  const post = useFragment(
+    graphql`
+      fragment F on T {
+        id
+      }
+    `,
+    props.post
+  );
   const allUrls = [];
   // `media` and `urls` are exported from the scope that will wrap this code,
   // but `comments` is not (it doesn't need to be memoized, bc the callback
@@ -31,7 +38,14 @@ function Component(props) {
 import { c as _c } from "react/compiler-runtime";
 function Component(props) {
   const $ = _c(4);
-  const post = useFragment(graphql`...`, props.post);
+  const post = useFragment(
+    graphql`
+      fragment F on T {
+        id
+      }
+    `,
+    props.post,
+  );
   let t0;
   if ($[0] !== post) {
     const allUrls = [];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.js

@@ -1,5 +1,12 @@
 function Component(props) {
-  const post = useFragment(graphql`...`, props.post);
+  const post = useFragment(
+    graphql`
+      fragment F on T {
+        id
+      }
+    `,
+    props.post
+  );
   const allUrls = [];
   // `media` and `urls` are exported from the scope that will wrap this code,
   // but `comments` is not (it doesn't need to be memoized, bc the callback

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-inside-logical-expression.expect.md

@@ -3,7 +3,15 @@
 
 ```javascript
 function Component(props) {
-  const user = useFragment(graphql`...`, props.user) ?? {};
+  const user =
+    useFragment(
+      graphql`
+        fragment F on T {
+          id
+        }
+      `,
+      props.user
+    ) ?? {};
   return user.name;
 }
 
@@ -13,7 +21,15 @@ function Component(props) {
 
 ```javascript
 function Component(props) {
-  const user = useFragment(graphql`...`, props.user) ?? {};
+  const user =
+    useFragment(
+      graphql`
+        fragment F on T {
+          id
+        }
+      `,
+      props.user,
+    ) ?? {};
   return user.name;
 }
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-inside-logical-expression.js

@@ -1,4 +1,12 @@
 function Component(props) {
-  const user = useFragment(graphql`...`, props.user) ?? {};
+  const user =
+    useFragment(
+      graphql`
+        fragment F on T {
+          id
+        }
+      `,
+      props.user
+    ) ?? {};
   return user.name;
 }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-logical.expect.md

@@ -3,7 +3,14 @@
 
 ```javascript
 function Component(props) {
-  const item = useFragment(graphql`...`, props.item);
+  const item = useFragment(
+    graphql`
+      fragment F on T {
+        id
+      }
+    `,
+    props.item
+  );
   return item.items?.map(item => renderItem(item)) ?? [];
 }
 
@@ -15,7 +22,14 @@ function Component(props) {
 import { c as _c } from "react/compiler-runtime";
 function Component(props) {
   const $ = _c(2);
-  const item = useFragment(graphql`...`, props.item);
+  const item = useFragment(
+    graphql`
+      fragment F on T {
+        id
+      }
+    `,
+    props.item,
+  );
   let t0;
   if ($[0] !== item.items) {
     t0 = item.items?.map(_temp) ?? [];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-logical.js

@@ -1,4 +1,11 @@
 function Component(props) {
-  const item = useFragment(graphql`...`, props.item);
+  const item = useFragment(
+    graphql`
+      fragment F on T {
+        id
+      }
+    `,
+    props.item
+  );
   return item.items?.map(item => renderItem(item)) ?? [];
 }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/readonly-object-method-calls-mutable-lambda.expect.md

@@ -5,7 +5,11 @@
 function Component(props) {
   const x = makeObject();
   const user = useFragment(
-    graphql`fragment Component_user on User { ... }`,
+    graphql`
+      fragment Component_user on User {
+        name
+      }
+    `,
     props.user
   );
   const posts = user.timeline.posts.edges.nodes.map(node => {
@@ -28,7 +32,11 @@ function Component(props) {
   const $ = _c(3);
   const x = makeObject();
   const user = useFragment(
-    graphql`fragment Component_user on User { ... }`,
+    graphql`
+      fragment Component_user on User {
+        name
+      }
+    `,
     props.user,
   );
   const posts = user.timeline.posts.edges.nodes.map((node) => {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/readonly-object-method-calls-mutable-lambda.js

@@ -1,7 +1,11 @@
 function Component(props) {
   const x = makeObject();
   const user = useFragment(
-    graphql`fragment Component_user on User { ... }`,
+    graphql`
+      fragment Component_user on User {
+        name
+      }
+    `,
     props.user
   );
   const posts = user.timeline.posts.edges.nodes.map(node => {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/readonly-object-method-calls.expect.md

@@ -4,7 +4,11 @@
 ```javascript
 function Component(props) {
   const user = useFragment(
-    graphql`fragment Component_user on User { ... }`,
+    graphql`
+      fragment Component_user on User {
+        name
+      }
+    `,
     props.user
   );
   const posts = user.timeline.posts.edges.nodes.map(node => (
@@ -25,7 +29,11 @@ import { c as _c } from "react/compiler-runtime";
 function Component(props) {
   const $ = _c(5);
   const user = useFragment(
-    graphql`fragment Component_user on User { ... }`,
+    graphql`
+      fragment Component_user on User {
+        name
+      }
+    `,
     props.user,
   );
   let posts;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/readonly-object-method-calls.js

@@ -1,6 +1,10 @@
 function Component(props) {
   const user = useFragment(
-    graphql`fragment Component_user on User { ... }`,
+    graphql`
+      fragment Component_user on User {
+        name
+      }
+    `,
     props.user
   );
   const posts = user.timeline.posts.edges.nodes.map(node => (

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/tagged-template-in-hook.expect.md

@@ -3,7 +3,14 @@
 
 ```javascript
 function Component(props) {
-  const user = useFragment(graphql`fragment on User { name }`, props.user);
+  const user = useFragment(
+    graphql`
+      fragment F on User {
+        name
+      }
+    `,
+    props.user
+  );
   return user.name;
 }
 
@@ -13,7 +20,14 @@ function Component(props) {
 
 ```javascript
 function Component(props) {
-  const user = useFragment(graphql`fragment on User { name }`, props.user);
+  const user = useFragment(
+    graphql`
+      fragment F on User {
+        name
+      }
+    `,
+    props.user,
+  );
   return user.name;
 }
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/tagged-template-in-hook.js

@@ -1,4 +1,11 @@
 function Component(props) {
-  const user = useFragment(graphql`fragment on User { name }`, props.user);
+  const user = useFragment(
+    graphql`
+      fragment F on User {
+        name
+      }
+    `,
+    props.user
+  );
   return user.name;
 }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/tagged-template-literal.expect.md

@@ -4,16 +4,9 @@
 ```javascript
 function component() {
   let t = graphql`
-    fragment List_viewer on Viewer
-    @argumentDefinitions(
-      count: {
-        type: "Int"
-        defaultValue: 10
-        directives: ["@int_max_value(logged_in: 10)"]
-      }
-      cursor: { type: "ID" }
-    )
-
+    fragment F on T {
+      id
+    }
   `;
 
   return t;
@@ -30,17 +23,10 @@ function component() {
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t0 = graphql`
-    fragment List_viewer on Viewer
-    @argumentDefinitions(
-      count: {
-        type: "Int"
-        defaultValue: 10
-        directives: ["@int_max_value(logged_in: 10)"]
+      fragment F on T {
+        id
       }
-      cursor: { type: "ID" }
-    )
-
-  `;
+    `;
     $[0] = t0;
   } else {
     t0 = $[0];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/tagged-template-literal.js

@@ -1,15 +1,8 @@
 function component() {
   let t = graphql`
-    fragment List_viewer on Viewer
-    @argumentDefinitions(
-      count: {
-        type: "Int"
-        defaultValue: 10
-        directives: ["@int_max_value(logged_in: 10)"]
-      }
-      cursor: { type: "ID" }
-    )
-
+    fragment F on T {
+      id
+    }
   `;
 
   return t;