从Gatsby迁移到Vite后React Query Devtools无法渲染问题排查

针对你从Gatsby迁移到Vite后React Query Devtools不显示的问题，结合你的代码和版本信息，可尝试以下排查步骤：

• 强制开启Devtools并确认环境
  React Query Devtools默认仅在开发环境启用，Vite通过import.meta.env.DEV判断环境。可强制开启Devtools验证是否是环境判断问题：

  <ReactQueryDevtools initialIsOpen={false} enabled={true} />
  

• 重构QueryClient单例实现
  你当前的类式单例可能存在初始化时机或实例共享的潜在问题，改用更简洁的函数式单例试试：
  修改queries.jsx：

  import { QueryClient } from '@tanstack/react-query';
  
  let queryClientInstance = null;
  
  export const getQueryClient = () => {
    if (!queryClientInstance) {
      queryClientInstance = new QueryClient({
        defaultOptions: {
          queries: {
            staleTime: 1000 * 20,
          },
        },
      });
    }
    return queryClientInstance;
  };
  

  在app.jsx中引用：

  import { getQueryClient } from './utils/queries';
  // ...
  <QueryClientProvider client={getQueryClient()}>
  

• 调整Devtools在Provider中的位置
  确保Devtools直接处于QueryClientProvider的包裹范围内，可尝试将其移到Provider的最外层子节点：

  <QueryClientProvider client={ReactQueryClient.instance()}>
    <ReactQueryDevtools initialIsOpen={false} />
    <SnackbarProvider>
      {/* 原有内容 */}
    </SnackbarProvider>
  </QueryClientProvider>
  

• 排查Vite的Tree-shaking配置
  Vite默认的Tree-shaking可能误删Devtools代码，可在vite.config.js中强制包含该依赖：

  export default {
    optimizeDeps: {
      include: ['@tanstack/react-query-devtools'],
    },
  };
  

• 清除Vite缓存并重启服务
  执行npm run dev -- --force，或手动删除node_modules/.vite目录后重启开发服务，排除缓存导致的依赖加载异常。

内容的提问来源于stack exchange，提问作者michecode