staleTime과 invalidateQueries

Question

안녕하세요 선생님! 우선 좋은 강의 감사합니다.   다름이 아니라 앱 강의를 보고 공부를 하던 중에 react-query에 대해 궁금한 점이 있어서 질문드립니다.   게시글을 작성할 때 invalidateQuries를 이용해서 특정 달에 작성한 게시물 리스트를 조회해오는 캐시 데이터를 무효화 시켰습니다.   강의를 들을 때는 "아! 그렇구나~" 하고 지나갔던 부분인데 staleTime의 기본 값이 0이라는 사실을 알고 의문이 생겼습니다.   reactQuery에서 staleTime을 지정하지 않으면 기본값 0이 적용되며 이는 데이터를 들고오자 마자 해당 데이터가 stale 상태로 변경된다는 것을 의미한다고 합니다.   그래서 무효화 쿼리가 없어도, staleTime의 값이 0이기 때문에, 캘린더 화면에 들어갔을 때는 새로 저장한 게시물에 대한 정보가 보여야 할 것으로 생각되는데, 생각과 다르게 invalidateQuery를 사용해야 하는 이유에 대해서 알 수 있을까요?   감사합니다!

Kyo · Answer

안녕하세요. 말씀해주신 것처럼, staleTime을 지정하지 않으면 0이기 때문에 바로 데이터를 stale 취급하게 되는것이 맞습니다. 따라서 강의에서 staleTime을 설정하는 부분이 나오진 않지만 제대로 사용하려면 staleTime을 지정해서 사용해주시는 것도 좋겠죠. 일반적으로는 따로 staleTime을 지정하지 않는다면 api가 다시 호출될 것입니다. 예를들어 리액트와 리액트라우터를 사용하여 다른 페이지로 이동한다면 그때마다 계속 호출이 되겠죠. react query devtools를 사용하거나 네트워크탭을 열어서 staleTime을 다르게 지정한후 간단하게 실험해보시는것도 좋을 것 같습니다.   그런데 우리 앱같은경우 서랍 네비게이션을 열어서 한번 연 뒤에 다시 열게되면 새로 여는것이아니라 이미 열려있는 화면이 나오는것을 볼 수 있습니다. 따라서 무효화 또는 캐시를 업데이트해서 상태를 변경해준 것입니다. staleTime에 대해 정확한 정답은 없기때문에, 한번 지정하여 사용해보시는 것을 추천드립니다. tkdodo 블로그에서는 20초 정도면 중복 호출 문제를 해결할 수 있기 때문에 이정도를 선호한다고 말하기도 했는데요. 아래 글도 참고해보세요. https://tkdodo.eu/blog/react-query-as-a-state-manager#customize-staletime