IT/Tanstack Query V5

Devtools

hanlabong 2023. 12. 24. 01:41
728x90

설치 및 가져오기

npm i @tanstack/react-query-devtools

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

 

기본적으로 개발환경의 번들에만 포함되기 때문에 production 빌드 중에 제외하는 것에 대한 걱정할 필요 X

 

Floating Mode

앱에 고정된 플로팅 요소로 마운트하고 화면 모서리에 개발자 도구 표시하고 제거할 수 있는 토글 제공

토글 상태는 다시 로드할 때마다 localStorage에 저장됨

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

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

아래 표시된 토글 버튼을 누르면 아래와 같이 나옴
토글 상태 strage 저장

옵션

  • initialIsOpen: Boolean
    • true면 기본적으로 열림
  • buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
    • react query 로고 위치
  • position?: top | bottom | left | right
    • react query devtools 패널 위치
  • client?: QeuryClient
    • 사용자 정의 QueryClient를 사용할 때 사용
  • errorType?: { anme: string; initializer: (query: Query) => TError }
    • 쿼리에서 발생할 수 있는 일부 오류 미리 정의
    • 해당 오류가 UI에서 전환되면 특정 쿼리와 함께 초기화 프로그램 호출
    • 오류를 반환해야 함
  • styleNonce?: string
    • 문서 헤드에 추가된 스타일 태그에 nonce를 전달
    • 인라인 스타일을 허용하기 위해 CSP nonce를 사용하는 경우 유용

Devtools in Production

Devtool은 프로덕션 빌드에서 제외된다. 그러나 프로덕션 환경에서는 개발 도구를 지연 로드사는 것이 바람직 할 수 있다.

import * as React from 'react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { Example } from './Example'

const queryClient = new QueryClient()

const ReactQueryDevtoolsProduction = React.lazy(() =>
  import('@tanstack/react-query-devtools/build/modern/production.js').then(
    (d) => ({
      default: d.ReactQueryDevtools,
    }),
  ),
)

function App() {
  const [showDevtools, setShowDevtools] = React.useState(false)

  React.useEffect(() => {
    // @ts-ignore
    window.toggleDevtools = () => setShowDevtools((old) => !old)
  }, [])

  return (
    <QueryClientProvider client={queryClient}>
      <Example />
      <ReactQueryDevtools initialIsOpen />
      {showDevtools && (
        <React.Suspense fallback={null}>
          <ReactQueryDevtoolsProduction />
        </React.Suspense>
      )}
    </QueryClientProvider>
  )
}

export default App

 

window.toggleDevtools()를 호출하면 devtools 번들을 다운로드해 표시함

 

최신 번들러

번들러가 패키지 내보내기를 지원하는 경우 다음 경로 사용 가능

const ReactQueryDevtoolsProduction = React.lazy(() =>
  import('@tanstack/react-query-devtools/production').then((d) => ({
    default: d.ReactQueryDevtools,
  })),
)

TypeSctipt의 경우 최소한 v4.7이 필요한 tsconfig에 moduleResolution: "nodenext"를 추가해야 함

728x90