[TanStakQuery] 개발 도구(Devtools)

Jeris·2023년 5월 20일

TanStak Query docs translation

목록 보기

4/42

React Query에는 전용 개발 도구가 포함되어 있으므로 손을 흔들며 만세를 외치십시오!🥳

React Query 여정을 시작할 때, 이 개발 도구들을 곁에 두고 싶을 것입니다. 이 도구들은 React Query의 모든 내부 작동을 시각화하는 데 도움이 되며, 문제가 생겼을 때 디버깅 시간을 절약할 수 있습니다!

"현재 개발 도구는 React Native를 지원하지 않습니다. 만약 당신이 우리가 devtools 플랫폼을 독립적으로 만드는 것을 돕고 싶다면, 우리에게 알려주세요!"

"또한 이러한 개발 도구를 사용하여 queries는 관찰할 수 있지만 mutations는 관찰할 수 없습니다"

개발 도구 설치하고 가져오기

개발 도구는 설치해야 하는 별도의 패키지입니다:

$ npm i @tanstack/react-query-devtools
# or
$ pnpm add @tanstack/react-query-devtools
# or
$ yarn add @tanstack/react-query-devtools

다음과 같이 개발 도구를 가져올 수 있습니다:

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

기본적으로 React Query 개발 도구는 process.env.NODE_ENV === 'development'일 때만 번들에 포함되므로 프로덕션 빌드 중에 제외하는 것에 대해 걱정할 필요가 없습니다.

Floating Mode

Floating Mode는 개발 도구를 앱에 고정된 플로팅 요소로 마운트하고 화면 모서리에 토글을 제공하여 개발 도구를 표시하거나 숨길 수 있습니다. 이 토글 상태는 다시 로드할 때마다 localStorage에 저장되고 기억됩니다.

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

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

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

Options

initialIsOpen: Boolean
- 개발 도구가 기본적으로 열려 있도록 하려면 이 값을 true로 설정합니다.
panelProps: PropsObject
- 패널에 props를 추가할 때 사용합니다. 예를 들어 className, style(merge and override default style) 등을 추가할 수 있습니다.
closeButtonProps: PropsObject
- 닫기 버튼에 props를 추가하는 데 사용합니다. 예를 들어 className, style(merge and override default style), onClick(extend default handler) 등을 추가할 수 있습니다.
toggleButtonProps: PropsObject
- 토글 버튼에 props를 추가하는 데 사용합니다. 예를 들어 className, style(merge and override default style), onClick(extend default handler) 등을 추가할 수 있습니다.
position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
- 기본값은 bottom-left입니다.
- 개발자 도구 패널을 열고 닫는 React Query 로고의 위치입니다.
panelPosition?: "top" | "bottom" | "left" | "right"
- 기본값은 bottom입니다.
- React Query 개발 도구 패널의 위치입니다.
context?: React.Context<QueryClient | undefined>
- Custom React Query context를 사용하려면 이 값을 사용합니다. 그렇지 않으면 defaultContext가 사용됩니다.
errorTypes?: { name: string; initializer: (query: Query) => { toString(): string }}
- 이를 사용하여 쿼리에서 트리거될 수 있는 몇 가지 오류를 미리 정의할 수 있습니다. UI에서 해당 오류가 켜지면 이니셜라이저가 (특정 쿼리와 함께) 호출됩니다. 특정 쿼리에서 해당 오류의 존재 여부를 확인할 수 있도록 문자열화할 수 있는 항목을 반환해야 합니다.

Embedded Mode

Embedded Mode는 응용 프로그램에 일반 컴포넌트로 개발 도구를 포함합니다. 그 후 원하는 스타일링을 할 수 있습니다!

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

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* The rest of your application */}
      <ReactQueryDevtoolsPanel style={styles} className={className} />
    </QueryClientProvider>
  )
}

Options

아래 옵션들을 사용하여 개발 도구의 스타일을 지정할 수 있습니다.

style: StyleObject
- 인라인 스타일로 컴포넌트의 스타일을 지정하는 데 사용되는 표준 리액트 스타일 객체입니다.
className: string
- 클래스로 컴포넌트 스타일을 지정하는 데 사용되는 표준 리액트 className 속성입니다.
showCloseButton?: boolean
- 개발 도구 패널에 닫기 버튼을 표시합니다.
closeButtonProps: PropsObject
- 이를 사용하여 닫기 버튼에 props를 추가할 수 있습니다. 예를 들어 className, style(merge and override default style), onClick(extend default handler) 등을 추가할 수 있습니다.

Devtools in production

개발 도구는 프로덕션 빌드에서 제외됩니다. 그러나 프로덕션 빌드에서는 개발 도구를 지연 로드하는 것이 바람직할 수 있습니다:

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/lib/index.prod.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 번들을 다운로드하여 표시합니다.

Modern bundlers

번들러가 exports 패키지 지원하는 경우 다음 import 경로를 사용할 수 있습니다:

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