fix(relay): Fix interop with server actions of next.js (#306)

See vercel/next.js#65763

packages/relay/transform/src/lib.rs

@@ -10,7 +10,7 @@ use serde::Deserialize;
 use swc_atoms::JsWord;
 use swc_common::{FileName, Mark, DUMMY_SP};
 use swc_ecma_ast::*;
-use swc_ecma_utils::{quote_ident, ExprFactory};
+use swc_ecma_utils::{prepend_stmts, quote_ident, ExprFactory};
 use swc_ecma_visit::{Fold, FoldWith};
 
 #[derive(Copy, Clone, Debug, Deserialize)]
@@ -165,16 +165,17 @@ impl<'a> Fold for Relay<'a> {
     }
 
     fn fold_module_items(&mut self, items: Vec<ModuleItem>) -> Vec<ModuleItem> {
-        let items = items
+        let mut items = items
             .into_iter()
             .map(|item| item.fold_children_with(self))
             .collect::<Vec<_>>();
 
-        self.imports
-            .iter()
-            .map(|import| import.as_module_item())
-            .chain(items)
-            .collect()
+        prepend_stmts(
+            &mut items,
+            self.imports.iter().map(|import| import.as_module_item()),
+        );
+
+        items
     }
 }
 

packages/relay/transform/tests/fixture/eager-es-modules/next-15763/1/input.js

@@ -0,0 +1,43 @@
+import { graphql } from "relay-runtime";
+import { revalidatePath } from "next/cache";
+
+export async function setValue(string) {
+    "use server";
+
+    // comment out the next two statements to successfully compile
+    const taggedNode = graphql`
+    mutation actionsSetThingMutation($value: String!) {
+      setRocket(value: $value) {
+        name
+      }
+    }
+  `
+    console.log({ taggedNode })
+
+    const response = await fetch("http://localhost:3000/graphql", {
+        body: JSON.stringify({
+            // replace this query with the taggedNode value
+            query: `
+        mutation actionsSetThingMutation($value: String!) {
+          setThing(value: $value) {
+            name
+          }
+        }
+      `,
+            variables: {
+                value: string,
+            },
+        }),
+        headers: {
+            "Content-Type": "application/json",
+        },
+        method: "POST",
+    });
+
+    const data = await response.json();
+
+    // the ui should flush this value when revalidated
+    console.log(data);
+
+    revalidatePath("/", 'page');
+};

packages/relay/transform/tests/fixture/eager-es-modules/next-15763/1/output.js

@@ -0,0 +1,35 @@
+import __actionsSetThingMutation from "./__generated__/actionsSetThingMutation.graphql.ts";
+import { graphql } from "relay-runtime";
+import { revalidatePath } from "next/cache";
+export async function setValue(string) {
+    "use server";
+    // comment out the next two statements to successfully compile
+    const taggedNode = __actionsSetThingMutation;
+    console.log({
+        taggedNode
+    });
+    const response = await fetch("http://localhost:3000/graphql", {
+        body: JSON.stringify({
+            // replace this query with the taggedNode value
+            query: `
+        mutation actionsSetThingMutation($value: String!) {
+          setThing(value: $value) {
+            name
+          }
+        }
+      `,
+            variables: {
+                value: string
+            }
+        }),
+        headers: {
+            "Content-Type": "application/json"
+        },
+        method: "POST"
+    });
+    const data = await response.json();
+    // the ui should flush this value when revalidated
+    console.log(data);
+    revalidatePath("/", 'page');
+}
+;

packages/relay/transform/tests/fixture/eager-es-modules/next-15763/2/input.js

@@ -0,0 +1,43 @@
+"use server";
+
+import { graphql } from "relay-runtime";
+import { revalidatePath } from "next/cache";
+
+export async function setValue(string) {
+  // comment out the next two statements to successfully compile
+  const taggedNode = graphql`
+    mutation actionsSetThingMutation($value: String!) {
+      setRocket(value: $value) {
+        name
+      }
+    }
+  `
+  console.log({ taggedNode })
+
+  const response = await fetch("http://localhost:3000/graphql", {
+    body: JSON.stringify({
+      // replace this query with the taggedNode value
+      query: `
+        mutation actionsSetThingMutation($value: String!) {
+          setThing(value: $value) {
+            name
+          }
+        }
+      `,
+      variables: {
+        value: string,
+      },
+    }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+    method: "POST",
+  });
+
+  const data = await response.json();
+
+  // the ui should flush this value when revalidated
+  console.log(data);
+
+  revalidatePath("/", 'page');
+};

packages/relay/transform/tests/fixture/eager-es-modules/next-15763/2/output.js

@@ -0,0 +1,35 @@
+"use server";
+import __actionsSetThingMutation from "./__generated__/actionsSetThingMutation.graphql.ts";
+import { graphql } from "relay-runtime";
+import { revalidatePath } from "next/cache";
+export async function setValue(string) {
+    // comment out the next two statements to successfully compile
+    const taggedNode = __actionsSetThingMutation;
+    console.log({
+        taggedNode
+    });
+    const response = await fetch("http://localhost:3000/graphql", {
+        body: JSON.stringify({
+            // replace this query with the taggedNode value
+            query: `
+        mutation actionsSetThingMutation($value: String!) {
+          setThing(value: $value) {
+            name
+          }
+        }
+      `,
+            variables: {
+                value: string
+            }
+        }),
+        headers: {
+            "Content-Type": "application/json"
+        },
+        method: "POST"
+    });
+    const data = await response.json();
+    // the ui should flush this value when revalidated
+    console.log(data);
+    revalidatePath("/", 'page');
+}
+;