React Query) 5. useMutation 사용해보기

지금까지는 react-query로 Read만 진행해 보았는데 

CUD를 해결할 수 있는 useMutation 을 알아보겠습니다.

 

1. 설명

 

공식문서를 퍼온것인데요 useQuery 와 동일하게 data, error, isError 등의 데이터들을 제공해 주는걸 알 수 있고

mutate 라는 데이터가 CUD 역할을 하는 함수 입니다

다른점은 queryKey 값을 받지 않고 api,option 만 받고 작동합니다.

 

코드로 설명하겠습니다

Api 부터 작성합니다

const addSuperHero = async (hero: Hero) => {
  const response = await axios.post("http://localhost:4000/superheroes", hero);
  return response.data;
};

 

훅 구현

 

1번 훅

export const useAddSuperHeroesData = () => {
  return useMutation(addSuperHero)
};

이러면 끝

 

인데 이러면 아쉽습니다. useMutate의 기능을 거의 안쓴거나 다름없죠

문제점은 mutation으로 데이터를 보낸다 해도 사용자가 보고있는 데이터는 변화가 없다는 점입니다.

따로 state 를 변경해주거나 프론트 딴에서 같이 업데이트를 해주거나 해야합니다.

댓글 작성을 생각하시면 됩니다. 댓글 작성을 눌러도 업데이트가 안된다고 생각해보세요

그렇다고 새로고침을 하자니 속도가 너무 느려지겠죠

 

이럴때 onSuccess 를 사용해 해결할 수 있습니다

 

2번 훅

export const useAddSuperHeroesData = () => {
  const queryClient = useQueryClient();
  return useMutation(addSuperHero, {
    onSuccess: (data) => {
    queryClient.setQueryData("super-heroes", (oldData) => {
      return {
        ...oldData,
        newData: [...oldData, data],
      };
     });
    },
  });
};

 

성공하면 queryClient 로 super-heros 키값으로 접근해 oldData 끝에 newData 를 넣습니다.

 

한번 실험 해 보겠습니다.

 

1번훅 AddHero 버튼 클릭후 아무런 변화x

새로 고침을 하니 아이언맨이 나온다

 

두번째 실험입니다 

2번 훅 입니다.

AddHero 누르기 전

누른 직후 깜빡임이 있은 후 바로 업데이트가 된다

 

해결 되었습니다!

 

다음 시간은 깜빡임 조차 싫다.

깜빡임도 없이 바로 업데이트를 시키는 optimistic update에 대해 알아보겠습니다