foreign-sapphire•2y 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•2y 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•2y ago

<@434784410907443210> kapa.ai is still learning and improving, please let us how it did by reacting below

rare-sapphire•2y ago

Hey @.martola, any chance there’s a use of useIsAuthenticated hook or Authenticated component out of <Refine> component?

foreign-sapphire•2y 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

foreign-sapphire•2y ago

I removed the Authenticated component just to see if it gives the error, even without it the error continues

rare-sapphire•2y 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•2y ago

same error, i'll take a look at the code

foreign-sapphire•2y ago

Hello @.martola , if you can provide us a reproducible example, we can help you

foreign-sapphire•2y ago

Hi good morning, I got it!!!! I reinstalled the packages and it worked. thanks a lot for helping!