useMutation 사용해보기

서버에서 데이터를 가져오는 것은 단순히 useQuery를 사용하면 될테지만,
서버의 데이터를 업데이트 하는 경우에는 동일한 방식을 사용하는 것이 적절치 않다. 데이터의 생성/수성/삭제 (CRUD) 시에는 useMutation hook을 사용하면 된다.

공식문서 로 확인하기

const {
   data,
   error,
   isError,
   isIdle,
   isLoading,
   isPaused,
   isSuccess,
   mutate,
   mutateAsync,
   reset,
   status,
 } = useMutation(mutationFn, {
   mutationKey,
   onError,
   onMutate,
   onSettled,
   onSuccess,
   retry,
   retryDelay,
   useErrorBoundary,
   meta,
 })
 
 mutate(variables, {
   onError,
   onSettled,
   onSuccess,
 })

• useMutation()의 첫번째 인자인 mutationFn는 필수!
• useMutation()의 옵션과 리턴하는 데이터의 종류는 매우 다양하다. 공식문서 꼭 확인해보기!

useMutation 써보기

✔️ 작업하기

import { useMutation } from 'react-query';
import { getApi } from '@apis/index';

const useTodoCreator = () => {
	const mutation = useMutation((newTodo: TodosTypes) =>
		getApi.post('/todos', newTodo)
	);

	return mutation;
};

export default useTodoCreator;

✔️ 사용하기

import useTodoCreator from '@hooks/todos/useTodoCreator';

const TodoCreator: NextPage = (): JSX.Element => {
	const { mutate } = useTodoCreator();
	// ...

	const addItem = () => {
		// ...
		mutate(todo);
	};

	return (
		<InputWrap>
            // ...
			<button type="button" onClick={addItem}>
				등록
			</button>
		</InputWrap>
	);
};

export default TodoCreator;