[React] useQuery의 onMutate 옵션

onMutate 속성은 useQuery 또는 useMutation 훅에서 제공하는 옵션 중 하나로, 쿼리 실행 중 mutation이 발생했을 때 수행되는 콜백 함수를 설정하는 역할을 한다.

보통 useMutation 훅을 사용하여 mutation을 처리할 때, optimistic update를 수행하거나, 캐시 업데이트를 수행하거나, 에러 발생 시 처리 등을 수행한다. 이 때, useQuery 훅에서 제공하는 onMutate 속성을 사용하면 mutation 전에 수행할 작업을 정의할 수 있다.

onMutate 속성에 전달할 수 있는 값은 함수이다. 이 함수는 다음과 같은 형태를 가진다.

onMutate?: (variables: TVariables) => Promise<R | undefined> | R | undefined;

여기서 TVariables는 mutation에 전달되는 변수들의 타입을 나타내고, R은 mutation의 결과 타입을 나타낸다.

onMutate 함수는 mutation이 수행되기 전에 실행된다. 이 함수는 mutation 실행 전에 수행할 작업을 정의한다. 예를 들어, onMutate 함수에서는 optimistic update를 수행하거나, 캐시 업데이트를 수행하거나, 에러 처리 등을 수행할 수 있다.

onMutate 함수는 Promise를 반환할 수도 있다. 이 경우, useQuery 또는 useMutation 훅은 mutation 실행 결과가 도착할 때까지 대기한다. Promise가 완료되면, useQuery, useMutation 훅은 mutation 실행 결과를 사용하여 업데이트를 수행한다.

아래는 onMutate 속성을 사용하여 optimistic update를 수행하는 예시 코드이다.

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

const Todos = () => {
  const { data } = useQuery('todos', () => fetch('/api/todos').then((res) => res.json()));
  const [addTodo, { isLoading }] = useMutation((todo) =>
    fetch('/api/todos', {
      method: 'POST',
      body: JSON.stringify(todo),
      headers: { 'Content-Type': 'application/json' },
    }).then((res) => res.json())
  );

  const handleAddTodo = (event) => {
    event.preventDefault();

    const todo = { id: Date.now(), text: event.target.elements.todo.value };
    event.target.elements.todo.value = '';

    addTodo(todo, {
      onMutate: (newTodo) => {
        // Optimistic update
        queryCache.cancelQueries('todos');
        const previousTodos = queryCache.getQueryData('todos');
        queryCache.setQueryData('todos', (old) => [...old, newTodo]);
        return () => queryCache.setQueryData('todos', previousTodos);
      },
      onError: (err, variables, rollback) => rollback(),
    });
  };

return(

후략...

onMutate 함수에서는 queryCache 객체를 이용하여 쿼리 캐시 데이터를 업데이트할 수 있다.
위 예시 코드에서는 onMutate 함수 내에서 queryCache 객체의 cancelQueries 메서드를 호출하여 todos 쿼리의 모든 실행을 취소한다. 이후 getQueryData 메서드로 이전에 캐시된 데이터를 가져와 setQueryData 메서드로 newTodo를 추가한 새로운 데이터 배열을 다시 저장한다. 이를 통해 새로운 todo가 추가될 때마다 화면에서 새로고침 없이 업데이트가 된다.

그리고 onMutate 함수에서는 이전 데이터를 저장한 함수를 반환한다. 이 함수는 mutation 실행 결과가 도착하지 않았을 때, setQueryData 메서드를 이용하여 이전 데이터를 캐시에 다시 저장하는 역할을 한다. 이 함수는 onError 콜백에서 사용된다.

onMutate 콜백 함수를 사용하면 mutation이 실행되기 전에 수행할 작업을 정의할 수 있어, mutation이 성공하거나 실패했을 때, UI 업데이트나 캐시 업데이트 등을 더 빠르게 처리할 수 있다.

 

정리

1. onMutate 콜백 함수는 mutation 이전에 실행된다.
2. onMutate 함수는 Promise를 반환할 수 있으며, 이 경우 useQuery 훅은 Promise가 완료될 때까지 대기한다.
3. onMutate 함수는 쿼리 캐시를 업데이트할 수 있다.
4. onMutate 함수는 mutation 실행 결과가 도착하기 전에 이전 데이터를 저장하는 함수를 반환할 수 있다.

따라서 onMutate 속성을 적절히 활용하면 mutation이 실행될 때 UI 업데이트나 캐시 업데이트 등을 더 빠르게 처리할 수 있다.