분리된 파일의 tanstack mutate 메소드를 컴포넌트 안에서 사용하기

잠깐 정리를 먼저 해보겠습니다 🫨

· tanstack-query를 별도 파일로 설정하여 패칭 결과에 따라 로직을 만들 수 있지만, 복잡한 상태 관리를 처리할 때는 컴포넌트 내부에서도 처리를 할 수 있어요

 

개발을 진행하면서 서버와 통신에 대한 데이터 패칭 파일은 컴포넌트와 분리하여 진행하고 있습니다. 데이터 패칭 성공 및 실패 후에 대한 링크 이동 · 토큰 저장 등 간단한 로직의 경우는 데이터 패칭 파일에서 onSuccess · onError 으로 처리를 할 수 있는데, 컴포넌트에서 반응형 을 관장하는 값을 직접 건드려야할 경우에는 컴포넌트 단에서 패칭 결과에 따른 로직을 작성해야합니다. 분리되어 관리되고 있는 데이터 패칭 코드는 아래와 같습니다. 코드의 가독성을 위해 임포트와 타입 정의에 대한 부분은 제거를 했습니다.

export const useApiPostTodayAgenda = () => {
  const postAgenda = async ({ todo, pagingId, createdAt }: postAgendaProps) => {
    const res = await api.post(`/api/v1/dailyAgenda`, { todo: todo, pagingId: pagingId, createdAt: createdAt });
    return res.data as postTodayAgendaResponse;
  };

  return useMutation({
    mutationFn: ({ todo, pagingId, createdAt }: postAgendaProps) => postAgenda({ todo, pagingId, createdAt }),
  });
};

위에 코드에서 확인할 수 있듯이 컴포넌트에서 관장하는 상태를 넘겨받아, 데이터 패칭 결과 값에 따라 처리하기가 되게 애매한 상황이 벌어집니다. 이럴 경우 컴포넌트 내에서 패칭 결과 값을 확인하고 관련 로직을 작성을 해주면 되는데 컴포넌트에서는 다음과 같이 해결을 할 수 있습니다. tanstack-query를 별도 파일로 설정하여 패칭 결과에 따라 해당 파일에서 로직을 생성할 수 있지만, 비교적 한계가 있습니다. 이럴 경우 아래의 코드와 같이 보다 복잡한 상태 관리를 위해 컴포넌트 내부에서 처리도 할 수 있습니다.

// 글을 포스트 하기 위해 mutate 선언
const { mutate: postAgenda } = useApiPostTodayAgenda();


// 커스텀한 Input 태그에 onSuccess, onError를 참고해주세요
<Input
    onBlur={(event) => {
      postAgenda(
        { todo: item.todo, pagingId: item.pagingId, createdAt: item.createdAt },
        {
          onSuccess: (data) => {
            console.log(data);
          },
          onError: (err) => {
            console.log(err);
          },
        },
      );
    }}
/>