adverse-sapphire
adverse-sapphire14mo ago

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
kapa.ai
kapa.ai14mo ago
Hi @thejorge4666. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai14mo ago
---------------------- 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:
import { QueryClient, QueryClientProvider } from 'react-query';
import { QueryClient, QueryClientProvider } from 'react-query';
Next, create a 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:
<QueryClientProvider client={queryClient}>
{/* Your application code */}
</QueryClientProvider>
<QueryClientProvider client={queryClient}>
{/* Your application code */}
</QueryClientProvider>
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
kapa.ai
kapa.ai14mo ago
<@897927276304416769> kapa.ai is still learning and improving, please let us how it did by reacting below
foreign-sapphire
foreign-sapphire14mo 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 more
adverse-sapphire
adverse-sapphire14mo ago
thank you