react-query in module federation

[zgid123]

Hi,

I am using react-query with vite-plugin-federation.

In main app, I config like this

const queryClient = new QueryClient();

const container = document.getElementById('root');

if (!container) {
  // eslint-disable-next-line no-throw-literal
  throw 'Cannot find the root element';
}

const root = createRoot(container);

root.render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <ReactQueryDevtools initialIsOpen={false} />
      <ThemeProvider theme={theme}>
        <AuthProvider>
          <BrowserRouter>
            <App />
          </BrowserRouter>
        </AuthProvider>
      </ThemeProvider>
    </QueryClientProvider>
  </StrictMode>,
);

App component of main app will import the remote app.

At remote App component, I use react-query, but at this moment, it will raise error No QueryClient set, use QueryClientProvider to set one.

function App(): JSX.Element {
  return (
    <Layout>
      <Routes>
        <Route index element={<Overview />} />
      </Routes>
    </Layout>
  );
}

export default App;

Is there a way to share the context with remote App component? I tried to research in the document and couldn't find a solution. Or maybe I missed something from document.

Currently, I add QueryClientProvider inside App component of remote app. But if I do it, when run the remote app alone, there is a QueryClientProvider nested inside QueryClientProvider due to the main.tsx of remote app is config like the main app.

To solve this problem, I duplicate App component, one to serve for module federation and one for running app alone.

But even I duplicate the App component, when running full app (main app and import the remote app via module federation), there will be a QueryClientProvider nested in QueryClientProvider, I still not know if there is any issue if we do that or not. But I guess if I wanna get the cached data from remote app in main app, I cannot do that. If we can share the context, I think no problem with that use case 🤔

[edusdorneles]

Did you find any solution?

[zgid123]

still no, I still create one queryClient per app. I am building an internal library for nodejs and rewrite my app. I will try to find a way to pass the query client instance to the mono app later.

If you can find a way, please share it. When I found a way, I will share it on this thread