What is the right way to use react-query in Microfrontends made using Module federation?

[bw-kshitij-vengurlekar]

We have a 'host' app which is a client side rendered react application

Clicking on the side navigation in the 'host' loads the respective micro frontend which are federated modules

Now when I federate a module from a remote, Should the federated module have its own QueryClientProvider or should it use the QueryClientProvider of the host?

[TkDodo]

depends on what you want. should data be shared between them or now? If so, are they really "microfrontends", as they are not isolated? What if two write to the same cache entry by using the same key...

[TkDodo]

Should the federated module have its own QueryClientProvider

sorry, to reiterate: Yes, they need their own QueryClientProvider, but what client you put inside that Provider (a new one or a shared one) is the real question.

[debo07]

Hi @TkDodo, we are looking for a solution or ideal approach for a scenario.

I understand that micro-frontends should be isolated and shall not share data/state. If I understood correctly, you are suggesting to use something like below in host app, where <ExposedComponent /> is exposed from remote micro-frontend!

<QueryClientProvider client={hostQueryClient}>
     <OtherComponents />
     <ExposedComponent />
    <ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>

where is wrapped by it's own QueryClientProvider with it's own queryClient

/* ExposedComponent */
// In the remote frontend, remoteQueryClient will be initialized separately which will be passed.
<QueryClientProvider client={remoteQueryClient}>
    <div>This is the exposed component</div>
    <ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>

This is fine, when the whole component is exposed from micro-frontend.

---

I am looking for a solution in another scenario, where there is a remote micro-frontend app which exposes some functions/utils and that function needs to be consumed by Host application or in any other micro-frontends. How do you suggest to achieve that?

e.g.
MFE1 --> holds functions/utils(e.g. getLoggedInAdmin) which will make API call to get some data --> wanting to use react-query here for the API call.

Host App or MFE2 --> will use the exposed function getLoggedInAdmin (this call is required at multiple micro-frontends which has their own QueryClientProvider with their queryClient)

So, how do I use react-query just for getLoggedInAdmin or any other utils in the MFE-1 which makes API call?

Thank you!