useMutation | TanStack Query Docs

• useQuery 와 다르게 mutation은 데이터를 생성(post) / 업데이트(update) / 삭제(delete) 할 때 사용 된다.
• queryClient의 invalidateQueries메소드 및 setQueryData메소드랑 같이 사용을 하면 최고의 효율을 낼 수 있다.
• useMutation의 경우 일회성이기 때문에 캐시 데이터가 없다.
• 서버에 있는 데이터를 변경한다.
• 기본적으로 재시도가 없다. 관련된 데이터가 없으므로 refetch하지 않는다.
• useMutation은 반환 객체에서 mutation함수를 반환한다.
• onMutate콜백: 낙관적 쿼리에서 사용하고, 변이가 실패할 때 복원할 수 있도록 이전 상태를 저장하는데 사용한다.

const CreateTodo = () => {
  const mutation = useMutation(createTodo, {
    onMutate() {
      /* ... */
    },
    onSuccess(data) {
      console.log(data);
    },
    onError(err) {
      console.log(err);
    },
    onSettled() {
      /* ... */
    },
  });

  const onCreateTodo = (e) => {
    e.preventDefault();
    mutation.mutate({ title });
  };

  return <>...</>;
};

• useMutation의 반환 값인 mutation 객체의 mutate 메서드를 이용해서 요청 함수를 호출할 수 있다.
• mutate는 onSuccess, onError 메서드를 통해 성공 했을 시, 실패 했을 시 response 데이터를 핸들링할 수 있다.
• onMutate는 mutation 함수가 실행되기 전에 실행되고, mutation 함수가 받을 동일한 변수가 전달된다.
• onSettled는 try...catch...finally 구문의 finally처럼 요청이 성공하든 에러가 발생되든 상관없이 마지막에 실행된다.

const mutation = useMutation(addTodo);

try {
  const todo = await mutation.mutateAsync(todo);
  console.log(todo);
} catch (error) {
  console.error(error);
} finally {
  console.log("done");
}

• 만약, useMutation을 사용할 때 promise 형태의 response가 필요한 경우라면 mutateAsync를 사용해서 얻어올 수 있다.

🔅 mutate와 mutateAsync는 무엇을 사용하는 것이 좋을까?

• 대부분의 경우 우리는 mutate를 사용하는 것이 유리하다. 왜냐하면 mutate는 콜백(onSuccess, onError)를 통해 data와 error에 접근할 수 있기 때문에 우리가 특별히 핸들링 해 줄 필요가 없다.