Help integrating react query
I'm trying to integrate react-query into my React application for data fetching. After setting up QueryClient and wrapping my app inside QueryClientProvider, my the pages wrapped crashes, and it seems I might have an issue with how I've integrated the library. //more code than you have provided. can somebody help me get me up and running?
import {QueryClient, QueryClientProvider, useQuery} from '@tanstack/react-query'
function App() {
const currentUser=useContext(AuthContext);
const {darkMode} =useContext(DarkModeContext)
const queryClient = new QueryClient()
const Layout= ()=>{
return(
<QueryClientProvider client={queryClient}>
<div className={theme-${darkMode ? "dark" : "light"}}>
<Navbar/>
<div style={{display:"flex" }}>
<Leftbar/>
<div style={{flex:6, marginTop:-10}}>
<Outlet/>
</div>
<RightBar/>
</div>
</div>
</QueryClientProvider>
);
};
6 Replies
adverse-sapphire•3y ago
What's the error message?
stormy-goldOP•3y ago
oh sorry so much, Unexpected Application Error!
null is not an object (evaluating 'dispatcher.useEffect')
useEffect@http://localhost:3000/static/js/bundle.js:61638:24
QueryClientProvider@http://localhost:3000/main.fc3ab31394051dd25a0a.hot-update.js:2505:47
renderWithHooks@http://localhost:3000/static/js/bundle.js:37265:31
mountIndeterminateComponent@http://localhost:3000/static/js/bundle.js:40551:32
beginWork$1@http://localhost:3000/static/js/bundle.js:46810:27
performUnitOfWork@http://localhost:3000/static/js/bundle.js:46079:27
workLoopSync@http://localhost:3000/static/js/bundle.js:46002:26
renderRootSync@http://localhost:3000/static/js/bundle.js:45975:23
recoverFromConcurrentError@http://localhost:3000/static/js/bundle.js:45467:38
performSyncWorkOnRoot@http://localhost:3000/static/js/bundle.js:45676:50
performSyncWorkOnRoot@[native code]
flushSyncCallbacks@http://localhost:3000/static/js/bundle.js:33697:34
flushSync@http://localhost:3000/static/js/bundle.js:45771:29
scheduleRefresh@http://localhost:3000/static/js/bundle.js:47124:18
@http://localhost:3000/static/js/bundle.js:49225:36
forEach@[native code]
performReactRefresh@http://localhost:3000/static/js/bundle.js:49217:37
@http://localhost:3000/static/js/bundle.js:10875:36
now the relevant pages are crashing when i wrap the entire application, the entire application crashes. im not sure how i should debug it
adverse-sapphire•3y ago
I'd like to help, but it's hard to know what is wrong with limited information.
Could you reproduce this error in Codesandbox or maybe share your repository?
adverse-sapphire•3y ago
Btw, in the docs the Query Client is created outside the component tree: https://tanstack.com/query/latest/docs/react/quick-start
Quick Start | TanStack Query Docs
This code snippet very briefly illustrates the 3 core concepts of React Query:
Queries
stormy-goldOP•3y ago
i will try some different things, if it dosnt work i will try repoducing the bug, thanks!
fair-rose•3y ago
You could try creating the queryclient outside of the app. Otherwise it gets re created at each app render