跳到主要内容

devtools

开发工具

导入开发工具

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

浮动模式

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

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

选项

  • initialIsOpen: Boolean
    • 初始化打开状态
  • panelProps: PropsObject
    • Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.
  • closeButtonProps: PropsObject
    • Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
  • toggleButtonProps: PropsObject
    • Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
  • position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
    • 默认为,bottom-left
    • 显示位置

嵌入模式

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

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

选项

下面配置用来调整样式

  • style: StyleObject
    • The standard React style object used to style a component with inline styles
  • className: string
    • The standard React className property used to style a component with classes

定义 自定义 Hooks

指定返回和错误类型

function useGroups() {
return useQuery<Group[], Error>('groups', fetchGroups)
}