React Query에서 Post, Delete, Patch/Put (useMutation hook 사용하기)

• react query에서 단순한 조회, get 요청을 보내기 위해서는 useQuery를 사용한다.
• 반면, 데이터의 수정이 일어나는 Post, Delete, Patch(Put) 요청을 위해서는 useMutation을 사용해야 한다.

• 실제로 useMutation을 사용한 예시 코드를 남긴다.

import axios from 'axios';
import { useMutation } from "react-query";

const PostData = () => {

	const posting = async () => {
          const url = `/posting`;
          const payload = { data };
          axios.post(url, payload)
                  .then(el => console.log(el.data))
                  .catch(err => console.log(err));
	}
    

    const { mutate, isLoading, isError, error, isSuccess } = useMutation(posting);

    console.log(`isLoading: ${isLoading}, isError: ${isError}, error: ${error}, isSuccess: ${isSuccess}`);
    // useMutation의 리턴값을 출력한다.

	return(<button onClick={mutate}>데이터 포스팅!</button>);
	
}

• 리턴되는 mutate 함수를 실행함으로써 서버에 요청을 보낼 수 있다.

• 로딩중이라면, isLoading 값이 true가 된다. 로딩이 끝나면 ,false가 된다. (디폴트값은 false)

• isError값은 기본적으로 false이고, 에러가 발생하면 true가 된다.

• error는 null값이고 에러가 발생하면, error에 데이터가 담긴다.

• isSuccess는 기본적으로 false값을 가진다. mutate 함수가 무사히 실행되면 true가 된다.