Devtools配置

为了方便对React Query进行的查询和缓存数据进行调试，React Query提供了一套非常好用的调试工具。这套调试工具被封装在react-query/devtools包中，但这个包并不需要独立安装，在把React Query安装的项目的时候，这个调试工具就已经被附带一并安装好了。

所以要在项目开发过程中使用React Query提供的调试工具，只需要在项目中引入它，再找一个地方把它放入页面即可。

调试工具在页面上的展示有两种模式，一种是浮动模式，一种是嵌入模式。但是不管使用哪种模式，调试工具组件在应用中的位置，应该越靠近QueryClientProvider标签越好。如果只想在某一个页面中使用调试工具，那么调试工具标签应该尽可能的放置到页面的根组件下。

在浮动模式中，React Query会在页面的一个角落里提供一个图标来供切换调试工具的显示，而展开后的调试工具也将附着在窗口的下半部分。在应用中使用浮动模式需要在项目中引入ReactQueryDevtools，并像以下示例这样将其放入项目的组件树中。

import { QueryClientProvider, QueryClient } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 这里放置应用的其他部分 */}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

在上面这个示例中可以看到ReactQueryDevtools标签使用了一个属性initialIsOpen，除了这个属性以外，ReactQueryDevtools还提供了其他若干常用的选项。

• initialIsOpen，设定为true的时候表示在页面刚加载好的时候，调试工具面板是开启的状态。
• position，设定用于控制调试工具面板开关在页面上放置的位置，默认为"bottom-left"，除此之外还可以设置为"top-left"、"top-right"、"bottom-right"。

嵌入模式则不太一样，在嵌入模式中，调试工具面板是作为应用中的一个正常组件出现的，而且会在页面指定位置始终存在和展示。嵌入模式需要引入的是ReactQueryDevtoolsPanel标签。但是在大部分应用中，我们可能使用浮动模式的调试工具会更多一些，所以如果有需要使用嵌入模式调试工具的时候，可以直接参考React Query的文档来进行更详细的配置。