equal-aqua•17mo 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•17mo 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•17mo ago

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

generous-apricot•17mo ago

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

equal-aqua•17mo 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

equal-aqua•17mo ago

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

generous-apricot•17mo ago

<Router /> should be inside <Refine> component as a child. This should resolve the issue since the query client is only provided inside <Refine>

equal-aqua•17mo ago

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

afraid-scarlet•17mo ago

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

equal-aqua•17mo ago

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