I am currently using react query in my project but the devtools Icon is not showing up anywhere on my screen. There are no errors in the console too. I am currently following a tutorial from youtube
Below is my package.json I have installed the latest versions too. But I can't seem to figure out the problem.
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
