React Query를 사용하면서, get이 아닌 post, update, delete 요청 관리를 어떻게 할 수 있을까를 알아보며 이해하는 글
프로젝트를 진행하며 사용하고 있는 리액트 쿼리
서버로 get 요청 및 상태 관리를 하기 위해 useQuery는 써봤지만..
서버로 CRUD에서의 CUD 요청 관리는 어떻게 할 수 있을까?
useMutation을 통해 상태 관리를 할 수 있음!
아래는 Tanstack Query 공식 문서에서 가져온 useMutation의 옵션들과 받아오는 것들이다.
여기는 onError, onSettled, onSuccess 있음!
여기서, 필수로 넣어줘야 하는 옵션은 mutationFn!
이건 서버로 API 요청을 하고 Promise를 반환하는 함수여야 한다.
mutationFn: (variables: TVariables) => Promise로 확인을 할 수가 있는데, 여기 매개 변수 자리의 variables는 Promise를 반환하는 함수의 인자로 전달하는 값이다.
그 다음 보이는 옵션은 gcTime (cache Time)
이는 mutation 상태 데이터를 메모리에 얼마나 유지할지 결정하는 millisecond 형식의 시간이다.
기본 시간은 5분 ((60 5) 1000)이며, 커스터마이징을 할 수 있다.
보통 이 옵션은 useQuery에서 많이 사용되는데, useMutation에서 사용할 때는 mutation 결과를 참조하여 사용할 때이다.
(또는, mutation 결과를 짧은 시간동안만 유지해 메모리에서 빨리 제거할 때이다: 메모리 최적화)
: 보통 useMutation에서 자주 사용되지 않는다고 함
그 다음, 우리가 알고 있는 onError, onSettled, onSuccess
onError: 요청 실행 중 에러가 발생했을 때, 그 후 처리해줄 로직을 넣어준다
onSettled: 요청 실행이 성공했거나 실패했을 때 상관없이 후에 처리할 로직이 실행되는 곳이다 (finally 같은 것인가 봄)
onSuccess: 이름에서부터 알 수 있듯이, 요청 실행이 성공적으로 이루어진 후의 로직을 실행하는 구간이다.
여기서 처음 본 onMutate.
이 옵션은 mutationFn이 실행되기 전에 실행되는 단계이다. 여기의 매개 변수 자리에는 mutationFn에 패스 될 변수와 같은 값을 전달 받는다.
이 단계에서 Optimistic Update(실제 서버 요청 결과가 오기 전에 즉시 업데이트하여 사용자 경험 향상)를 실행할 수 있는데, 서버 응답이 느릴 떄에도 UI를 즉각 반응 시킬 수 있기 때문에 유용한 것 같다!
이 정도가 주요 옵션들인 것 같고, 나머지 옵션들은 공식 문서에서 확인하면 좋을 듯하다 :)
공식 문서: https://tanstack.com/query/latest/docs/framework/react/reference/useMutation
언제 mutation 함수를 호출시킬 수 있을까?
여기에 많은 리턴 값들이 있지만, 중요한 건 mutate!
이 mutate를 호출 시키면 mutation 함수를 호출 시키는 것이다.
(개인적으로 그냥 mutate이라는 이름보다 기능과 연관되어 있는 이름이 알아보기 쉬울 거 같았음)
그 다음, 원하는 위치에서 이 mutation function을 호출 시키면 되는 것이다.
나는 아래와 같이 호출했다!
이 정도만 해주더라도, 추가/수정/삭제의 요청을 리액트 쿼리와 함께 할 수 있는 것이다!
(onMutate은 처음 알게 되었는데, 다음에 optimistic update를 적용해봐야겠다)
오늘도 리액트 쿼리 한 단계 더 이해하기 성공 :)
