useMutation 사용하기

useMutation이란?

• 서버로 데이터를 생성, 업데이트, 삭제하는 등의 '변경' 작업을 수행할 때 사용된다.

주요 특징과 기능

• 비동기 상태 관리 : useMutation은 비동기 함수의 실행 상태를 관리하면, 로딩, 성공, 에러 상태를 쉽게 처리할 수 있도록 한다.
• 자동 재시도 : 실패한 요청을 자동으로 재시도할 수 있는 옵션을 제공.
• 경과 데이터 캐싱 : 성공적으로 완료되 Mutation의 결과를 캐싱하여 불필요한 네트워크 요청을 줄일 수 있다.
• 콜백 함수 : onMutate,onSuccess,onError,onSettled등의 콜백을 제공하여 뮤테이션의 생명주기 동안 필요한 추가 작업을 정의할 수 있다.

onMutate이란?

• useMutation훅에서 사용할 수 있는 콜백함수이다
• 뮤테이션 함수가 호출되기 직전에 실행된다
• 뮤테이션 요청이 실제로 서버에 보내지기 전에 필요한 사전 작업을 수행하는 데 유용하다.

주요 사용 목적

• 상태변경 :
  • 데이터가 변경되기 전에 어떤 상태를 임시로 저장하거나 변경할 수 있다.
  • 최적화 상태를 유지하거나 UI를 업데이트하기 위해 중요할 수 있다.
• 로컬 데이터 조작 : 서버로 요청을 보내기 전에 로컬 데이터를 조작하거나 준비할 때 사용
• 사이드 이펙트 발생 : 뮤테이션이 발생하기 전에 로깅, 분석 전송, 또는 다른 사이드 이펙트를 발생시키는 용도로 사용
• 최적화 반영 : 서버 요청에 의존하는 대신에 클라이언트 사이드에서 데이터를 미리 업데이트하거나 삭제하는 옵티미스틱 업데이트를 수행할 수 있다.

// 간단한 예제
cosnt { mutate } = useMutation(deleteCommnet, {
   onMutate: async (commentId) => {
	  // 캐시에서 댓글 목록을 가져온다.
      const prevComments = queryClient.getQueryData(['commnets']);
      
      //댓글 목록에서 삭제될 댓글을 제거 (옵티미스틱 업데이트)
      queryClient.setQueryData(['commnets'], old => old.filter(comment => commnet.id !== commentId));
      
      // 이전 상태를 반환하여 나중에 롤백이 가능하게 하기
      return { prevComments };

onSuccess란?

• 뮤테이션이 서버에 성공적으로 완료된 후 실행된다.
• 데이터의 성공적인 업데이트나 삭제 후에 특정 작업을 수행할 필요가 있을 때 유용하다.

주요 사용 사례

• 데이터 캐시 갱신:
  • 성공한 후 관련 쿼리 데이터를 갱신하거나 재검증할 수 있다.
  • 데이터 일관성을 유지하고 사용자 인터페이스를 최신 상태로 유지하는데 중요하다
• 사용자 인터페이스 업데이트: 성공메시지 표시, 성공화면으로의 라우팅 변경, 모달 창 닫기등 UI관련 작업을 수행할 수 있다.
• 사이드 이펙트 실행: 로깅, 분석 이벤트 전송, 다른 시스템과의 통합 작업 등 추가적인 사이드 이펙트를 실행할 수 있다.

// 사용 예시
const { mutate } = useMutation(updateUserData, {
onSucccess: (data) => {
// 성공적으로 데이터가 업데이트되면, 사용자 데이터 쿼리를 갱신
	queryClient.setQueryData(['user', data.id], data);
    alert('유저 업데이트 성공');
   }
});

onError란?

• 예외 처리, 오류 로깅, 사용자에게 피드백 제공 등의 오류 관리를 담당한다.
• 예상치 못한 오류로 인해 실패하거나 서버에서 오류 응답을 반환할 경우, 오류 처리 로직을 수행할 수 있다.

주요 기능

• 오류 처리: 오류가 발생하면 사용자에게 알리거나 오류를 로깅하는 등의 작업을 수행할 수 있다.
• UI 업데이트: 오류 발생 시, 사용자 인터페이스에 오류 메시지를 표시하거나 다른 시각적 피드백을 제공한다.
• 상태 복원: 오류가 발생하기 전 상태로 데이터나 UI를 복원할 수 있다.
• 추가적인 오류 처리 로직 실행: 필요에 따라 추가적인 오류 처리 로직을 실행할 수 있다

// 예시 코드
cosnt { mutate } = useMutation(updateUserData, {
	onError: (error, variables, context) => {
    // 오류 처리 로직
    console.error('업데이트 유저 에러',error);
    alert('업데이트 유저 에러');

onSettled란?

• useMutation훅에서 사용하는 콜백함수 중 하나로, 뮤테이션이 성공하든 실패하든 관계없이 완료된 후 실행됩니다.
• 뮤테이션 작업이 마무리된 이후 필요한 일관 처리 작업을 수행하는데 유용하다
• 상태를 최신으로 유지하거나, 필요한 클린업 작업을 수행하기 위해 사용된다.

주요 기능

• 데이터 캐시 갱신 :
  • 성공적으로 변경이 이루어졌든, 오류가 발생했든, 관련된 쿼리 데이터를 갱신하거나 재검증할 수있다.
  • 데이터의 일관성과 정확성을 보장하는 데 중요하다.
• 사후 처리 : 추가 로깅, 클린업 작업, 또는 사용자 인터페이스 업데이트 등, 성공 또는 실패 후에 필요한 추가적인 작업을 수행할 수 있다.
• 오류와 성공 처리 : 성공과 오류 처리를 각각 다른 콜백에서 관리하는 대신, 공통된 로직을 onSettled에서 한 번에 처리할 수 있다.

// 예시 코드
const { mutate } = useMutation(updateUserData, {
	onSettled: (data, error, variables, context) => {
    // 뮤테이션이 완료된 후 쿼리 데이터를 갱신
    queryClient.invalidateQueries(['user', variables.userId]);
    // 필요한 사후 처리 로직
    if(error) {
    	console.error('업데이트 실패:',error);
        alert('유저데이터 업데이트 실패');
    }else{
	    alert('유저데이터 업데이트 성공');
    }
}
});

그 외

onRetry

• 뮤테이션 요청이 실패했을 때 재시도하기 전에 호출되는 콜백
• 재시도가 발생하기 전에 추가 로직을 실헹할 수 있으며, 언제 재시도를 중단할지 결정할 수 있다.

onRetry

• 재시도 횟수가 모두 소진된 후에도 여전히 에러가 발생했을 경우 호출된다.
• onError와 유사하지만 재시도 후에도 계속된 실패에 대응하여 사용된다.

retry

• 뮤테이션이 실패했을 때 자동으로 재시도할지 여부를 결정한다.
• 불리언 값 또는 재시도 횟수를 지정할 수 있다.
• 함수를 통해 특정 조건에 따라 재시도 여부를 동적으로 결정할 수도 있다.

retryDelay

• 재시도 간의 지연 시간을 설정하는 옵션이다.
• 고정된 시간을 설정하거나, 함수를 사용해 동적으로 지연시간을 계산할 수 있다.

더 많은 내용은 여기에서 참고하자!