useMutation

• 서버의 데이터를 post, patch, put, delete와 같이 수정할 때 사용한다.

• useQuery()의 쿼리 함수는 컴포넌트가 마운트 되면서 자동으로 실행되지만,
  useMutation()은 실제로 뮤테이션 하는 함수를 직접 실행해줘야 한다.

• mutate() 함수를 통해 mutationFn으로 등록했던 함수를 실행할 수 있다.

• mutate()를 하면 서버의 데이터는 변경이 되지만, 현재 캐시에 저장된 데이터는 refetch를 하지 않는 이상 기존의 데이터가 그대로 저장되어 있다.
  따라서 refetch를 해줘야만 변경된 데이터를 화면에 반영할 수 있다.

invalidateQueries

• 캐시에 있는 모든 쿼리 or 특정 쿼리들을 무효화하는 함수이다.

• 쿼리를 무효화하면 해당 쿼리를 통해 받아 온 데이터를 staleTime과 상관없이 무조건 stale 상태로 만들고, 해당 데이터를 백그라운드에서 refetch하게 된다.

import { useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { getPosts, uploadPost } from './api';

function HomePage() {
  const [content, setContent] = useState('');
  const {
    data: postsData,
    isPending,
    isError,
  } = useQuery({
    queryKey: ['posts'],
    queryFn: getPosts,
    retry: 0, // 쿼리가 실패하면 특정 횟수만큼 재요청
  });
  const queryClient = useQueryClient();

  const uploadPostMutation = useMutation({
    mutationFn: (newPost) => uploadPost(newPost),
    onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['posts'] });
  },

  });

  const handleSubmit = (e) => {
    e.preventDefault();
    const newPost = { username: 'codeit', content };
    uploadPostMutation.mutate(newPost);
  };

  if (isPending) return '로딩 중입니다...';

  if (isError) return '에러가 발생했습니다.';

  return (
	// 컴포넌트 코드...
  );
}

export default HomePage;

---

useMutation의 주요 옵션

• onMutate: 뮤테이션이 시작되기 전에 실행된다. 보통 로컬 상태를 변경하여 최적화를 위해 이전 상태를 저장하거나, UI를 변경하는 등의 작업을 수행할 수 있다.
  

• onSuccess: 뮤테이션이 성공적으로 완료된 후에 실행된다.

• onError: 뮤테이션 중에 에러가 발생했을 때 실행된다.

• onSettled: 뮤테이션의 성공, 실패 여부에 상관없이 실행된다.
  try..catch..finally에서 finally와 비슷한 개념이다.

useMutation의 리턴 데이터인 mutate() 함수도 위와 같은 옵션들을 사용할 수 있다.

🚨 주의 사항

useMutation()에 등록된 콜백 함수들은 컴포넌트가 언마운트 되더라도 실행이 되지만, mutate()의 콜백 함수들은 뮤테이션이 끝나기 전에 해당 컴포넌트가 언마운트되면 실행되지 않는 특징을 가지고 있다.

query invalidation(쿼리 무효화)와 같이 뮤테이션 과정에 꼭 필요한 로직은 useMutation()의 콜백 함수를 사용하고 그 외의 페이지 리다이렉트나 토스트 알림 표시와 같은 UI관련 작업은 mutate()를 통해 등록해 주면 된다.

---

useMutation의 리턴 데이터

• mutate: 뮤테이션을 실행하고, 해당 뮤테이션의 실행 결과를 처리할 수 있다.
  • variables, onSuccess, onError, onSettled의 옵션이 있다.
    
• isIdle, isPending, isSuccess, isError 등 useQuery의 리턴 데이터와 비슷한 옵션들이 존재한다.

---

---