eastern-cyan
eastern-cyan2y ago

Error after upgrade to v4: Uncaught Error: No QueryClient set, use QueryClientProvider to set one

Hello everything is fine? by the stack trace the error is in the method: useIsAuthenticated, I am using only the isLogin method, all deprecated dependencies have been updated.
9 Replies
kapa.ai
kapa.ai2y ago
Hey @.martola! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave: ---------------------- It seems like you're encountering an error related to the QueryClient after upgrading to v4. To resolve this issue, you need to wrap your application with the QueryClientProvider component. This component is required for using react-query hooks, such as useIsAuthenticated. First, make sure you have the @tanstack/react-query package installed, as mentioned in the migration guide (https://refine.dev/docs/migration-guide/3x-to-4x):
npm install @tanstack/react-query
npm install @tanstack/react-query
Then, import the QueryClient and QueryClientProvider from the @tanstack/react-query package:
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
Create a new QueryClient instance:
const queryClient = new QueryClient();
const queryClient = new QueryClient();
Finally, wrap your application with the QueryClientProvider component and pass the queryClient instance as a prop:
const App: React.FC = () => (
<QueryClientProvider client={queryClient}>
{/* Your application components */}
</QueryClientProvider>
);
const App: React.FC = () => (
<QueryClientProvider client={queryClient}>
{/* Your application components */}
</QueryClientProvider>
);
This should resolve the error you're encountering with the useIsAuthenticated hook. ----------------------
kapa.ai
kapa.ai2y ago
<@434784410907443210> kapa.ai is still learning and improving, please let us how it did by reacting below
dependent-tan
dependent-tan2y ago
Hey @.martola, any chance there’s a use of useIsAuthenticated hook or Authenticated component out of <Refine> component?
eastern-cyan
eastern-cyan2y ago
i only use the Authenticated component but i only import it inside the RefineSnackbarProvider, after implement QueryClientProvider it even loads the interface for a few milliseconds and disappears with the exact same error
No description
eastern-cyan
eastern-cyan2y ago
I removed the Authenticated component just to see if it gives the error, even without it the error continues
dependent-tan
dependent-tan2y ago
<Router /> should be inside <Refine> component as a child. This should resolve the issue since the query client is only provided inside <Refine>
eastern-cyan
eastern-cyan2y ago
same error, i'll take a look at the code
rising-crimson
rising-crimson2y ago
Hello @.martola , if you can provide us a reproducible example, we can help you
eastern-cyan
eastern-cyan2y ago
Hi good morning, I got it!!!! I reinstalled the packages and it worked. thanks a lot for helping!