5. Mutations - 기본사항

기본사항

쿼리와 달리 뮤테이션은 데이터 CUD 에 사용됩니다. 이 목적으로 react-query 는 useMutation hook 을 제공합니다.

 function App() {
   const mutation = useMutation(newTodo => axios.post('/todos', newTodo));
 
   return (
     <div>
       {mutation.isLoading ? (
         'Adding todo...'
       ) : (
         <>
           {mutation.isError ? (
             <div>An error occurred: {mutation.error.message}</div>
           ) : null}
 
           {mutation.isSuccess ? <div>Todo added!</div> : null}
 
           <button
             onClick={() => {
               mutation.mutate({ id: new Date(), title: 'Do Laundry' })
             }}
           >
             Create Todo
           </button>
         </>
       )}
     </div>
   )
 }

뮤테이션은 아래의 상태 중 하나를 가지게 됩니다.

• isLoading , status === 'loading' : 데이터 변경 중

• isError, status === 'error' : 에러 발생

• isSuccess , status === 'success' : 데이터 변경 성공

• isIdle, status === 'idle' : 데이터 변경 불가능

위 예제를 보면 단일 변수나 객체 형태로 mutate 함수에 전달 될 수 있습니다.

mutate 함수는 비동기 함수이므로 react 16 이전 버전에서는 사용할 수 없습니다. onSubmit 에서 이벤트에 접근할 때 mutate 를 다른 함수로 래핑해야 합니다. react 이벤트 풀링

// This will not work in React 16 and earlier
const CreateTodo = () => {
  const mutation = useMutation(event => {
    event.preventDefault();
    return fetch('/api', new FormData(event.target));
  })

  return <form onSubmit={mutation.mutate}>...</form>
}

// This will work
const CreateTodo = () => {
  const mutation = useMutation(formData => {
    return fetch('/api', formData);
  })
  const onSubmit = event => {
    event.preventDefault();
    mutation.mutate(new FormData(event.target));
  }

  return <form onSubmit={onSubmit}>...</form>
}

뮤테이션 상태 리셋

뮤테이션 요청에 대한 error, data 를 초기화할 필요가 있을 때 reset 함수를 사용합니다.

const CreateTodo = () => {
  const [title, setTitle] = useState('');
  const mutation = useMutation(createTodo);

  const onCreateTodo = e => {
    e.preventDefault();
    mutation.mutate({ title });
  }

  return (
    <form onSubmit={onCreateTodo}>
      {mutation.error && (
        <h5 onClick={() => mutation.reset()}>{mutation.error}</h5>
      )}
      <input
        type="text"
        value={title}
        onChange={e => setTitle(e.target.value)}
      />
      <br />
      <button type="submit">Create Todo</button>
    </form>
  )
}

사이드 이펙트

useMutation 는 뮤테이션 라이프 사이클에서 쉽고 빠르게 사이드 이펙트를 수행할 수 있게 몇 가지 헬퍼 옵션을 갖습니다.

useMutation(addTodo, {
   onMutate: variables => {
     // 뮤테이션 발생 시 !
     // 데이터를 포함한 컨텍스트를 선택적으로 리턴할 수 있습니다.
     return { id: 1 }
   },
   onError: (error, variables, context) => {
     // 에러 일 경우 !
     console.log(`rolling back optimistic update with id ${context.id}`)
   },
   onSuccess: (data, variables, context) => {
     // 요청 성공 시 !
   },
   onSettled: (data, error, variables, context) => {
     // 요청 성공, 에러 상관없이 ! 
   },
 })