본문으로 건너뛰기

DevTools

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

DevTools 설치 및 가져오기​

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

npm i @tanstack/svelte-query-devtools

or

pnpm add @tanstack/svelte-query-devtools

or

yarn add @tanstack/svelte-query-devtools

or

bun add @tanstack/svelte-query-devtools

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

import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'

플로팅 모드​

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

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

<script>
  import { QueryClientProvider } from '@tanstack/svelte-query'
  import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
</script>

<QueryClientProvider client={queryClient}>
  {/* The rest of your application */}
  <SvelteQueryDevtools />
</QueryClientProvider>

옵션​

  • initialIsOpen: boolean
    • DevTools가 기본적으로 열린 상태가 되게 하려면 이 true를 설정합니다.
  • buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"
    • 기본값은 bottom-right입니다
    • DevTools 패널을 열고 닫는 TanStack 로고의 위치
    • relative이면 버튼은 DevTools를 렌더링하는 위치에 배치됩니다.
  • position?: "top" | "bottom" | "left" | "right"
    • 기본값은 bottom입니다
    • Svelte 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 내부에 적용됩니다.