wise-white

error saying no queryclient set

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

13 Replies

adverse-sapphire•3y ago

Please can you show your code? A reproduction would be ideal, something like a Code Sandbox

extended-yellow•3y ago

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 />);

const queryClient = new QueryClient();

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


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

wise-whiteOP•3y ago

ill try that

adverse-sapphire•3y ago

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

wise-whiteOP•3y ago

but it looks similar to what ia lready have im trying to interact with it in app

adverse-sapphire•3y ago

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

extended-yellow•3y ago

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

wise-whiteOP•3y ago

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

adverse-sapphire•3y ago

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

wise-whiteOP•3y ago

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

adverse-sapphire•3y ago

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

wise-whiteOP•3y ago

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

adverse-sapphire•3y ago

Are you pre-rendering on the server with something like Next.js?

Gaming

Programming

error saying no queryclient set

Did you find this page helpful?