[TIL] Mutation

Mutation 

어떤 데이터를 변경하는 것 (= 변화)

어떤 데이터라 함은 추가, 수정, 삭제를 의미한다.

CRUD 중, CUD에 해당한다.

axios의 경우 post, put, patch, delete 요청과 비슷하다.

axios.post('http://localhost:3000/todos', newTodo);

axios.patch(`http://localhost:3000/todos/${id}`, {isDone: true});

 

axios로 데이터 추가하기

const addTodo = async (newTodo) => {
	await axios.post(`${process.env.REACT_APP_SERVER_URL}/todos`, newTodo);
}

 

이제 값을 넣었을 때 변형할 수 있는 리액트쿼리 방법인 뮤테이션을 써보자.

function Input() {
	const dispatch = useDispatch();
    
    //리액트 쿼리 코드
    const queryClient = useQueryClient();
    const mutation = useMutation(addTodo, {
    	// 첫번째 인자 : 우리가 만들어놨던 API addTodo
        // 두번째 인자 : 성공했을 때/실패했을 때에 대한 key, value
        onSuccess: () => {
        	queryClient.invalidateQueries("todos")
            console.log("성공!");
        }
    });
    
    return (
    	// ... 생략
        
        // 원래 dispatch를 했었던걸 이렇게 바꿔준다.
        mutation.mutate(newTodo)
    )
}