1. React Query Dev Tools ?

React Query를 사용하는 애플리케이션의 디버깅을 도와주는 도구입니다.

query_dev_tools.png

2. React Query Dev Tools 기능

1 ) 쿼리 탐색

모든 쿼리와 해당 상태를 나열합니다. 각 쿼리를 클릭하면 해당 쿼리의 상세 정보를 볼 수 있습니다.

2 ) 쿼리 검사

선택한 쿼리의 상세 정보를 표시합니다. 쿼리 키, 상태, 데이터, 마지막 업데이트 시간 등 다양한 정보를 확인할 수 있습니다.

3 ) 쿼리 조작

선택한 쿼리를 수동으로 무효화하거나 재실행할 수 있습니다. 또한 쿼리 데이터를 콘솔에 로깅하거나, 쿼리를 제거하거나, 전체 쿼리 캐시를 초기화하는 기능도 제공합니다.

4 ) 실시간 상태 표시

현재 진행 중인 쿼리 수, 무효화된 쿼리 수, 캐시된 쿼리 수 등 React Query의 전반적인 상태를 실시간으로 표시합니다.

3. React Query Dev Tools 설치하기

아래 명령어를 실행하여 설치합니다.