[React Query] active하고 stale한 쿼리의 refetch

상황

• React Native에서 react navigation 스택을 사용함
• 퍼널 앞에서 호출한 쿼리를 퍼널 뒤에 새로운 화면에서 호출했는데 refetch하지 않고 기존 데이터를 재사용함.
• 캐시타임 내에 호출이 되어서 그런 줄 알고 cacheTime을 0으로 주고 했는데 동일한 현상 발생.

이유

• 일단 cacheTime은 inactive한 쿼리에 대해서만 의미가 있는데, 그 쿼리는 계속해서 active한 쿼리였다. 왜냐하면 스택 네비게이션에서는 계속해서 컴포넌트가 마운트된 상태로 쌓이기 때문이다.
• 챰고로 inactive 쿼리는 옵저버가 없는 쿼리를 의미하며, devtool로도 확인할 수 있고 Query Cache를 조회해서 옵저버 필드를 확인해볼 수도 있다.
• stale time은 디폴트가 0이므로 그 쿼리의 상태는 stale하고 active한 상태였다. devtool을 사용하면 확인하기 쉬웠겠지만 현재 react-native-debugger를 사용해서 react query devtool을 사용할 수 없었던 상태였다.
• 즉 cacheTime을 0으로 준 것은 어차피 active 쿼리니까 상관이 없었다.
• 그리고 프로젝트에서 사용하는 리액트 쿼리의 디폴트 옵션이 refetchOnMount: false 였다.
• 그래서 최초 쿼리한 스크린이 계속 마운트되어 있는 한 캐시타임과 관계 없이 refetch되지 않았다.
• 뒤로 가기를 눌러 최초 쿼리한 스크린을 언마운트 시킨 뒤 다시 마운트 시키면 이 때는 캐시타임이 지났는지에 따라 refetch를 한다.

Ref

refetching 조건
https://velog.io/@apro_xo/react-query-%EC%BA%90%EC%8B%B1feat.-refetch

important default
https://tanstack.com/query/latest/docs/react/guides/important-defaults

동일한 렌더링 주기에서는 같은 요청을 중복해서 보내지 않음 (active and stale query 케이스)
https://github.com/TanStack/query/discussions/2018#discussioncomment-645456

react navigation 라이프 사이클
https://reactnavigation.org/docs/3.x/navigation-lifecycle

옵저버가 없는 쿼리가 inactive 쿼리다
https://tkdodo.eu/blog/inside-react-query