[React-Query] useMutation 커스텀 훅 (react query useMutation Custom Hook Typescript)

 

React-Query의 useMutation을 커스텀 훅으로 만들어두면 편하다.

 

필자는 여기에 더해 mutate를 다루는 handler 함수를 정의하고 반환하는 방식의 커스텀 훅을 구현하였다.

아래는 예시 코드이다.(Typescript) 주석친 부분은 무시해도 된다.

interface MutationProps {
  postId: number
  updatePostRequest: UpdatePostType
}

function usePostMutation(
  postInfoBeforeUpdate: PostInfoType,
  userId: number,
  updatedTitle: string,
  updatedContent: string,
  updatedIsAnonymous: boolean
): { handlePostMutation: () => void } {
  const queryClient = useQueryClient()
  // const router = useRouter()
  // const { setMessage } = useSnackbarOpenStore()

  const postMutation = useMutation(
  ({ postId, updatePostRequest }: MutationProps) => updatePost(postId, updatePostRequest),
    {
      onSuccess: () => {
        queryClient.invalidateQueries(postKeys.list(postInfoBeforeUpdate.board.boardId, userId))
        // setMessage('게시글이 수정되었습니다.')
        // router.back()
      },
      // onError: () => {
      //   setMessage('실패했습니다. 잠시 후 다시 시도해주세요.')
      // }
    }
  )

  /** 게시글 수정 함수 */
  const handlePostMutation = () => {
    if (!!userId && !!postInfoBeforeUpdate) {
      if (!updatedTitle) {
        // setMessage('글 제목을 입력해주세요.')
      } else if (!updatedContent) {
        // setMessage('본문 내용을 입력해주세요.')
      } else {
        postMutation.mutate({
          postId: postInfoBeforeUpdate.postId,
          updatePostRequest: {
            boardId: postInfoBeforeUpdate.board.boardId,
            title: updatedTitle,
            content: updatedContent,
            isAnonymous: updatedIsAnonymous,
            isDelete: false
          }
        })
      }
    }
  }

  return { handlePostMutation }
}

export default usePostMutation

우선 useMutation의 인자에 mutationFn을 전달한다.

mutationFn에 인자를 넣기 위해서는 위와 같이 interface를 정의한 후, ({ postId, updatePostRequest }: MutationProps)와 같이 전달해줘야한다.

성공할 경우 queryClient의 invalidateQueries를 사용해 캐시된 데이터를 invalidate 처리하고 다시 불러오게한다. (react query의 너무 편리한 부분...)

invalidateQueries 함수 인자에 postKeys.list(postInfoBeforeUpdate.board.boardId, userId)가 무엇인가 할 수 있는데 쿼리 키를 키팩토리를 이용해 정의한 것을 불러온 것이다. 캐싱 관리에 쿼리 키 관리는 무척 중요하므로 이에 대해서는 추후 포스팅에서 소개하겠다.

 

아래 게시글 수정함수는 위에서 정의된 mutation의 mutate를 이용해 정의해준다.

그리고 이 함수를 export 로 내보낸다.

 

이제 원하는 곳에서 usePostMutation 커스텀 훅을 불러 handlePostMutation 함수를 사용할 수 있다.