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(PostData);

    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가 된다.

옵션으로 retry를 true로 하면, 요청 실패 시 다시 시도한다. retryDelay 옵션을 설정하여 재시도 딜레이 시간을 설정할 수도 있다.

useMuataion 역시 캐싱을 하고, 옵션으로 cacheTime을 설정하여 캐싱한 데이터의 유효시간을 설정할 수 있다.

🍦 useMutation의 캐싱값은 useQueryClient를 통해서 확인할 수 있다.

import { useQueryClient } from '@tanstack/react-query';

export default function App(){
	... 
  const queryClient = useQueryClient();
  console.log('cache', queryClient.mutationCache);
}

 

https://tanstack.com/query/v4/docs/react/reference/useMutation

useMutation | TanStack Query Docs