vite + react query devtools not working
I'm trying to get the react query devtools to show up in my vite app, but I'm seriously struggling. with a simple app like this:
function App() {
return (
<>
<QueryClientProvider client={queryClient}>
<ReactQueryDevtools
initialIsOpen={true}
/>
</QueryClientProvider>
</>
);
}
i keep getting Uncaught Error: No QueryClient set, use QueryClientProvider to set one ... The above error occurred in the <ReactQueryDevtools> component
Any idea what might be going on?
13 Replies
generous-apricot•3y ago
What do your imports look like and what does queryClient look like
genetic-orangeOP•3y ago
import queryClient from "./lib/queryClient";
import { QueryClientProvider } from "@tanstack/react-query";
// lib/queryClient
import { QueryClient } from "@tanstack/react-query";
const queryClient = new QueryClient();
export default queryClient;
generous-apricot•3y ago
Are your devtools on the same version as main package? Sorry I don't have any other ideas
genetic-orangeOP•3y ago
"@tanstack/react-query": "^5.8.4",
"@tanstack/react-query-devtools": "^5.8.4",
yep! no worries appreciate the help
deep-jade•3y ago
Is the
ReactQueryDevTools import from @tanstack/react-query-devtools? My assumption is similar to Heartless' because we've seen the issue be caused by devs importing mismatching lib versions
Maybe the export default is an issue? What happens if you change it to import { queryClient } from "./lib/queryClient"; and the lib file becomes export const queryClient = new QueryClient()?
Scratch that, just did what you have with a default export in a codesandbox and it works finegenerous-apricot•3y ago
What drives me up the wall is when I copy paste useQuery or something between files and the IDE auto imports it from some stupid place like or something. Always loses me a good 10 minutes when it breaks everything and I don't notice it.
deep-jade•3y ago
We had that with Blueprint. Pretty sure we were able to add an auto/import suggest ignore config?
"typescript.preferences.autoImportFileExcludePatterns": ["./node_modules/@blueprintjs/**/*"]generous-apricot•3y ago
Oh nice thanks, didn't even think there would be a solution for that. I'll give it a go
deep-jade•3y ago
As far as NeonCop's original question goes, I forked the codesandbox example found here https://tanstack.com/query/latest/docs/react/examples/react/basic and updated it to match the code snippets from above (such as
import queryClient from './queryClient'). Not sure there's much more help we can provide without seeing more of your code or a codesandbox of your ownReact Query Basic Example | TanStack Query Docs
An example showing how to implement Basic in React Query
correct-apricot•3y ago
Maybe we can extend devtools by checking versions?
genetic-orangeOP•3y ago
https://codesandbox.io/p/sandbox/vite-react-rq-devtools-p5mgsg
interesting seems to work in this minimal example here, must be something about my setup will investigate further... perhaps its not playing nicely with tanstack router
or maybe its bun
deep-jade•3y ago
Not that this will be helpful, but we accidentally started on RQ v3 because we didn't notice the rename to
@tanstack but I just updated us to v5 tonight and devtools works for me. I'm using yarn and vite
(using react-router too, not tanstack router)genetic-orangeOP•3y ago
yep im pretty sure it was bun, i started it fresh using just the normal runtime instead of running dev with bunx --bun vite and it seems to be working now