[React-Query] 2. useMutation 사용하기(공부중...)

useMutation

• 서버에 데이터 변경 작업을 요청할 때 사용하며, crud의 create, update, delete에 해당한다.
• useQuery와 다르게 자동으로 실행되지 않는다.
• 옵션과 반환값은 useMutation과 크게 차이가 없다.

const { mutation } = useMutation(mutationFn , options)

               반환값                                      매개변수

 

매개변수

1) mutationFn : api 호출 함수

usequery와 마찬가지로 promise 처리가 이루어지는 함수이며 axios를 이용해 서버에 API를 요청하는 부분이다

 

2) option : 선택사항

- onMutate : 본격적인 Mutation 동작 전에 먼저 동작하는 함수. optimistic update 적용할 때 유용

- optimistic update : api통신하기 전에 먼저 통신에 성공할거라고 보고 ui를 먼저 업데이트 한다. 안 된다면 roll-back 가능(안되면 말고st)

 

반환값

- mutate :  mutation을 실행하는 함수

- mutateAsync : mutate와 비슷하지만 Promise를 반환한다

- reset : mutation 내부 상태 clean

 

예시

// 데이터 추가(post) : post요청에서 두번째 인자에 추가하는 데이터를 객체로 전달
  const { mutate: createData } = useMutation((seq: number) =>
    axios.post(
	`https://dev/api/v1/course/adm/***/${dataSeq}`, { dataSeq: seq }, {
      	headers: { Authorization: `Bearer ${accessToken}` }
      })
  );
  
  // 데이터 수정(put)
  const { mutate: updateData } = useMutation((data: props) =>
    axios.put(
	`https://dev/api/v1/course/adm/${dataSeq}`, data, {
      	headers: { Authorization: `Bearer ${accessToken}` }
    })
  );

- axios기초가 좀 부족해서 post의 두번째 인자는 객체로 전달해야하는 것을 몰랐었다.

- mutaion은 위와같이 함수를 만들어 놓고 추가버튼 또는 수정버튼에 클릭이벤트를 걸어 createData(), updateData()를 설정해줘야한다.

- useQuery에 비해 useMutation은 해당 기능을 제대로 활용하지 못한것같아서 아쉽다. 시간이 부족해서 데이터 연결하기 급급했는데, 좀 더 여유가 있었다면 optimistic update와 같은 옵션들도 적용해보고 제대로 알지 못하는 개념들도 알아봤을텐데 말이다. mutaion에 대해 더 공부해서 다음 프로젝트에는 잘 활용해보고 싶다.