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
rare-sapphire
rare-sapphire2y ago
Hey @.martola, any chance there’s a use of useIsAuthenticated hook or Authenticated component out of <Refine> component?
foreign-sapphire
foreign-sapphire2y 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
foreign-sapphire
foreign-sapphire2y ago
I removed the Authenticated component just to see if it gives the error, even without it the error continues
rare-sapphire
rare-sapphire2y ago
<Router /> should be inside <Refine> component as a child. This should resolve the issue since the query client is only provided inside <Refine>
foreign-sapphire
foreign-sapphire2y ago
same error, i'll take a look at the code
foreign-sapphire
foreign-sapphire2y ago
Hello @.martola , if you can provide us a reproducible example, we can help you
foreign-sapphire
foreign-sapphire2y ago
Hi good morning, I got it!!!! I reinstalled the packages and it worked. thanks a lot for helping!