TIL- [React Query] Mutation

Mutation?

React Query의 mutation 기능은 비동기 데이터 변경 작업(예: 데이터 생성, 업데이트, 삭제)을 처리하는 데 사용된다. React Query의 mutations를 사용하면 데이터 변경 로직을 구성하고, 실행 상태를 추적하며, 결과를 기반으로 컴포넌트 상태를 업데이트할 수 있다.

---

기본 사용법

useMutation 훅은 두 가지 주요 인자를 받는다

Mutation 함수: 비동기적으로 데이터를 변경하는 함수다. 이 함수는 mutation 실행 시 mutate 함수에 전달된 인자를 사용한다.
옵션 객체 (선택 사항): 여러 콜백 함수와 설정을 포함하는 객체로, mutation의 생명주기 동안 실행되어야 하는 추가 동작을 정의한다.

옵션

useMutation에서 사용할 수 있는 옵션들은 다음과 같다

onMutate: Mutation이 실행되기 전에 호출된다. Optimistic Update를 구현할 때 유용하다.
onSuccess: Mutation이 성공적으로 완료되었을 때 호출된다. 성공 시 캐시를 무효화하거나 업데이트할 때 사용된다.
onError: Mutation이 오류로 실패했을 때 호출된다. 오류 처리 로직을 여기에 구현한다.
onSettled: Mutation이 성공 또는 실패 후 최종적으로 호출된다. 성공/실패와 상관없이 실행해야 하는 로직에 사용된다.
retry: 오류 발생 시 재시도할 횟수를 지정한다. 기본값은 3번.
retryDelay: 재시도 사이의 지연 시간을 결정하는 함수 또는 시간(밀리초)이다.

반환 값

useMutation 훅은 mutation의 상태와 제어 메커니즘을 제공하는 객체를 반환한다.

반환 값은 다음과 같다

mutate: Mutation 함수를 실행하는 함수다. 이 함수에는 mutation 실행 시 필요한 인자를 전달할 수 있다.
isLoading: Mutation이 현재 진행 중인지를 나타내는 boolean 값이다.
isError: Mutation이 오류로 실패했는지를 나타내는 boolean 값이다.
error: Mutation이 실패했을 때의 오류 객체다.
data: Mutation 함수가 성공적으로 완료된 후 반환된 데이터다.
status: Mutation의 현재 상태를 나타내는 문자열이다 (idle, loading, success, error 중 하나).

---

Mutation 함수 정의하기: 데이터를 변경하는 비동기 함수를 정의한다.
예를 들어, 데이터베이스에 데이터를 추가하는 함수를 작성할 수 있다.

useMutation 훅 사용하기: useMutation 훅을 사용하여 mutation 함수를 React 컴포넌트에 연결한다. 이 훅은 mutation을 실행하는 mutate 함수와 mutation의 상태를 나타내는 여러 반환 값들을 제공한다.

Mutation 실행하기: 사용자 인터페이스에서 특정 이벤트(예: 버튼 클릭)를 통해 mutate 함수를 호출하여 mutation을 실행한다.

상태 및 결과 처리하기: useMutation 훅에서 반환된 객체를 사용하여 mutation의 진행 상태, 성공, 오류 등을 처리하고 사용자 인터페이스를 업데이트한다.

예시 코드

간단한 데이터 추가 작업을 위한 mutation의 예시

import { useMutation, useQueryClient } from 'react-query';

// 비동기 데이터 추가 함수
const addTodo = async (todo) => {
  const response = await fetch('/api/todos', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(todo),
  });
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

function TodoApp() {
  const queryClient = useQueryClient();
  const { mutate, isLoading, isError, error } = useMutation(addTodo, {
    // 성공 시 캐시 무효화
    onSuccess: () => {
      queryClient.invalidateQueries('todos');
    },
  });

  const handleSubmit = (event) => {
    event.preventDefault();
    const form = event.target;
    const todo = { text: form.elements.todo.value };
    mutate(todo); // mutation 실행
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="todo" required />
      <button type="submit" disabled={isLoading}>
        Add Todo
      </button>
      {isError && <p>Error: {error.message}</p>}
    </form>
  );
}

이 예시에서는 addTodo 함수를 mutation 함수로 사용한다.
사용자가 폼을 제출하면 mutate 함수가 호출되어 addTodo 함수가 실행된다. useMutation 훅은 mutation 실행 중인지, 성공했는지, 오류가 발생했는지 등의 상태를 추적하며, 성공 시에는 onSuccess 콜백을 통해 캐시를 무효화할 수 있다.
이를 통해 관련된 쿼리를 자동으로 업데이트하고 최신 상태의 데이터를 반영할 수 있다.