[React] useMutation를 활용한 데이터 생성, 수정, 삭제

useQuery와 매우 유사하지만 많은 차이가 있다.

 

✅ useQuery와 useMutation차이

- 일회성이기 때문에 캐시 데이터가 없다.

페칭이나 리페칭 그리고 업데이트할 데이터가 있는 useQuery와 다르다.

 

- 기본적으로 구성할 수는 있지만, 재시도가 없다.

useQuery는 기본적으로 세 번 재시도한다. 

 

- 관련된 데이터가 없으므로 리페치도 없다.

 

- 캐시 데이터가 없으므로 isLoading은 없고 isFetching만 있다.

isLoading은 데이터가 없을 때 이루어지는 페칭이기 때문이다. 

 

- useMutation은 반환 객체에서 mutate 함수를 반환한다. 이것이 변이를 실행하는 데 사용된다.

 

- onMutate 콜백도 있다. 이것을 낙관적 쿼리에 사용하는데 변이가 실패할 때 복원할 수 있도록 이전 상태를 저장하는 데 사용한다.

 

useMutation | TanStack Query Docs

 

✅ useMutation을 통해 데이터 생성, 수정, 삭제

이후 이벤트 핸들러나 함수 내에서 mutate를 일으키면 된다. 이때 해당 API가 호출 성공할 경우 invalidateQueries를 통해 stale date가 모두 refetch 된다.

 

👉 생성

invalidateQuires 정말 좋은 옵션...✨

const addItem = useMutation((item: Item) => createItem(item), {
    onSuccess: (data) => {
      console.log(data);
      queryClient.invalidateQueries(queryKeys.items);
    },
    onError: (error) => {
      console.log(error);
    },
  });

...

 const onSubmit: SubmitHandler<IFormInput> = (data) => {
    const Item = {
      id: uuidv4(),
    };
    const newItem = Object.assign(Item, data);
    addItem.mutate(newItem);
  };

👉 삭제

그리고 삭제하기 버튼이 눌렸을 때 해당 이벤트 핸들러가 작동하도록 해준다.

const deleteItem = useMutation((id: string) => deleteById(id), {
    onSuccess: (data) => {
      console.log(data);
      queryClient.invalidateQueries(queryKeys.items);
    },
    onError: (error) => {
      console.log(error);
    },
  });

...

 const handleDelete = (id: string) => {
    deleteItem.mutate(id);
  };

👉 수정

수정도 매우 유사하게 동작된다.
다만 코드 내 UI관련 state로 인해 조금 길어지나 내용은 동일하다.

const editItem = useMutation((item: Item) => createItem(item), {
    onSuccess: (data) => {
      console.log(data);
      setEditable(!editable);
      queryClient.invalidateQueries(queryKeys.items);
    },
    onError: (error) => {
      console.log(error);
    },
  });

...

 const handleEdit = (id: string, name: string, price: number) => {
    setEditable(true);
    setClickedId(id);
    setMenuInputVal(name);
    setPriceInputVal(price);
    const editObj = {
      id: clickedId,
      name: menuInputVal,
      price: priceInputVal,
    };
    editItem.mutate(editObj);
  };

AWS와 React Query를 활용한 CRUD 만들기