2023.08.31

useMutation의 onMutate.

 

프로젝트를 진행하며, useQuery의 select만으로는 에러 핸들링이 부족하다고 생각되어 mutation의 데이터를 가지고 핸들링할 방법을 찾다가, onMutate를 발견했다. 

 

onMutate 속성은 쿼리 실행 중 mutation이 발생했을 때 수행되는 콜백 함수를 설정하는 역할을 한다.

 

---

onMutate: (variables: TVariables) => Promise<TContext | void> | TContext | void Optional

This function will fire before the mutation function is fired and is passed the same variables the mutation function would receive Useful to perform optimistic updates to a resource in hopes that the mutation succeeds The value returned from this function will be passed to both the onError and onSettled functions in the event of a mutation failure and can be useful for rolling back optimistic updates.

 

onMutate: (variables: TVariables) => Promise<TContext | void> | TContext | void Optional

이 함수는 mutation 함수가 실행되기 전에 실행되며 mutation 함수가 받을 변수와 동일한 변수를 전달받습니다. 
mutation이 성공할 것을 기대하여 리소스에 대한 낙관적인 업데이트를 수행하는 데 유용합니다. 이 함수에서 반환된 값은 mutation  실패 시 onError 및 onSettled 함수로 전달되며, 낙관적 업데이트를 롤백하는 데 유용할 수 있습니다.

 

아래는 onMutate 콜백을 사용하여 뮤테이션을 실행하기 전에 낙관적 업데이트를 수행하고, 실패 시 롤백하는 코드이다.
실패 시 onError 콜백을 사용하여 롤백 로직을 수행하고, onSettled 콜백을 사용하여 뮤테이션 완료 후 추가 작업을 수행할 수 있다.

 

import { useMutation } from 'react-query';

//  addTodo 뮤테이션 함수 정의
const addTodo = async (newTodo) => {
  // 서버로 To-Do 항목 추가 요청 보내는 비동기 작업
  // 이 부분에서 실제 서버 요청을 보낸다.
  // 성공 시 데이터 반환, 실패 시 오류 throw
};

function TodoApp() {
  const { mutate } = useMutation(addTodo, {
    onMutate: (newTodo) => {
      // 낙관적 업데이트를 위한 컨텍스트 생성
      const optimisticTodo = {
        id: Date.now(), // 임시 ID 생성
        text: newTodo,
        completed: false,
      };

      // 낙관적 업데이트를 수행
      // 여기서는 예시로 간단히 로컬 상태에 추가 하지만,
      // 실제로는 상태 관리 라이브러리나 컨텍스트 API를 사용할 수 있다.
      // 이 부분에서는 서버 요청 전이므로, 실패 시 롤백할 수 있다.
      // 롤백 시 이 데이터를 사용하여 낙관적 업데이트를 롤백할 수 있다.
      return optimisticTodo;
    },
    onError: (error, variables, context) => {
      // 뮤테이션 실행 중 오류 발생 시 호출됩.
      // 롤백을 수행하거나 오류 처리를 할 수 있다.
      console.error('뮤테이션 실패:', error);

      // context를 활용하여 낙관적 업데이트 롤백
      if (context) {
        console.log('낙관적 업데이트 롤백:', context);
        // 여기에서 롤백 로직을 수행.
      }
    },
    onSettled: (data, error) => {
      // 뮤테이션이 완료(성공 또는 실패)된 후 호출.
      // 성공 또는 실패 여부에 관계없이 이곳에서 추가 작업을 수행할 수 있다.
      if (data) {
        console.log('뮤테이션 성공:', data);
      } else if (error) {
        console.error('뮤테이션 실패:', error);
      }
    },
  });

  const handleAddTodo = (newTodo) => {
    // 뮤테이션 호출
    mutate(newTodo);
  };

  // 나머지 컴포넌트 렌더링 및 이벤트 핸들링
}

export default TodoApp;