useMutation 사용해보기

서버에서 데이터를 가져오는 것은 단순히 useQuery를 사용하면 될테지만, 서버의 데이터를 업데이트 하는 경우에는 동일한 방식을 사용하는 것이 적절치 않다. 데이터의 생성/수성/삭제 (CRUD) 시에는 useMutation hook을 사용하면 된다.

공식문서로 확인하기

const {
  data,
  error,
  isError,
  isIdle,
  isLoading,
  isPaused,
  isSuccess,
  mutate,
  mutateAsync,
  reset,
  status,
} = useMutation(mutationFn, {
  mutationKey,
  onError,
  onMutate,
  onSettled,
  onSuccess,
  retry,
  retryDelay,
  useErrorBoundary,
  meta,
});

mutate(variables, {
  onError,
  onSettled,
  onSuccess,
});

• useMutation()의 첫번째 인자인 mutationFn는 필수!
• useMutation()의 옵션과 리턴하는 데이터의 종류는 매우 다양하다. 공식문서 꼭 확인해보기!

---

useMutation 써보기

✔️ 작업하기

import { useMutation } from "react-query";
import { getApi } from "@apis/index";

const useTodoCreator = () => {
  const mutation = useMutation((newTodo: TodosTypes) =>
    getApi.post("/todos", newTodo)
  );

  return mutation;
};

export default useTodoCreator;

✔️ 사용하기

import useTodoCreator from "@hooks/todos/useTodoCreator";

const TodoCreator: NextPage = (): JSX.Element => {
  const { mutate } = useTodoCreator();
  // ...

  const addItem = () => {
    // ...
    mutate(todo);
  };

  return (
    <InputWrap>
      // ...
      <button type='button' onClick={addItem}>
        등록
      </button>
    </InputWrap>
  );
};

export default TodoCreator;