error saying no queryclient set

[modest latch]

My code has a main.jsx and an app.jsx. When I try to move the queryclient initialization into main.jsx so that app.jsx can use it in a useEffect hook, i get an error saying no queryclient set.

in my app.jsx i have a ReactDOM.render call that contains the <App /> which is surrounded by <QueryClientProvider>.

how would i fix this? or does someone have an example of a main.jsx that renders an App that will have access to a QueryClientProvider

[arctic hull]

Please can you show your code?

A reproduction would be ideal, something like a Code Sandbox

[dull lynx]

Something like this should work:

const queryClient = new QueryClient();

function AppWrapper() {
  return (
    <QueryClientProvider client={queryClient}>
      <App />
      <ReactQueryDevtools initialIsOpen />
    </QueryClientProvider>
  );
}


const rootElement = document.getElementById("root");
ReactDOM.createRoot(rootElement).render(<AppWrapper />);

[modest latch]

ill try that

[arctic hull]

Yeah, although OP please be aware that it won't work if you're attempting to interact with the query client in AppWrapper as it's not a descendant of the query client provider which is what I think you might be experiencing

[modest latch]

but it looks similar to what ia lready have

im trying to interact with it in app

[arctic hull]

It's difficult to reason about what you already have if we can't see it. Please can you show us?

[dull lynx]

Basically your problem is that you are trying to access client before it's injected into the react context

[modest latch]

ReactDOM.render(
<Provider store ={store}>
<BrowserRouter>
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>
</BrowserRouter>
</Provider>,
document.getElementById('root'));

thats what i have in main

but when i set it up like that, as opposed to putting the QueryClientProvider in app.jsx, i get the error

[arctic hull]

What is Provider? Where are you defining queryClient?

If you could send a link to a reproduction or the actual code then that'll enable us up help you much quicker

[modest latch]

provider is for redux. and the queryClient is defined in that main.jsx. sorry i dont have a complete sample, its on a work machine. but i can try to set one up later tonight

[arctic hull]

It looks reasonable given what I can see. If you can put together a minimal reproduction that'd be great 🙂

[modest latch]

now that i look at the stack trace it might be related to it trying to use ReactDomServerRenderer