DevTools

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

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

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

Chrome용 DevTools

Firefox용 DevTools

Edge용 DevTools

컴포넌트 기반 DevTools(Vue 3)

전용 패키지를 사용하여 DevTools 컴포넌트를 페이지에 직접 통합할 수 있습니다. 컴포넌트 기반 DevTools는 프레임워크에 독립적인 구현을 사용하며 항상 최신 상태로 유지됩니다.

DevTools 컴포넌트는 별도로 설치해야 하는 패키지입니다:

npm i @tanstack/vue-query-devtools

pnpm add @tanstack/vue-query-devtools

yarn add @tanstack/vue-query-devtools

bun add @tanstack/vue-query-devtools

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

플로팅 모드

Devtools는 앱에 고정된 부동 요소로 마운트되며, 화면 모서리에 Devtools를 표시하고 숨기는 토글을 제공합니다. 이 토글 상태는 localStorage에 저장되어 다시 로드한 후에도 유지됩니다.

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

<script setup>
import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
</script>

<template>
  <h1>The app!</h1>
  <VueQueryDevtools />
</template>

옵션

initialIsOpen: boolean
- 개발자 도구가 기본적으로 열린 상태가 되도록 하려면 이 true를 설정하세요.
buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"
- 기본값은 bottom-right입니다.
- devtools 패널을 열고 닫는 TanStack 로고의 위치입니다.
position?: "top" | "bottom" | "left" | "right"
- 기본값은 bottom입니다.
- Vue Query DevTools 패널의 위치입니다.
client?: QueryClient
- 사용자 지정 QueryClient를 사용하려면 이를 사용합니다. 그렇지 않으면 가장 가까운 context의 항목이 사용됩니다.
errorTypes?: { name: string; initializer: (query: Query) => TError}[]
- 이를 사용하여 쿼리에서 발생시킬 수 있는 몇 가지 오류를 미리 정의합니다. UI에서 해당 오류가 활성화되면 initializer가 특정 쿼리와 함께 호출됩니다. 반드시 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 패널의 테마를 변경하려면 이를 설정합니다.

임베디드 모드

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

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

<script setup>
import { ref } from 'vue'
import { VueQueryDevtoolsPanel } from '@tanstack/vue-query-devtools'

const isOpen = ref(false)
</script>

<template>
  <h1>The app!</h1>
  <button @click="isOpen = !isOpen">
    {{ isOpen ? 'Close' : 'Open' }} the devtools panel
  </button>
  <VueQueryDevtoolsPanel v-if="isOpen" :onClose="() => (isOpen = false)" />
</template>

옵션

style?: Partial<CSSStyleDeclaration>
- 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 패널의 테마를 변경하려면 이를 설정합니다.

기존 DevTools

Vue Query는 공식 Vue devtools와 원활하게 통합되어 사용자 정의 검사기와 타임라인 이벤트를 추가합니다. 기본적으로 Devtool 코드는 프로덕션 번들에서 트리 셰이킹으로 제거됩니다.

작동하게 하려면 플러그인 옵션에서 활성화하기만 하면 됩니다:

app.use(VueQueryPlugin, {
  enableDevtoolsV6Plugin: true,
})

devtools의 v6 및 v7 버전을 모두 지원합니다.

컴포넌트 기반 DevTools(Vue 3)​

플로팅 모드​

옵션​

임베디드 모드​

옵션​

기존 DevTools​

컴포넌트 기반 DevTools(Vue 3)

플로팅 모드

옵션

임베디드 모드

옵션

기존 DevTools