[FE] fix: api 중복 요청 방지 (#897)

* fix: 리뷰 제출 api 중복 요청 방지 * feat: post 요청에 대한 api 중복 요청 방지
woowacourse-teams · Nov 5, 2024 · 4e30ee2 · 4e30ee2
1 parent 43e1234
commit 4e30ee2
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/...end/src/components/highlight/components/HighlightEditor/hooks/useMutateHighlight/index.ts b/...end/src/components/highlight/components/HighlightEditor/hooks/useMutateHighlight/index.ts
@@ -19,7 +19,9 @@ const useMutateHighlight = ({
 }: UseMutateHighlightProps) => {
   const mutation = useMutation({
     mutationFn: (newEditorAnswerMap: EditorAnswerMap) => postHighlight(newEditorAnswerMap, questionId),
-
+    onMutate: () => {
+      if (mutation.isPending) return;
+    },
     onSuccess: (_, variables: EditorAnswerMap) => {
       updateEditorAnswerMap(variables);
       resetHighlightMenu();

diff --git a/frontend/src/pages/HomePage/hooks/usePostDataForReviewRequestCode/index.ts b/frontend/src/pages/HomePage/hooks/usePostDataForReviewRequestCode/index.ts
@@ -6,9 +6,12 @@ import { GROUP_QUERY_KEY } from '@/constants';
 const usePostDataForReviewRequestCode = () => {
   const queryClient = useQueryClient();
 
-  const { mutate, isSuccess, data } = useMutation({
+  const { mutate, isSuccess, isPending, data } = useMutation({
     mutationFn: (dataForReviewRequestCode: DataForReviewRequestCode) =>
       postDataForReviewRequestCodeApi(dataForReviewRequestCode),
+    onMutate: () => {
+      if (isPending) return;
+    },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [GROUP_QUERY_KEY.dataForReviewRequestCode] });
     },

diff --git a/frontend/src/pages/ReviewWritingPage/form/hooks/useMutateReview/index.ts b/frontend/src/pages/ReviewWritingPage/form/hooks/useMutateReview/index.ts
@@ -12,6 +12,9 @@ const useMutateReview = ({ executeAfterMutateSuccess }: UseMutateReviewProps) =>
 
   const reviewMutation = useMutation({
     mutationFn: (formResult: ReviewWritingFormResult) => postReviewApi(formResult),
+    onMutate: () => {
+      if (reviewMutation.isPending) return;
+    },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [REVIEW_QUERY_KEY.postReview] });
       executeAfterMutateSuccess();