TIL 50. React Query(useMutation)

useMutation에 대해 더 자세히 알아보려고 한다.

useMutation과 밀접한 다음 세가지.

1. mutationFn - 처리가 이루어지는 함수.
2. mutate - mutationFn을 실행시키는 트리거.
3. invalidateQueries - 쿼리의 유효성을 무효화 -> get 요청

useMutation

데이터 조회를 제외한 생성, 수정, 삭제에 useMutation을 사용한다.

// 1
const saveTodo = useMutation(mutationFn);

// 2
const saveTodo = useMutation({
    mutationFn: mutationFn
})

위와 같은 형태로 사용하는데,
mutationFn은 mutation function이며, promise 처리가 되는 함수다.
axios를 사용하여 서버에 api를 요청하는 거라고 보면 된다.

---

// 1
const saveTodo = useMutation((todo) => axios.post('http://localhost:3001/saveTodo', todo));

//1-2 (addTodo : 서버에 데이터를 보내는 함수)
const saveTodo = useMutation(addTodo);

// 2
const saveTodo = useMutation({
    mutationFn: (todo) => axios.post('http://localhost:3001/saveTodo', todo)
})

위와 같은 형태가 된다.

mutate

mutate는 useMutation을 이용해 작성한 내용들이 실행될 수 있도록 도와주는 trigger 역할을 한다.
useMutation 정의 후, 이벤트가 발생하면 mutate를 사용!

const onSaveTodo = () => {
	saveTodo.mutate(todo); // 데이터 저장
}

버튼을 클릭하면 onSaveTodo를 실행하고, mutate가 트리거가 되어 정의된 saveTodo가 실행(?)된다.

useMutation 옵션

// 1
const saveTodo = useMutation((todo) => axios.post('http://localhost:3001/saveTodo', todo), {
    onSuccess: () => { // 요청 성공
        console.log('Success');
    },
    onError: (error) => { // 에러 발생
        console.log('Error');
    },
    onSettled: () => { // 성공 실패에 상관없이 실행
        console.log('Settled');
    }
});

// 2
const saveTodo = useMutation({
    mutationFn: (todo) => axios.post('http://localhost:3001/saveTodo', todo),
    onSuccess: () => { // 요청 성공
        console.log('Success');
    },
    onError: (error) => { // 에러 발생
        console.log('Error');
    },
    onSettled: () => { // 성공 실패에 상관없이 실행
        console.log('Settled');
    }
})

useMutation를 정의할 때, 요청 성공, 에러, 성공과 에러 상관없이 실행시킬 코드를 옵션으로 줄 수 있다.

---

const onSaveTodo = () => {
    savePerson.mutate(todo, {
        onSuccess: () => { // 요청 성공
            console.log('Success');
        },
        onError: (error) => { // 에러 발생
            console.log('Error');
        },
        onSettled: () => { // 성공 실패에 상관없이 실행
            console.log('Settled');
        }
    }); // 데이터 저장
}

물론 위처럼 mutate에서도 사용가능.

invalidateQueries

invalidate는 '무효화하다'라는 뜻이다.
즉 invalidateQueries는 useQuery에서 사용되는 queryKey를 무효화 한다.
현재와 다른, 필요없는 데이터이기 때문에 다시 가져와야하므로 get을 다시 실행한다.

const saveTodo = useMutation((todo) => axios.post('http://localhost:3001/saveTodo', todo), {
      onSuccess: () => {
        queryClient.invalidateQueries('todos');
        // invalidateQueries가 선언되었기 때문에 'todos'라는 키값을 가진 get을 다시 실행.
      },
  	  onError: (error) => {
      	(...)
      },
  	  onSettled: () => {
		(...)
	  }
    },
  );