[7/22] React Query - useMutation

useMutation: 데이터 생성/수정/삭제 요청에 사용

const mutation = useMutation({
	mutationFn: newTodo => axios.post(url, newTodo),
    onSuccess: () => {
    	console.log('등록 성공');
    },
});

// 호출
mutation.mutate({ title: '할 일', done: false });

useMutation({...})

• useQuery는 서버로부터 데이터를 가져올 때 사용
• useMutation은 서버에 데이터를 보낼 때 (POST/PUT/DELETE 등) 사용

mutationFn: (newTodo) => axios.post(...)

• mutationFn은 서버 요청을 수행하는 함수
• mutate()가 호출될 때 실행됨
• axios.post가 실행되어 새 할 일을 서버에 등록

onSuccess

• 요청이 성공했을 때 실행됨
• invalidateQueries를 사용해 목록을 갱신하거나, 알림을 띄우기도 함

mutaion.mutate(...)

• 실제로 API 요청을 보내는 트리거
• 이 함수에 넘긴 데이터가 mutationFn의 인자로 전달됨 

POST /api/todos
Content-Type: application/json

{
	"title": "할 일",
    "done": false
}

흐름

1. mutate({...}) 호출

2. mutationFn 호출 -> axios.post()로 서버 요청 전송

3. 요청 성공 -> onSuccess() 실행 

등록 후 목록 다시 불러오기

const mutation = useMutation({
	mutationFn: newTodo => axios.post(url, newTodo),
    onSuccess: ()=> {
    	queryClient.invalidateQueries(['todos'); // 목록 쿼리 다시 요청 
    }
});

queryClient.invalidateQueries(['todos'])

• invalidateQueries()는 해당 쿼리를 무효화하여 다시 불러오게 만듦
• useQuery(['todos'], fetchTodos)와 같은 코드로 관리되고 있는 할 일 목록을 자동으로 리패칭(재요청) 함
• 등록 후 화면의 목록이 자동으로 최신 상태로 갱신됨

에러 핸들링

const mutation = useMutation({
	mutationFn: newTodo => axios.post(url, newTodo),
    onError: error => {
    	toast.error('등록에 실패');
    }
});