Stuck at Error: No QueryClient set, use QueryClientProvider to set one
Hey guys,
Thanks first of all for this great open source project. Really appreciate it.
I am playing around with refine and trying to implement after login a call to get my authenticated user by implementing a custom call.
App.ts (wrapped in refine with all configurations working for crud)
<Route
element={
<Authenticated>
<ThemedLayout Header={Header}>
{withUserPermission(<Outlet />)}
</ThemedLayout>
</Authenticated>
}
>
<Route path="*" element={<ErrorComponent />} />
</Route>
withUserPermission:
export const withUserPermission = (children: JSX.Element) => {
const apiUrl = useApiUrl();
const { data, isLoading } = useCustom<any>({
url:
${apiUrl}/me,
method: "get",
});
const [canView, setCanView] = useState(false);
const [user, setUser] = useState(null);
useEffect(() => {
console.log(data);
}, [data]);
useEffect(() => {
console.log("user", user);
}, [user]);
if (user) return <div>Authenticated</div>;
else {
return <div>Not authenticated</div>;
}
};
I always get the error in the console and it breaks:
Uncaught Error: No QueryClient set, use QueryClientProvider to set one
at useQueryClient (QueryClientProvider.tsx:49:5)
at lt (index.ts:4:25)
at Ot (index.ts:105:33)
at J (index.ts:67:38)
at Cn (useCustom.ts:109:36)
at withUserPermission (withUserPermission.tsx:10:31)
at App (App.tsx:76:26)
at renderWithHooks (react-dom.development.js:16305:18)
at mountIndeterminateComponent (react-dom.development.js:20074:13)
at beginWork (react-dom.development.js:21587:16)
Thanks a lot in advance!5 Replies
Hi @thejorge4666. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
It seems like you're encountering an error related to the
QueryClient from react-query. To fix this issue, you need to wrap your application with the QueryClientProvider component.
Unfortunately, I don't have the exact code for your use case in the provided extracts. However, I can guide you on how to set up the QueryClientProvider.
First, you need to import the necessary components from react-query:
Next, create a QueryClient instance:
Finally, wrap your application with the QueryClientProvider component and pass the queryClient instance as a prop:
Make sure to wrap your entire application with the QueryClientProvider, so that the useCustom hook can access the QueryClient instance.
For more information on QueryClientProvider, you can refer to the official react-query documentation (https://react-query.tanstack.com/guides/quick-start).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------TanStack Query | React Query, Solid Query, Svelte Query, Vue Query
Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue
<@897927276304416769> kapa.ai is still learning and improving, please let us how it did by reacting below
continuing-cyan•16mo ago
let change
withUserPermission to react component
start with capital name = WithUserPermission
after that you can use like this <WithUserPermission><Outlet></WithUserPermission>
but currently WithUserPermissionnot returns children, you can if you want
i believe this will fix. if not, we can debug moresensitive-blue•16mo ago
thank you