useQuery inside modal

[chandlervdw]

I have a modal that gets attached inside my <div id="root" /> which contains my app (wrapped in QueryClientProvider). But I get the following error when that modal gets mounted/attached:

No QueryClient set, use QueryClientProvider to set one

I've got other useQuery() hooks working throughout the app but not in this modal. What am I missing here?

[TkDodo]

Is the modal still part of the react component tree that contains the Provider? You can inspect that in the react devtools

[AlexEscalante]

I just ran into this issue using Ionic 5 modal. I had to enclose my modal content with another provider and it's now working. I set contextSharing={true}. Would this be OK?

[TkDodo]

If you create a second provider, you likely get a second cache (unless you forwarded the outer one?), so queries are not shared...

[AlexEscalante]

I was afraid something like that might happen. I will keep looking!

[AlexEscalante]

I found that Ionic 5 has this known bug which puts the modal outside the app tree, making the context provider unavailable. It's fixed in version 6. Thanks for your help!