robust-apricot
robust-apricot15mo 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.ai15mo 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.ai15mo ago
<@434784410907443210> kapa.ai is still learning and improving, please let us how it did by reacting below
sensitive-blue
sensitive-blue15mo ago
Hey @.martola, any chance there’s a use of useIsAuthenticated hook or Authenticated component out of <Refine> component?
robust-apricot
robust-apricot15mo 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
robust-apricot
robust-apricot15mo ago
I removed the Authenticated component just to see if it gives the error, even without it the error continues
sensitive-blue
sensitive-blue15mo ago
<Router /> should be inside <Refine> component as a child. This should resolve the issue since the query client is only provided inside <Refine>
robust-apricot
robust-apricot15mo ago
same error, i'll take a look at the code
optimistic-gold
optimistic-gold15mo ago
Hello @.martola , if you can provide us a reproducible example, we can help you
robust-apricot
robust-apricot15mo ago
Hi good morning, I got it!!!! I reinstalled the packages and it worked. thanks a lot for helping!