본문으로 건너뛰기

DevTools

Preact Query에는 전용 DevTools가 포함되어 있으니, 두 손을 높이 들고 만세를 외쳐 보세요! 🥳

Preact Query 여정을 시작할 때 이 Devtools를 곁에 두고 싶을 것입니다. 이 도구는 Preact Query의 모든 내부 작동 방식을 시각화하는 데 도움이 되며, 곤란한 상황에 처했을 때 디버깅 시간을 몇 시간이나 절약해 줄 가능성이 높습니다!

Chrome, Firefox 및 Edge 사용자를 위한 안내: 브라우저 DevTools에서 직접 TanStack Query를 디버깅할 수 있는 서드 파티 브라우저 확장 프로그램이 제공됩니다. 이러한 확장 프로그램은 프레임워크별 devtools 패키지와 동일한 기능을 제공합니다:

DevTools 설치 및 가져오기​

devtools는 별도로 설치해야 하는 패키지입니다:

npm i @tanstack/preact-query-devtools

or

pnpm add @tanstack/preact-query-devtools

or

yarn add @tanstack/preact-query-devtools

or

bun add @tanstack/preact-query-devtools

다음과 같이 DevTools를 가져올 수 있습니다:

import { PreactQueryDevtools } from '@tanstack/preact-query-devtools'

기본적으로 Preact Query Devtools는 process.env.NODE_ENV === 'development'인 경우에만 번들에 포함되므로 프로덕션 빌드 중에 이를 제외할 필요가 없습니다.

플로팅 모드​

Floating Mode는 DevTools를 앱에 고정된 플로팅 요소로 마운트하고, 화면 모서리에 DevTools를 표시하거나 숨기는 토글을 제공합니다. 이 토글 상태는 localStorage에 저장되며 다시 로드해도 유지됩니다.

다음 코드를 Preact 앱에서 가능한 한 상위에 배치하세요. 페이지 루트에 가까울수록 더 잘 작동합니다!

import { PreactQueryDevtools } from '@tanstack/preact-query-devtools'

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* The rest of your application */}
      <PreactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  )
}

옵션​

  • initialIsOpen: boolean
    • DevTools가 기본적으로 열린 상태가 되게 하려면 이 true를 설정합니다.
  • buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"
    • 기본값은 bottom-right입니다
    • DevTools 패널을 열고 닫는 TanStack 로고의 위치
  • position?: "top" | "bottom" | "left" | "right"
    • 기본값은 bottom입니다
    • Preact Query DevTools 패널의 위치
  • client?: QueryClient,
    • 사용자 지정 QueryClient를 사용하려면 이를 사용합니다. 그렇지 않으면 가장 가까운 context의 항목이 사용됩니다.
  • errorTypes?: { name: string; initializer: (query: Query) => TError}[]
    • 쿼리에서 발생시킬 수 있는 몇 가지 오류를 미리 정의하려면 이를 사용합니다. UI에서 해당 오류가 활성화되면 초기화 함수가 특정 쿼리와 함께 호출됩니다. 반드시 Error를 반환해야 합니다.
  • styleNonce?: string
    • 문서 head에 추가되는 style 태그에 nonce를 전달하려면 이를 사용하세요. 인라인 스타일을 허용하기 위해 Content Security Policy(CSP) nonce를 사용하는 경우 유용합니다.
  • shadowDOMTarget?: ShadowRoot
    • 기본 동작은 DOM 내의 head 태그에 devtool의 스타일을 적용합니다.
    • 이를 사용하여 shadow DOM 대상을 devtools에 전달하면 스타일이 light DOM의 head 태그 내부가 아니라 shadow DOM 내부에 적용됩니다.
  • theme?: "light" | "dark" | "system"
    • 기본값은 system입니다.
    • devtools 패널의 테마를 변경하려면 이를 설정합니다.

임베디드 모드​

임베디드 모드는 개발 도구를 애플리케이션의 고정 요소로 표시하므로, 자체 개발 도구에서 패널을 사용할 수 있습니다.

다음 코드를 Preact 앱에서 가능한 한 상위에 배치하세요. 페이지 루트에 가까울수록 더 잘 작동합니다!

import { useState } from 'preact/hooks'
import { PreactQueryDevtoolsPanel } from '@tanstack/preact-query-devtools'

function App() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <QueryClientProvider client={queryClient}>
      {/* The rest of your application */}
      <button
        onClick={() => setIsOpen(!isOpen)}
      >{`${isOpen ? 'Close' : 'Open'} the devtools panel`}</button>
      {isOpen && <PreactQueryDevtoolsPanel onClose={() => setIsOpen(false)} />}
    </QueryClientProvider>
  )
}

옵션​

  • style?: CSSProperties
    • DevTools 패널의 사용자 지정 스타일
    • 기본값: { height: '500px' }
    • 예제: { height: '100%' }
    • 예제: { height: '100%', width: '100%' }
  • onClose?: () => void
    • DevTools 패널이 닫힐 때 호출되는 콜백 함수
  • client?: QueryClient,
    • 사용자 지정 QueryClient를 사용하려면 이를 사용합니다. 그렇지 않으면 가장 가까운 context의 항목이 사용됩니다.
  • errorTypes?: { name: string; initializer: (query: Query) => TError}[]
    • 쿼리에서 발생시킬 수 있는 몇 가지 오류를 미리 정의하려면 이를 사용합니다. UI에서 해당 오류가 활성화되면 초기화 함수가 특정 쿼리와 함께 호출됩니다. 반드시 Error를 반환해야 합니다.
  • styleNonce?: string
    • 문서 head에 추가되는 style 태그에 nonce를 전달하려면 이를 사용하세요. 인라인 스타일을 허용하기 위해 Content Security Policy(CSP) nonce를 사용하는 경우 유용합니다.
  • shadowDOMTarget?: ShadowRoot
    • 기본 동작은 DOM 내의 head 태그에 devtool의 스타일을 적용합니다.
    • 이를 사용하여 shadow DOM 대상을 devtools에 전달하면 스타일이 light DOM의 head 태그 내부가 아니라 shadow DOM 내부에 적용됩니다.
  • theme?: "light" | "dark" | "system"
    • 기본값은 system입니다.
    • devtools 패널의 테마를 변경하려면 이를 설정합니다.