백엔드가 accessToken과 refreshToken 로직을 만드는 동안 프론트에서도 token을 사용한 요청 및 토큰 관리 로직을 짜고 있는 중이다. 같은 프론트 팀원이 벌써 맡은 부분인 admin Auth 로직을 다 짜 두고 공유를 해 주어서(너무 감사하게도) 어제 오늘 열심히 분석하면서 내가 담당한 유저 레포의 Auth 로직을 짜고 있다. 이 과정에서 탠스택 쿼리의 useMutation과 mutate 메서드에 대해 드디어 감을 잡게 되어 기록해본다.

useMutation과 mutate 메서드

useQuery는 GET 관련이고 useMutation은 그 외 모든 POST, PUT, DELETE 등과 관련된다. (useQuery는 데이터 변경이 없는 '조회'인 GET, useMutation은 데이터의 변경이 있는 모든 경우 담당)

이 둘은 HTTP 작업들을 할 때의 '서버의 상태'를 관리한다.

useQuery와 useMutation로 만들어진 객체들은 각각 data, isLoading, isFetching, isError 등의 요소들을 가지고 있다.

즉, 데이터가 어떤 '서버 상태'인지를 인식하여 변수로 반환하고, 개발자는 사용하기만 하면 된다. 예전에 loading 같은 개념들을 useState로 관리할 때보다 훨씬 편해진 것이다.

isLoading과 isFetching의 차이는, 맨 처음 가져오는 거라 서버 호출이 필요할 때는 isLoading, 캐싱된 데이터를 그대로 가져다 쓸 때는(서버 호출 x) isFetching이라고 한다.

우선 오늘 얘기할 useMutation은 서버에 요청하는 함수(예: () => axios.post ~)를 받아서 뮤테이션 객체를 만든다.

그리고 이 객체는 위에서 말한 'isLoading, isError' 등의 요소들을 가지고 있다.

// 뮤테이션 객체 만들기
 const mutation = useMutation(() =>
    axios.post('/auth/refresh', ~);
  );
  
// 만든 뮤테이션에서 서버 상태 꺼내쓰기
{mutation.isLoading && <div>Loading 중입니다..</div>}

뮤테이션 객체를 만들 때 useMutation에 인자로 전달한 서버 요청 함수에 새 데이터를 넣어 기존 데이터를 변경하고 싶다면, 뮤테이션 객체에 mutate() 메서드를 붙이고 안에 인자로 새로운 데이터를 전달하면 된다.

// '추가' 버튼을 누르면 뮤테이션 객체를 변경시킴
// (= mutate 메서드의 인자에 새로운 데이터 전달
// 이 전달된 데이터는 뮤테이션 객체를 만들 때 사용했던 useMutation의 '서버에 요청하는 함수'에 인자로 전달된다.
<button>
   onClick={() => {
       mutation.mutate({ id: new Date(), title: '밥 먹기' })
   }}>
       추가
</button>

요약

mutate 메서드는 뮤테이션 객체를 변경시키는 데 쓰이고,
이 뮤테이션 객체는 useMutation에 서버 요청 함수를 넣어 생성한다.

tanstack query 개념 하나 해결 🎣