One query client in different provider
react-query 3.34.8
Hi. I have and two microfrontend components called Modal and Drawer.
They both have own QueryProvider with same query client, but when i fetch data inside modal and then try to get it inside drawer i got this object {
"dataUpdateCount": 0,
"dataUpdatedAt": 0,
"error": null,
"errorUpdateCount": 0,
"errorUpdatedAt": 0,
"fetchFailureCount": 0,
"fetchMeta": null,
"isFetching": false,
"isInvalidated": false,
"isPaused": false,
"status": "idle"
}
but i see data with this key inside getQueryCache
3 Replies
adverse-sapphire•4y ago
Hi could you provide a minimal reproduction sandbox?
Not sure why you need 2 providers though
mute-goldOP•4y ago
adverse-sapphire•4y ago
Ok. I think the problem is not related to having 2 QueryProviders. You can reproduce the problem with only one.
In useGetData, the use of
client.getQueryData(["words", "1234"]); does not add an observer to the query. So when the query changes from loading to success, Second is not re-rendered and thus data remains undefined from its PoV.
In useGetData, you can re-use useQuery(["words", "1234"], findWords); to add another observer to the query which would trigger a re-render of Second whenever needed.
See modified sandbox here
https://codesandbox.io/s/react-query-autocomplete-forked-le0h7k?file=/src/App.js