📚 Reference

• 공식 문서 1

📜 Chapter

useQuery

QueryClient

‣

useMutation

const {
  data,
  error,
  isError,
  isIdle,
  isLoading,
  isPaused,
  isSuccess,
  failureCount,
  failureReason,
  mutate,
  mutateAsync,
  reset,
  status,
} = useMutation({
  mutationFn,
  gcTime,
  mutationKey,
  networkMode,
  onError,
  onMutate,
  onSettled,
  onSuccess,
  retry,
  retryDelay,
  useErrorBoundary,
  meta
})

mutate(variables, {
  onError,
  onSettled,
  onSuccess,
})

• useMutation
• post, update는 useMutation을 사용한다.
• useMutation은 서버의 데이터를 생성, 수정, 삭제(Create, Update, Delete)할 때 사용하는 Hook이다.

기본 구조

• 가장 기본적인 형태는 실행할 비동기 함수(mutationFn)를 정의하는 것이다.

const mutation = useMutation({
  mutationFn: (newTodo) => {
    return axios.post('/todos', newTodo);
  },
  onSuccess: () => {
    // 성공 시 로직 (예: 캐시 무효화)
    console.log('데이터 저장 성공!');
  },
  onError: (error) => {
    // 에러 발생 시 로직
    console.log('에러 발생:', error.message);
  },
});

// 실제 사용 시
const handleSubmit = () => {
  mutation.mutate({ id: 1, title: 'TanStack Query 공부하기' });
};

반환하는 주요 상태 값

• useMutation이 반환하는 객체에는 현재 작업의 진행 상황을 알 수 있는 유용한 값들이 들어있다.
  • mutate: 변이 함수를 실행하는 함수이다. 클릭 이벤트 등에서 호출한다.
  • isPending (구 isLoading): 현재 네트워크 요청이 진행 중인지 여부를 알려준다. (버튼 비활성화 등에 활용)
  • isSuccess: 요청이 성공적으로 완료되었을 때 true가 된다.
  • isError: 요청 중 에러가 발생했을 때 true가 된다.
  • data: 서버에서 반환한 응답 데이터가 담긴다.