[React Query] Mutation 개념

[React Query] Mutation 개념

Mutation은 서버에 데이터를 수정, 생성 또는 삭제하는 등의 작업을 수행하는 것을 의미하며 React Query Hook useMutation을 사용해서 수행할 수 있다.

 

 const updateMutation = useMutation((postId) => updatePost(postId));

 

 

useMutation은 일부 예외를 제외하고 useQuery와 상당히 유사하다.

mutate 함수를 반환하는데 이 mutate 함수는 우리가 변경 사항을 토대로 서버를 호출할 때 사용한다.

데이터를 저장하지 않으므로 쿼리 키는 필요하지 않다.

isLoading은 존재하고 캐시된 항목이 없으므로 isFetching은 존재하지 않는다.

변이에 관련된 캐시는 존재하지 않고 재시도 또한 기본값으로 존재하지 않는다.

useQuery는 기본값으로 3회 재시도하지만 useMutation의 경우 기본값으로는 재시도를 하지 않고 자동 재시도를 적용하고 싶다면 설정해 주는 것은 가능하다.

      <button onClick={() => updateMutation.mutate(post.id)}>

        Update title

      </button>

      {updateMutation.isError && (

        <p>Error updating the post</p>

      )}

 

 updateMutation의 mutate 함수에 인수를 전달하여 사용한다.

updateMutation의 반환 객체에서 다른 속성들도 사용하여 진행 중인 작업의 상태를 활용할 수 있다.

 

오류가 발생할 경우 isError상태를 활용하여 Error updating the post라고 메시지를 띄운다.