[React Query] Mutation과 useMutation

💻 Mutation

변환객체에 변이 속성을 실행하여 변이의 호출을 조절할 수 있고 useQuery에서 진행한 것과 유사한 방식으로 주기를 처리할 수 있다.

Mutation은 서버에 데이터를 업데이트 하도록 서버에 네트워크 호출을 실시한다. CRUD에서 useQuery가 C를 맡았다면, useMutation는 RUD를 담당한다. Mutation은 변경내용을 사용자에게 보여주거나 진행된 변경 내용을 등록하여 사용자가 볼 수 있게 하는 방법들이 있다.

• Optimistic UI
  ㅇ 서버호출에서 모든 내용이 잘 진행될 것으로 간주하는 것. 사실이 아닌 것이 판명될 경우 롤백을 진행
• Mutation호출을 하면 서버에서 받는 데이터를 취하고 업데이트된 해당 데이터로 react query캐시를 업데이트하는 것
• 쿼리를 무효화(invalidation)할 수 있다.
  ㅇ 무효화하는 경우 서버에서 리페치를 개시하여 클라이언트에 있는 데이터를 서버의 데이터와 최신상태로 유지하게 된다.
  

🖤 useMutation

useQuery와 상당히 유사하다. mutate함수를 반환받는데 이 함수는 우리가 변경 사항을 토대로 서버를 호출할 때 사용할 것이다. 데이터를 저장하지 않으므로 쿼리지는 필요하지 않는다. 이로써 변이에 관련된 캐시는 존재하지 않기때문에 isLoading은 존재하고 isFetching은 없다

• 특징점
  useMutation는 인자로 쿼리지를 받지않고 mutationFn를 받는다. mutationFn에서는 useQuery훅의 QueryFn과 다르게 인자를 제공할 수 있다.

✔ 적용

	import { useQuery, useMutation } from "react-query";
    const deleteMutation = useMutation((postId) => deletePost(postId));
return(
  <>
    <button onClick={() => deleteMutation.mutate(post.id)}>Delete</button>
            {deleteMutation.isError && <p style={{ color: "red" }}>Error deleting the post</p>}
            {deleteMutation.isLoading && <p style={{ color: "purple" }}>Deleting the post</p>}
            {deleteMutation.isSuccess && <p style={{ color: "green" }}>Post has (not) been deleted</p>}
  </>
)

게시판에서 포스트를 삭제하는 로직을 useMutation을 통해 짜보았다. Delete버튼을 누르면 삭제 상태에따라 다른 색의 글자가 출력된다. 결과를 봐보자.

• 결과
  
  *애러시
  
  mutation 실행 과정을 확인할수있다.
  JSONPlaceholder의 api를 사용해 실제 값이 삭제되거나 변경되지는 않는다.