[React Query] Missin queryFn

문제

사이드 프로젝트에서 React Query를 사용해보고 있는데 이해할 수 없는 에러가 발생했다.

데이터를 얻어오는데 성공하였으나 잠시뒤 'Missin queryFn'이 뜨는 것이다. 

왜 일까...?

구글링을 해보니 React Query의 라이프사이클에 대해 정리된 글을 찾게 되었다.

원인

이해한 바로는 인스턴스가 mount 되고 데이터 패칭도 정상적으로 진행 되었으나 staleTime이라는 친구 덕분에 인스턴스가 unmount 되고 이때 'Missin queryFn' 에러가 발생하는 것으로 보인다.

해결

QueryClient 생성시 기본옵션의 queries 속성에 staleTime을 Infinity로 설정하여 해결.