react-query v3 에서 v4 (tanstack/react-query)로 올릴 때 꼭 주의해야할 사항! (+ 해결방안)

 

리액트를 사용하는 분들은 server와의 통신을 위해서 많은 state를 관리하기에는 불편함을 느껴서 react-query를 자주 사용하는 것으로 알고 있습니다. 저도 같은 이유로 사용을 하고 있는데 최근에 버전 업을 하면서 생각치 못한 버그가 발견되어서 주의하시라고 게시글을 작성합니다.

 

isLoading이 계속 true가 되는 상황이 생긴다.

우선 react-query -> tanstack/react-query 로 바꾸면 Query key가 배열로 들어가야하는 것은 어차피 오류가 나니까 수정하면 됩니다.

 

하지만 제일 중요한 것은 isLoading의 상태입니다.

보통 isLoading을 이용해서 true일 때 로딩 컴포넌트를 보여주는 형식으로 이용을 하시는데, 버전업을 하시게 된다면 isLoading이 계속해서 true가 되는 경우가 있을 것입니다.

 

그것은 바로 enabled가 false 상태일 때 isLoading이 무조건 true가 되기 때문입니다.

 

const { isLoading } = useQuery(['example'], async() => {
	// fetching data 
}, 
{
	enabled: !!id // <- 대충 이런 식으로 값을 평가해서 true 또는 false로 사용하는 경우 
    // !!id가 false로 평가되는 경우 isLoading이 무조건 true로 됩니다.
});

이것이 react-query v3에서는 없었던 현상인데, 이번에 버전 업하면서 알게되었습니다. 

해당 이슈와 관련되어 react-query github에는 많은 PR이 올라왔고, 개발자들은 enabled가 false인데, isLoading이 true인게 말이 안된다고 하고 있습니다. 

 

그래서 아마 v5에는 위의 이슈를 수정하면서 isPending이라는 값이 추가가 될 것 같은데, 궁금하신 분들은 아래 링크를 통해서 한번 봐보세요! 

(https://github.com/TanStack/query/issues/3975#issuecomment-1245101647)

 

지금 당장 버전 업을 해야하는 상황이라면 다음과 같은 해결책을 제시하려고 합니다.

 

 

 

해결책 1 isLoading 사용을 할때 enabled의 값과 논리연산으로 사용하기

위의 코드를 다시 가져와서 보여드리겠습니다.

const { isLoading } = useQuery(['example'], async() => {
	// fetching data 
}, 
{
	enabled: !!id // <- 대충 이런 식으로 값을 평가해서 true 또는 false로 사용하는 경우 
    // !!id가 false로 평가되는 경우 isLoading이 무조건 true로 됩니다.
});

const isCustomLoading = isLoading && !!id; // <- 이런 식으로 같이 평가해서 사용할 수 있습니다

 

해결책2 cache를 사용하지 않는다면 잠시 isFetching을 사용하기

해결책 1은 우선 근본적인 해결책이고, 위의 방법이 마음에 안든다면 isLoading을 굳이 사용하지 않아도 된다면 isFetching을 이용해서 사용하시길 바랍니다.

 

 

끝! 얼른 버전 업이 되었으면 좋겠네요