[react query] react query 사용시 주의점(invalidateQueries)

react query의 캐싱된 데이터는 invalidateQueries를 통해 refetch 시킬 수 있다. 

When a query i invalidated whit invalidateQueries, tow things happen

- It is marked as stale. This stale state overrides any staleTime configurations being used in useQuery or related hooks
- If the query is currently being rendered via useQuery or related hooks, it will also be refetched in the background

 

나 또한 오래된 값을 갱신시키기 위해 해당 메서드를 사용했는데 올바르게 작동이 되기는커녕 해당 메서드가 포함된 함수를 실행시키자 마자 react query 개발 도구에 있는 모든 query들이 다 사라지는 것이었다. 

초기화되는 현상을 계속 파악한 끝에 queryClient를 정의하고있는 App.tsx를 자꾸 rerendering 시키는 이벤트를 내가 걸고있었던 것이었다..

함수를 실행시킬 때마다 new QueryClient를 provider에 넘겨주고있었으니 모든 데이터가 사라지는게 당연한것이었고 useQuery를 통해 불러오던 것들도 사라져있었던 것이었다.

invalidateQuery가 작동하지 않는게 아니라 애초에 QueryClient의 데이터들을 초기화 하고 있었던것..

uesQueryClient를 사용하고 있었기 때문에 QueryClient문제가 아닐것이라 생각했지만 그 문제가 맞았었다.. 

결국 App.tsx을 rerendering 시키는 함수를 다른곳으로 옮겨서 문제를 해결했다.

다른 프로젝트에서는 잘만 사용했는데 왜 안되나 고민했던 해프닝.. 

그래도 빠르게 알아차려서 다행이다.