Microfrontend sharing react-query QueryClientProvider throws No QueryClient set error

[scottdickerson]

We're trying to share a common react-query provider across our MFEs and running into some trouble with our useQueries hooks.

Our goal is to have a sharable wrapper component packaged in a common MFE that any downstream MFE can use to pickup default QueryClient settings. Here's an example:

export const ReactQueryWrapper = ({
  children,
  isDebugEnabled,
  ...queryClientProps
}: PropsWithChildren<ReactQueryWrapperProps>) => {   
new QueryClient(
        {
          defaultOptions: {
            queries: {
              staleTime: Infinity,
              cacheTime: 0,
              retry: false,
              refetchOnWindowFocus: false
            }
          }
        },
    );
 
  return (
    <QueryClientProvider client={queryClient} contextSharing>
      {isDebugEnabled ? (
        <ReactQueryDevtools initialIsOpen={false} panelProps={{ className: devToolsCodeStyle }} />
      ) : null}
      {children}
    </QueryClientProvider>
)
}

If we have children within our original MFE with useQueries they work fine. However if consumer MFEs try and use this shared component within their MFE, their useQueries hooks fail with this error:

Uncaught (in promise) Error: No QueryClient set, use QueryClientProvider to set one
    at useQueryClient (QueryClientProvider.js:26:1)
    at useQueries (useQueries.js:11:1)
    at LicensesPanel (licenses-panel.tsx:19:1)

According to the debugger, the QueryClientProvider render code is not triggered before the useQueryClient hook runs, which means that contextSharing is false. If I force contextSharing to true within the debug console, the consumer MFE actually works.

Is there an example repo anywhere of how the contextSharing true is supposed to work for MFEs sharing a ReactQueryProvider context?

[scottdickerson]

I was able to fix this by forcing both MFEs to use the same version of react-query

 const config: ModuleFederationPluginOptions = {
    name: userConfig.moduleName,
    filename: 'remoteEntry.js',
    remotes: getRemotes(userConfig),
    exposes: userConfig.exposes,
    shared: {
      ...packages.dependencies,
      react: {
        singleton: true,
        requiredVersion: '>= 16.14.0',
      },
      'react-dom': {
        singleton: true,
        requiredVersion: '>= 16.14.0',
      },
      'react-query': {
        singleton: true,
        requiredVersion: '>= 3.39.1',
      },
    },
  };

[sahibjotsaggu]

@scottdickerson Hey! We were also running into this issue and using the same version of react-query for the host and remote MFEs seemed to work but it looks like the contextSharing prop doesn't actually do what we think it should do.. If I remove the contextSharing prop, the remote MFE still works as expected (uses the shared cache from the host).

Have you tried removing the contextSharing prop and seeing if your consumer MFEs still work?

[cmacdonnacha]

Hey @sahibjotsaggu

What solution did you end up going with?

[danmatlam]

I have this shared repo to reprodce
@danmatlam/store