Use react-query instead of apollo to remove a relationship (#5780)

Author: bilalabbad

frontend/app/src/entities/groups/ui/object-groups-list.tsx

@@ -1,10 +1,9 @@
 import { QSP } from "@/config/qsp";
 import { GroupDataFromAPI } from "@/entities/groups/api/types";
-import { REMOVE_RELATIONSHIP } from "@/entities/nodes/relationships/api/removeRelationship";
+import { useRemoveRelationships } from "@/entities/nodes/relationships/domain/remove-relationships/remove-relationships.mutation";
 import { getObjectDetailsUrl2 } from "@/entities/nodes/utils";
 import { schemaState } from "@/entities/schema/stores/schema.atom";
 import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
-import { useMutation } from "@/shared/api/graphql/useQuery";
 import { Button } from "@/shared/components/buttons/button-primitive";
 import ItemGroup from "@/shared/components/layouts/item-group";
 import ModalDelete from "@/shared/components/modals/modal-delete";
@@ -18,7 +17,7 @@ import { Link } from "react-router";
 
 type ObjectGroupsListProps = {
   className?: string;
-  objectId?: string;
+  objectId: string;
   groups: Array<GroupDataFromAPI>;
 };
 
@@ -37,7 +36,7 @@ export default function ObjectGroupsList({ className, objectId, groups }: Object
 }
 
 type ObjectGroupProps = {
-  objectId?: string;
+  objectId: string;
   group: GroupDataFromAPI;
 };
 
@@ -81,11 +80,24 @@ const ObjectGroupItem = ({ objectId, group }: ObjectGroupProps) => {
 };
 
 const RemoveGroupButton = ({ objectId, group }: ObjectGroupProps) => {
-  const [removeGroup, { loading }] = useMutation(REMOVE_RELATIONSHIP, {
-    variables: { relationshipName: "member_of_groups" },
-    onCompleted: () => graphqlClient.refetchQueries({ include: ["GET_GROUPS"] }),
-  });
   const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const { mutate: removeRelationships, isPending } = useRemoveRelationships();
+
+  const handleRemoveGroup = () => {
+    removeRelationships(
+      {
+        objectId,
+        relationshipName: "member_of_groups",
+        relationshipIds: [group.id],
+      },
+      {
+        onSuccess: () => {
+          graphqlClient.refetchQueries({ include: ["GET_GROUPS"] });
+          setShowDeleteModal(false);
+        },
+      }
+    );
+  };
 
   return (
     <>
@@ -105,12 +117,10 @@ const RemoveGroupButton = ({ objectId, group }: ObjectGroupProps) => {
         title="Leave Group"
         description={`Are you sure you want to leave group ${group.display_label}?`}
         onCancel={() => setShowDeleteModal(false)}
-        onDelete={() =>
-          removeGroup({ variables: { objectId, relationshipIds: [{ id: group.id }] } })
-        }
+        onDelete={handleRemoveGroup}
         open={showDeleteModal}
         setOpen={() => setShowDeleteModal(false)}
-        isLoading={loading}
+        isLoading={isPending}
       />
     </>
   );

frontend/app/src/entities/nodes/relationships/api/remove-relationships-from-api.ts

@@ -0,0 +1,38 @@
+import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
+import { BranchContextParams } from "@/shared/api/types";
+import { gql } from "@apollo/client";
+
+export const REMOVE_RELATIONSHIP = gql`
+  mutation RelationshipRemove(
+    $objectId: String!
+    $relationshipName: String!
+    $relationshipIds: [RelatedNodeInput]
+  ) {
+    RelationshipRemove(data: { id: $objectId, name: $relationshipName, nodes: $relationshipIds }) {
+      ok
+    }
+  }
+`;
+
+export type RemoveRelationshipFromApiParams = BranchContextParams & {
+  objectId: string;
+  relationshipName: string;
+  relationshipIds: Array<{ id: string }>;
+};
+
+export const removeRelationshipsFromApi = ({
+  objectId,
+  relationshipName,
+  relationshipIds,
+  branchName,
+}: RemoveRelationshipFromApiParams) => {
+  return graphqlClient.mutate({
+    mutation: REMOVE_RELATIONSHIP,
+    variables: {
+      objectId,
+      relationshipName,
+      relationshipIds,
+    },
+    context: { branch: branchName },
+  });
+};

frontend/app/src/entities/nodes/relationships/domain/remove-relationships/remove-relationships.mutation.ts

@@ -0,0 +1,31 @@
+import { useCurrentBranch } from "@/entities/branches/ui/branches-provider";
+import {
+  RemoveRelationshipsParams,
+  removeRelationships,
+} from "@/entities/nodes/relationships/domain/remove-relationships/remove-relationships";
+import { queryClient } from "@/shared/api/rest/client";
+import { useMutation } from "@tanstack/react-query";
+
+export function useRemoveRelationships() {
+  const { currentBranch } = useCurrentBranch();
+
+  return useMutation({
+    mutationFn: async ({
+      objectId,
+      relationshipName,
+      relationshipIds,
+    }: Omit<RemoveRelationshipsParams, "branchName">) => {
+      await removeRelationships({
+        objectId,
+        relationshipName,
+        relationshipIds,
+        branchName: currentBranch.name,
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        predicate: (query) => query.queryKey.includes("objects"),
+      });
+    },
+  });
+}

frontend/app/src/entities/nodes/relationships/domain/remove-relationships/remove-relationships.test.ts

@@ -0,0 +1,77 @@
+import { removeRelationshipsFromApi } from "@/entities/nodes/relationships/api/remove-relationships-from-api";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { removeRelationships } from "./remove-relationships";
+
+vi.mock("@/entities/nodes/relationships/api/remove-relationships-from-api");
+
+describe("removeRelationships", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should call removeRelationshipsFromApi with correctly transformed relationshipIds", async () => {
+    // GIVEN
+    const params = {
+      branchName: "main",
+      objectId: "object-1",
+      relationshipName: "testRelationship",
+      relationshipIds: ["rel-1", "rel-2"],
+    };
+    vi.mocked(removeRelationshipsFromApi).mockResolvedValueOnce(undefined!);
+
+    // WHEN
+    await removeRelationships(params);
+
+    // THEN
+    expect(removeRelationshipsFromApi).toHaveBeenCalledExactlyOnceWith({
+      branchName: "main",
+      objectId: "object-1",
+      relationshipName: "testRelationship",
+      relationshipIds: [{ id: "rel-1" }, { id: "rel-2" }],
+    });
+  });
+
+  it("should handle an empty relationshipIds array", async () => {
+    // GIVEN
+    const params = {
+      branchName: "main",
+      objectId: "object-2",
+      relationshipName: "emptyRelationship",
+      relationshipIds: [],
+    };
+    vi.mocked(removeRelationshipsFromApi).mockResolvedValueOnce(undefined!);
+
+    // WHEN
+    await removeRelationships(params);
+
+    // THEN
+    expect(removeRelationshipsFromApi).toHaveBeenCalledExactlyOnceWith({
+      branchName: "main",
+      objectId: "object-2",
+      relationshipName: "emptyRelationship",
+      relationshipIds: [],
+    });
+  });
+
+  it("should propagate errors thrown by removeRelationshipsFromApi", async () => {
+    // GIVEN
+    const params = {
+      branchName: "main",
+      objectId: "object-3",
+      relationshipName: "errorRelationship",
+      relationshipIds: ["rel-3"],
+    };
+    const error = new Error("API error");
+    vi.mocked(removeRelationshipsFromApi).mockRejectedValueOnce(error);
+
+    // WHEN/THEN
+    await expect(removeRelationships(params)).rejects.toThrow("API error");
+
+    expect(removeRelationshipsFromApi).toHaveBeenCalledExactlyOnceWith({
+      branchName: "main",
+      objectId: "object-3",
+      relationshipName: "errorRelationship",
+      relationshipIds: [{ id: "rel-3" }],
+    });
+  });
+});

