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:
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!
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!
