catch on top level unions in fragments

Author: zth

CHANGELOG.md

@@ -1,5 +1,7 @@
 # master
 
+- Add supprot for top level `@catch` on fragments on unions.
+
 # 3.2.0
 
 - Add support for the new Relay `@catch` directive. https://github.com/zth/rescript-relay/pull/549

packages/relay

@@ -199,4 +199,53 @@ describe("Catch", () => {
       "User: user-1 - 2025-01-01, Error!, User: user-3 - 2025-01-01"
     );
   });
+
+  test("union member fragment - success user", async () => {
+    queryMock.mockQuery({
+      name: "TestCatchUnionMemberQuery",
+      data: {
+        member: {
+          __typename: "User",
+          id: "user-1",
+          createdAt: date.toISOString(),
+        },
+      },
+    });
+
+    t.render(test_catch("TestUnionMember"));
+    await t.screen.findByText("Got user id: user-1, and createdAt: 2025-01-01");
+  });
+
+  test("union member fragment - success group", async () => {
+    queryMock.mockQuery({
+      name: "TestCatchUnionMemberQuery",
+      data: {
+        member: {
+          __typename: "Group",
+          id: "group-1",
+          name: "Test Group",
+        },
+      },
+    });
+
+    t.render(test_catch("TestUnionMember"));
+    await t.screen.findByText("Got group id: group-1, and name: Test Group");
+  });
+
+  test("union member fragment - fail", async () => {
+    queryMock.mockQuery({
+      name: "TestCatchUnionMemberQuery",
+      data: {
+        member: {
+          __typename: "User",
+          id: "user-1",
+          createdAt: null,
+        },
+      },
+      graphqlErrors: [{ path: ["member", "createdAt"] }],
+    });
+
+    t.render(test_catch("TestUnionMember"));
+    await t.screen.findByText("Error from union fragment!");
+  });
 });

packages/rescript-relay/__tests__/Test_catch-tests.js

@@ -173,6 +173,53 @@ module TestMembers = {
   }
 }
 
+module UnionMemberFragment = %relay(`
+  fragment TestCatchUnionMember_member on Member @catch {
+    ... on User {
+      id
+      createdAt
+    }
+    ... on Group {
+      id
+      name
+    }
+  }
+`)
+
+module QueryUnionMember = %relay(`
+  query TestCatchUnionMemberQuery {
+    member(id: "123") {
+      ...TestCatchUnionMember_member
+    }
+  }
+`)
+
+module TestUnionMember = {
+  @react.component
+  let make = () => {
+    let query = QueryUnionMember.use(~variables=())
+    let fragmentData = UnionMemberFragment.useOpt(
+      query.member->Belt.Option.map(r => r.fragmentRefs),
+    )
+
+    switch fragmentData {
+    | Some(Ok({value: User({id, createdAt})})) =>
+      <div>
+        {React.string(
+          "Got user id: " ++
+          id ++
+          ", and createdAt: " ++
+          createdAt->Js.Date.toISOString->Js.String2.slice(~from=0, ~to_=10),
+        )}
+      </div>
+    | Some(Ok({value: Group({id, name})})) =>
+      <div> {React.string("Got group id: " ++ id ++ ", and name: " ++ name)} </div>
+    | Some(Error(_)) => <div> {React.string("Error from union fragment!")} </div>
+    | _ => React.null
+    }
+  }
+}
+
 @live
 let test_catch = testName => {
   let network = RescriptRelay.Network.makePromiseBased(~fetchFunction=RelayEnv.fetchQuery)
@@ -189,6 +236,7 @@ let test_catch = testName => {
     | "TestMember" => <TestMember />
     | "TestMemberNested" => <TestMemberNested />
     | "TestMembers" => <TestMembers />
+    | "TestUnionMember" => <TestUnionMember />
     | _ => React.null
     }}
   </TestProviders.Wrapper>