[Tanstack Query / 트러블 슈팅] invalidateQueries로 쿼리 무효화 하기, new QueryClient()와 useQueryClient() 차이

🚀 들어가며

팀 프로젝트에서 프로필 수정 페이지 작업 중 있던 일이었다. 프로필 수정 페이지에서 프로필을 수정하고 저장 버튼을 눌렀을 때, 프로필 페이지로 이동시켜주어야 했고 새로 수정한 프로필 정보가 화면에 렌더링되어야 했다. 하지만 뜻대로 되지 않았고 이전의 프로필 정보가 렌더링되었다. 그리고 새로고침을 한 번한 이후에야 정상적으로 변경된 프로필 정보가 렌더링되었다. 

 

 

✅ 해결해보기

좌 - 프로필 수정 페이지 / 우 - 프로필 페이지

위의 사진처럼 좌측의 프로필 수정 페이지의 변경내용 저장 버튼을 누르면 input 필드에 입력된 내용들을 body에 담아서 api 요청을 보내게 된다. api 요청이 성공하면 alert 창을 띄우고 프로필 페이지로 navigate 되게 된다.

프로필 페이지로 navigate 되고 나서 바뀐 프로필 정보를 api 요청을 통해 가져오고, 그 데이터를 기반으로 화면이 렌더링되어야 하는데 그러지 못했고, 새로고침을 해야 그제서야 프로필 정보를 api 요청을 통해 가져오고 화면에 정상적으로 렌더링 되었다.

▪︎ invalidateQueries 로 쿼리 무효화하기

ProfilePage

프로필 정보 조회 api 요청 커스텀 훅

프로필 페이지에서는 컴포넌트가 마운트될 때 userId를 쿼리키로 한 getUserDetail(프로필 정보 조회) api 요청을 통해 데이터를 받는다.

즉, userId를 쿼리키로 한 프로필 정보는 Tanstack Query의 QueryClient 객체에 저장(캐싱)되어 있기 때문에, 프로필 수정 페이지에서 프로필 정보를 수정하고 단순하게 프로필 페이지로 이동시키는 작업만 수행한다면 캐싱된 프로필 정보를 불러오게 될 뿐이다. 이럴 때는 캐싱된 쿼리키에 해당하는 데이터를 무효화(invalidate)해주는 작업이 필요하다.

프로필 정보 수정 api 요청 커스텀 훅

위와 같이 putUserDetail(프로필 정보 수정) api 요청이 성공한다면, QueryClient의 invalidateQueries 메서드를 통해 쿼리키에 해당하는 데이터를 무효화시킨다. 다시 말해서, invalidateQueries 메서드를 통해 쿼리키에 해당하는 데이터를 즉각 stale(데이터가 만료된 상태)로 만든다. 

이제 쿼리키에 해당하는 프로필 정보 데이터는 캐싱이 만료되어서 프로필 페이지로 이동하고 나서 다시 api 요청을 통해 데이터를 받게 된다.

 

▪︎ new QueryClient()와 useQueryClient()의 차이

사실, 위와 같이 invalidateQueries를 사용했음에도 한 번에 문제를 해결하지 못했다. 그 이유는 바로 new QueryClient()와 useQueryClient()의 차이점을 제대로 이해하지 못하고 클라이언트 인스턴스를 사용하려 했기 때문이다.

처음에는 invalidateQueries 메서드를 사용하기 위해 new QueryClient() 키워드를 통해 클라이언트 인스턴스를 생성했다. 하지만 예상처럼 동작하지 않았고, 문제를 해결하는 과정에서 이것은 잘못된 방식이라는 것을 깨달았다.

new QueryClient()는 Tanstack Query의 새로운 클라이언트 인스턴스를 생성하는 키워드이다. 클라이언트를 초기화할 때 사용되며, 일반적으로 애플리케이션의 최상위 컴포넌트에서 한 번만 사용되고 생성된 클라이언트 인스턴스는 <QueryClientProvider />를 통해 애플리케이션 전체에 공유된다. 

App.tsx

이렇게 공유된 클라이언트 인스턴스를 useQueryClient() 키워드를 통해 가져와서 사용할 수 있다.

만약 처음처럼, 애플리케이션의 하위 컴포넌트에서 new QueryClient() 키워드로 새롭게 클라이언트 인스턴스를 생성하고 Tanstack Query의 쿼리 무효화 등의 기능을 사용한다면 당연히 제대로 동작하지 않을 수 밖에 없다. 새롭게 생성된 클라이언트 인스턴스에는 무효화할 쿼리가 존재하지 않기 때문이다.

최상위 컴포넌트인 App.tsx 에서 생성된 클라이언트 인스턴스에 접근하기 위해 useQueryClient() 훅을 사용함으로써 성공적으로 문제를 해결할 수 있었다.

 

▪︎ 참고) refetch vs invalidateQueries 

Tanstack Query에는 enabled 옵션이 존재한다. enabled 옵션은 boolean 값을 가지며, false로 설정할 경우 쿼리는 자동으로 데이터를 가져오지 않는다.

refetch 메서드는 enabled 옵션과는 상관없이 무조건 queryFn을 수행한다. 하지만 invalidateQueries 메서드는 enabled 옵션을 고려한다. 즉, invalidateQueries는 데이터가 있는 컴포넌트를 볼 때만 리패치를 수행한다.

 

 

🛸 마치며

이전에 리액트에서 제공하는 Context API를 공부하며 Provider의 개념에 대해 알 수 있었다. Context API의 개념은 여러 라이브러리 구조의 근간이 되므로 매우 중요하다는 것을 다시 한 번 깨달을 수 있었다.

그리고 이번 문제를 새벽에 팀원과 함께 해결하며 더 성장할 수 있었고, 같이 문제를 해결하는 과정에서 보람되고 즐거움을 느꼈다.