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
evident-indigo•2y ago
let change
withUserPermission
to react component
start with capital name = WithUserPermission
after that you can use like this <WithUserPermission><Outlet></WithUserPermission>
but currently WithUserPermission
not returns children, you can if you want
i believe this will fix. if not, we can debug moreoptimistic-gold•2y ago
thank you