我目前正在我的项目中使用react query，但是devtools图标没有显示在我的屏幕上。控制台中也没有错误。我目前正在遵循youtube上的教程
下面是我的package.json我也安装了最新的版本。但是我似乎找不到问题。
Package.json
{
"name": "react-query-starter",
"version": "0.1.0",
"private": true,
"dependencies": {
"@tanstack/react-query": "^4.0.10",
"@tanstack/react-query-devtools": "^4.0.10",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"json-server": "^0.16.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"serve-json": "json-server --watch db.json --port 4000"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}App.js
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"
import "./App.css"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
import { HomePage } from "./components/Home.page"
import { RQSuperHeroesPage } from "./components/RQSuperHeroes.page"
import { SuperHeroesPage } from "./components/SuperHeroes.page"
const queryClient = new QueryClient()
function App() {
return (
<QueryClientProvider client={queryClient}>
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/super-heroes">Traditional Super Heroes</Link>
</li>
<li>
<Link to="/rq-super-heroes">RQ Super Heroes</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/super-heroes">
<SuperHeroesPage />
</Route>
<Route path="/rq-super-heroes">
<RQSuperHeroesPage />
</Route>
<Route path="/">
<HomePage />
</Route>
</Switch>
</div>
</Router>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
)
}
export default App
4条答案
按热度按时间mutmk8jj1#
看起来这是一个问题，现在修复了这个测试版：https://github.com/TanStack/query/issues/3916#issuecomment-1213172411
我使用了
yarn add @tanstack/react-query-devtools@4.0.11-beta.0，我知道这是测试版，但现在显示了devtoolszaqlnxep2#
请尝试其他浏览器或检查其是否已更新。如果您正在使用VSCode，请尝试重新启动它。
nukf8bse3#
我们仍在尝试解决devtools和ESM支持的捆绑问题。主要是，像react-scripts v4这样的旧捆绑包会错误地选择错误的构建版本。如果您切换到react-scripts v5（6个多月前推出）或更现代的
vite，一切都会正常工作。我们所有的示例都使用vite，所以您可以看到我们是如何在那里做的。我们最近做了一个测试版，应该解决这个问题，但它仍然有一些问题，我们正在试图找出它在这里：https://github.com/TanStack/query/issues/3882
tl;dr：捆绑很难，很抱歉出现这些问题。
oxiaedzo4#
我也遇到了同样的问题，我无法查看开发工具控制台。下面是我的package.json文件。我不确定它是否与webpack或rollup设置有关，但我找不到任何可能阻止它显示的内容。