Tanstack Query - useMutation 오류

🚨 발생한 문제

댓글 CRUD 중 useMutation으로 수정하는 로직 작성 중 useMutation은 기본적으로 하나의 인자만 받도록 되어있어서 두개의 인자를 넣어주게 될 때, 오류가 발생한다고 한다. 그래서 객체로 인자를 넣어줬으나 mutationFn 에서 <void, string> 형식에 할당할 수 없다는 에러 문구가 조회되었다.

 

✅  해결방법

useMutation의 제네릭 타입을 명시적으로 지정해주어야 했다.

  const { mutate: updateComment } = useMutation<
    void,
    Error,
    { commentId: string; content: string }
  >({
    mutationFn: ({ commentId, content }) =>
      updatePostComment(commentId, content),
    onSuccess: () => {
      queryClient.invalidateQueries({
        queryKey: ["comment", "public"],
      });
    },
  });

 

 

지정해준 제네릭 타입

- void: updatePostComment 함수가 성공했을 때 반환하는 값이 없다는 것을 명시

- Error: 오류가 발생했을 때 반환되는 에러 타입을 정의

- { commentId: string; content: string }: mutationFn이 받는 인자의 타입을 지정(객체로 두 개의 인자를 전달)

 

위와 같이 제네릭 타입을 지정해주니 useMutation이 객체 형태의 인자를 받아 오류가 해결되었다.

 

 

🥲 느낀점

Tanstack Query 아직 조금 어렵긴한데 좀 더 익숙해지도록 계속 써봐야겠다.