🔎React Query Devtools

• 공식문서
• React Query 좀 더 쉽게 다룰 수 있게 도와주는 전용 devtools

💡환경 세팅하기

1. 설치

// npm 사용하는 경우
npm i @tanstack/react-query-devtools
// yarn 사용하는 경우
yarn add @tanstack/react-query-devtools

2. 상위 파일에서 import (일반적으로 App.js)

import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

3. 실행하기

• import한 파일 가장 하위에 해당 코드 추가

import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 가장 하위에 해당 코드 추가 */}
      <ReactQueryDevtools initialIsOpen={true} />
    </QueryClientProvider>
  )
}

💡사용하기

A : 현재 어플리케이션에서 캐시된 데이터 key
B : 현재 몇개의 컴포넌트에서 이 요소 간직하고 있는지 나타냄
C : 현재 이 요소의 상태 나타냄

• fresh : 신선한 상태(새로운 query 생성돼도 네트워크 통신 X)
• fetching : 네트워크 통신중인 상태
• paused : 쿼리가 일시적으로 멈춘 상태
• stale : 오래된 상태(새로운 query 생성되면 네트워크 통신 발생)

Observers : 관찰하고 있는 컴포넌트 개수
Last Upadated : 마지막으로 업데이트 된 시간
Actions : 수동적으로 눌러서 해당 쿼리에 적용시킴

• Refetch : 쿼리를 새로고침하여 새로운 데이터 가져옴(재요청)
• Invalidate : 캐시된 데이터 무효화, 다음에 해당 쿼리 다시 실행될 때 새로운 데이터 가져옴
• Reset : 새로고침하지 않고 캐시된 데이터 수동으로 초기화
• Remove : 캐시된 데이터 제거
• Trigger loading : 로딩상태 유발
• Trigger error : 에러상태 유발

Data Explorer : 네트워크 통신으로 받아온 데이터 정보
Query Explorer : 옵션 사항들(cacheTime, queryKey ...)