●[Main-Project] Refactor: 5일차

● 3~4일차 작업 분배

❍ FeedWriteCard(준석) + 스로틀 구현

• query mutation 함수 hook으로 처리
• ESC 뒤로가기 함수분리 필요해보임
• 여러번 게시물 버튼 눌렀을 시, 스로틀 적용하면 좋을 것 같음 + 수정도
• handleSubmit 부분의 코드 같은 조건문으로 반복 처리 되는 부분 정리할 수 있지 않을까?

❍ useMutation hook 처리(다은)

❍ Popup (다은)

• 버튼이 1개인 Popup, 버튼이 2개인 Popup으로 컴포넌트를 분히래서 관리하는 것은 어떨까? -> 분리하지 않기로 결정
• 팝업 메시지를 관리하는게 좋을 것 같다.
• Prop으로 넘겨주는 값들을 넘겨주지 않으면 기본값이 설정됐으면 좋겠다.

 

● useMutation hook 처리하기

• mutation.fn으로 빼놓은 함수기반으로 hook처리를 할지
• patch, post 등 메서드 기반으로 hook처리를 할지
• 그냥 많이 로직이 겹치는 부분을 기반으로 hook처리를 할지

위의 같은 내용으로 hook처리를 어떻게 해야할지에 대한 고민이 있었습니다. 결론적으로 저는 mutation.fn으로 빼놓은 함수기반으로 hook처리를 하였습니다. 아래는 제가 hook처리한 코드입니다.

import { useQueryClient, useMutation } from '@tanstack/react-query';
import { MutationProp } from './mutationProp';
import { postFormMuation } from '@/api/mutationfn';

export default function usePostFormMutation({
  key,
  successFn,
  errorFn,
}: MutationProp) {
  const queryClient = useQueryClient();
  const { mutate, isLoading } = useMutation({
    mutationFn: postFormMuation,
    onSuccess: () => {
      if (key)
        key.map(each => queryClient.invalidateQueries({ queryKey: [each] }));
      if (successFn) successFn();
    },
    onError: () => errorFn(),
  });
  return { mutate, isLoading };
}

이외에도 함수 기반으로 여러 hook들을 만들어 처리하였습니다. 

 

● useMutation hook 처리 에러

hook으로 처리하면서 mutation의 inavalidation이 되지 않는 에러를 마주하였습니다.. ㅠ infiniteQuery를 사용하는 부분들이 invalidation이 적용되지 않아서, 요청은 제대로 가지만 웹에서는 바뀐 데이터로 받아오지 않는 에러를 마주하였는데요,

이부분은 오늘 저녁과.. 내일 수정을 볼 예정입니다.ㅠ_ㅠ