Tanstack Query의 v5부터 useQuery의 onSuccess, onError, onSettled가 사라졌다
v4버전까지는 useQuery로 데이터를 받아올 때 onSuccess와 onError 그리고 onSettled도 받을 수 있어서 각자의 상태일 때를 처리할 수 있었다.
아래는 Tanstack Query 공식 문서에서 가져온 useQuery에 사용할 수 있는 옵션들이다.
여기서 볼 수 있듯이 onError, onSuccess, onSetteled는 보이지 않음.
이 세 가지가 useQuery에서 사라진 이유는 뭘까?
이 콜백들은 꽤나 자주 변하는 액션들이었다. 이들은 같은 쿼리에 여러번 불릴 수 있었고, 상태 업데이트의 중복을 일으켰다. 예를 들어, 이 동작들은 같은 쿼리에 2번의 중복된 에러 알람을 띄울 수 있게 되는 것이다.
또한, 비동기로 처리하는 과정에서 상태들과 싱크가 맞지 않아 부작용을 일으킬 수도 있다고 한다.
그래서, 리덕스나 다른 상태 관리자와 함께 이 콜백들을 사용하는게 예상치 못한 행동을 불러일으킬 수 있기에 사라졌다고 한다!
그렇다면, 이러한 콜백들 없이 어떻게 각 상태일 때 원하는 로직을 진행시킬 수 있을까?
우리는 Tanstack Query를 사용하려면, 이렇게 최상위 상단에서 QueryClientProvider로 감싸준다.
이 과정에서, QueryCache에 대해 알게 됐는데 이는 무엇일까?
QueryCache란?
Tanstack Query의 저장 메카니즘이다. 얘는 쿼리의 모든 데이터, 메타 정보, 그리고 상태를 저장하고 있다!
이 QueryCache에서는 onError, onSuccess, onSettled를 사용할 수 있음
위의 맨 마지막 코드처럼 find라는 메소드를 QueryCache에 사용할 수가 있는데, 이 외에도 findAll, subscribe, clear라는 메소드들이 있다.
이 find와 findAll은 거의 모든 상황에서 쓸 일이 없지만, 굉장히 레어한 상황에 필요할 때 사용될 수가 있다. find는 해당 쿼리가 없다면 undefined, findAll은 빈 배열을 리턴한다!
subscribe는 구독 방법을 사용하여 쿼리 캐시를 구독해 쿼리의 업데이트 정보들을 받을 수 있다.
마지막으로 clear는 전체 캐시를 지우고 fresh하게 만드는 방법이다.
자세한 내용은 Tanstack Query의 공식 문서를 확인해보자!
https://tanstack.com/query/v4/docs/reference/QueryCache/#querycachefind
위의 내용을 이어서 말해보자
QueryCache는 QueryClient의 옵션인 queryCache에 넣어줘 사용할 수 있다!
아래 예시 코드처럼, onError일 때 toast를 띄우는 등 각 상태마다 처리가 가능하다
각 상태일 때 전역적으로 띄울 UI를 관리해보는 것이다.
그렇다면 useQuery를 사용하고 성공적으로 받은 data 처리는 어떻게 할까?
useEffect를 이용해서, 해당 데이터를 의존 배열에 넣어준 후 데이터가 존재할 때 처리하는 로직을 구현한다!
이 예시처럼, useEffect 내에서 한번 조건문으로 검증을 한 후 state에 처리한다.
(현재 이 방법이 권장되는 방법이라고 함: useEffect)
그래서, 이러한 방법으로 현재 버전의 Tanstack Query의 useQuery를 사용할 수 있다!
useMutation은 이 옵션들을 반환하니, 다음에 기회가 된다면 useMutation에 대한 글을 작성해보도록 하겠다 :)
맞다 이 글을 작성할 때,
https://stackoverflow.com/questions/76961108/react-query-onsuccess-onerror-onsettled-are-deprecated-what-should-i-use-ins
이 stackoverflow의 답변도 좋은 예시가 되었다
시간나면 한번 보는 것도 좋을 듯!