frontend/app/src/entities/nodes/relationships/domain/remove-relationships/remove-relationships.ts

@@ -0,0 +1,24 @@
+import { removeRelationshipsFromApi } from "@/entities/nodes/relationships/api/remove-relationships-from-api";
+import { BranchContextParams } from "@/shared/api/types";
+
+export type RemoveRelationshipsParams = BranchContextParams & {
+  objectId: string;
+  relationshipName: string;
+  relationshipIds: Array<string>;
+};
+
+export type RemoveRelationships = (params: RemoveRelationshipsParams) => Promise<void>;
+
+export const removeRelationships: RemoveRelationships = async ({
+  objectId,
+  relationshipName,
+  relationshipIds,
+  branchName,
+}) => {
+  await removeRelationshipsFromApi({
+    objectId,
+    relationshipName,
+    relationshipIds: relationshipIds.map((id) => ({ id })),
+    branchName,
+  });
+};

frontend/app/src/shared/api/types.ts

@@ -1,8 +1,11 @@
-export type ContextParams = {
+export type BranchContextParams = {
   branchName: string;
-  atDate?: Date | null;
 };
 
+export interface ContextParams extends BranchContextParams {
+  atDate?: Date | null;
+}
+
 export type PaginationParams = {
   limit?: number;
   offset?: number;