fix: resolve problem when mutation is called multiples times

apps/eo_web/dist/manifest.json

@@ -18,7 +18,7 @@
     "css": [
       "assets/main-b2263767.css"
     ],
-    "file": "assets/main-82e41967.js",
+    "file": "assets/main-0ca378d6.js",
     "isEntry": true,
     "src": "src/main.tsx"
   }

apps/eo_web/src/hooks/useMount.tsx

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from "react";
+
+export const useMount = (fn: () => void) => {
+  const onceFlag = useRef(true);
+
+  useEffect(() => {
+    if (onceFlag.current) {
+      onceFlag.current = false;
+      fn();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};

apps/eo_web/src/screens/Cancer/CancerThankYou.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import { useMutation } from "@tanstack/react-query";
 import axios from "axios";
 import { useNavigate, useSearchParams } from "react-router-dom";
@@ -7,6 +6,7 @@ import { toast } from "react-toastify";
 import { Typography } from "@eo/ui";
 
 import { useElixirApi } from "~/api/useElixirApi";
+import { useMount } from "~/hooks/useMount";
 import { LayoutDefault } from "~/layouts";
 import { ROUTES } from "~/router";
 
@@ -28,7 +28,8 @@ export const CancerThankYou = () => {
   const { postCancerFormSubmission } = useElixirApi();
 
   const { mutate } = useMutation({
-    mutationFn: () => postCancerFormSubmission({ submission_id }),
+    mutationFn: postCancerFormSubmission,
+    mutationKey: ["postCancerFormSubmission", submission_id],
     onError: (result) => {
       if (axios.isAxiosError(result)) {
         if (result.response?.status !== 200) {
@@ -40,9 +41,7 @@ export const CancerThankYou = () => {
     },
   });
 
-  useEffect(() => {
-    mutate();
-  }, []);
+  useMount(() => mutate({ submission_id }));
 
   return (
     <LayoutDefault>