ReactQuery 사용 중에 url이 변경되는 경우, 자동으로 리페칭되나요?

Question

회사에서 react query를 도입하는 중입니다.
기존 코드에서는 서로 다른 페이지에서 같은 api를 지속적으로 요청하여 데이터를 받아오고 있습니다.
받아오는 데이터가 변경이 거의 없는 데이터라서, react-query의 캐싱기능을 사용하여, 불필요한 api 요청을 방지하려고 했습니다.

그런데 개발자 도구 네트워크탭에서 확인해보니, 페이지 url 경로가 변경될 때마다, 데이터가 fresh 상태임에도 불구하고 계속하여 데이터를 요청하는 api를 보내고 있습니다.

staleTime도 60분으로 설정했고, 데이터가 fresh 상태임도 확인해보았습니다.

혹시 옵션값과는 상관없이, url이 변경되었을 경우(ex localhost:3000/main -> /setting) 데이터 리페칭이 자동으로 일어나는 건가요? url이 변경되었을 때, 데이터가 fresh 상태라면 리페칭을 하지 않게 하고 싶습니다.

김하림 · Answer

URL 경로가 변경될 때마다 데이터를 리페칭하는 문제는 refetchOnMount 옵션과는 관련이 없습니다. React Query는 기본적으로 쿼리 키를 기준으로 캐싱하고 관리하는데, URL 경로의 변경은 쿼리 키에 영향을 주지 않아요. 따라서 URL 경로가 변경되더라도 캐시된 데이터가 있는 경우에는 서버에 요청하지 않고 캐시된 데이터를 사용해야 합니다.

개발자 도구의 React Dev Tools 혹은 Profiler를 통해서 컴포넌트가 리렌더링되고 있는지 한 번 확인해보세요. URL 변경 시 HOC에서 렌더링이 일어나는지 확인해보셔야 할 거 같고, 혹은 URL이 변경될 때 해당 쿼리의 쿼리 키에 정의된 값(아마도 상태값)이 변경되는지도 확인해 보셔야 할 거 같습니다.