React(리액트) React-Query 쿼리 useMutation 사용해보기, invalidateQueries(

이 내용은 제일 하단에 있는 링크인 udemy에 있는 "React Query : React로 서버 상태 관리하기"를 보고 요약한 내용입니다. 복습 없이 작성된 내용이고 기억해보기 위한 기록임으로 참고하는 건 좋지만 공식문서를 꼭 확인하고 올바른 방법으로 사용하시길 바랍니다. 혹시나 보시는 분들이 있을까 하여....

useMutation 변이 사용해보기

useQuery와 형태가 비슷해 보이는 게 어떤 차이가 있나?
쉽게 생각하면 useQuery는 get메서드에서 사용하고 useMutation은 그 외 메서드에서 사용할 수 있다.
다른 특징을 보면

1. query-key가 없다.
   당연하게도 일회성 통신이기 때문에 기억할 쿼리 키가 없다.
2. 캐시에 데이터를 저장하지 않는다.
   thunk에서는 데이터를 받아 reducer에서 저장을 했지만 query는 그런 방식으로 동작하지 않는다. 데이터를 변동하고 그 데이터를 다시 useQuery로 받아오는 방식으로 동작한다.
   개인적인 생각으로 그 데이터를 전역 데이터로 다뤄야 한다면 redux를 사용할 수 있겠다 ( 저는 지금 redux를 사용하고 있습니다)
3. isFetching과 isLoading에 차이가 없다
   isFetching과 isLoading을 구분 짓는 차이는 캐시에 데이터 여부인데, 캐시 데이터 자체가 없을뿐더러 찾을 쿼리 키도 없기 때문에 다르지 않다.

그 밖에 다른 특징이 많지만 기본 구조는 비슷하다고 생각한다.

사용방법

async  function  deletePost(postId) {
const  response = await  fetch(
`https://...../postId/${postId}`,
{ method:  "DELETE" }
);
return  response.json();
}

const  deleteMutate = useMutation((postId) => {
deletePost(postId);
});

<button  onClick={() =>  deleteMutate.mutate(post.id)}>Delete</button>

const queryClient = useQueryClient();
  const fetcher = async (newTodo) => {
    await axios.post("url"), newTodo);
  };

  const { mutate } = useMutation(fetcher, {
    onSuccess: () => {
      queryClient.invalidateQueries();
    },
    onError: (error) => {
      console.log(error);
    },
  });

  const onClick = (e) => {
    e.preventDefault();
    mutate({
      title: todo,
    });
  };

2개의 예시 코드를 작성해봤다.

1. 우선 먼저 눈에 들어온 것은 useMutation을 받은 변수를 매개변수로 받는 방법과 일반적으로 받는 방법이 있다.
   첫 번째 코드에서 onClick 이벤트를 자세히 보면 deleteMutate, mutate로 사용한다.
   두 번째 코드에서는 매개변수로 받아 바로 mutate를 사용하는 모습이다.
2. 두 번째는 useMutation에 인자로 받는 함수의 형태이다.
   첫 번째 코드는 익명 함수를 통해 인자를 받는 모습이고, 두 번째 코드는 그냥 함수를 작성한 방법이다. 아직까지는 뭐가 정답이다는 모르겠다.
   우선 사용한 onClick 부분을 보면 동일하게 mutate(들어갈 데이터) 형태를 보인다. 아직 내 수준에서는 이해할 수 없는 부분이지만, mutate에 역할? 기능? 정해진 약속이지 않을까 생각을 한다.
   결론적으로는 mutate에 데이터를 넣어 실행하게 되면 알아서 비동기 통신을 하는 함수에게 인자를 전달해준다.
3. queryClient, invalidateQueries()
   useQuery를 무시할 수 있는 자주 사용할 것 같은 기능이다. 우선 상단에서 const queryClient = useQueryClient();로 할당을 하고, (당연히 import가 필요하다.) 위 코드처럼 작성하면 모든 query에 대한 데이터를 다시 불러온다. 쉽게 생각하면 모든 querykey를 찾아 캐시 데이터를 삭제한다고 볼 수 있을 것 같다. 따라서 캐시 데이터가 없으니 새롭게 불러오는?
   안에 특정 querykey를 작성하여 원하는 key에 데이터만 초기화할 수 있다.
   따라서 querykey를 설정할 때 의존성 배열 구조로 한 번에 초기화할 query에 공통적인 query-key를 넣어주는 것이 효과적일 것 같다.

이 밖에도 onError 등 다양한 기능이 많은 것 같다. 중앙에서 에러 처리나 로딩 처리하기에 매우 유용하게 사용될 것 같지만, 그 부분은 나중에 적용해보도록 하자.

https://www.udemy.com/course/react-query-react/