- react query에서 단순한 조회, get 요청을 보내기 위해서는 useQuery를 사용한다.
- 반면, 데이터의 수정이 일어나는 Post, Delete, Patch(Put) 요청을 위해서는 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가 된다.