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)
 }