using RQ across multiple packages

[vjuux]

Good day RQ community, I'm experiencing missing QueryClient error Error: No QueryClient set, use QueryClientProvider to set one ... when using RQ across two packages via a custom provider.

I have two packages, Main & Child where Child is installing Main as dependency and consuming a custom provider exported by Main like shown below.

export const MyCustomProvider = ({ children }) =>
    <QueryClientProvider client={queryClient}>
      <ReactQueryDevtools position='bottom-right'/>
      <I18nextProvider i18n={i18n}>
         <MuiThemeProvider theme={theme}>
           {children}
         </MuiThemeProvider>
      </I18nextProvider>
    </QueryClientProvider>

I'm getting this error when accessing a route specified in the Child package that is using useQuery. And everything is working when the QueryClientProvider is duplicated in the Child package directly like so. Note that the ReactQueryDevtools is visible in this case even though its provided in Main

<QueryClientProvider client={queryClient}>
   <MyCustomProvider>
   </MyCustomProvider>
</QueryClientProvider>

any hint is much appreciated 🙏

[vjuux]

@TkDodo Could you please share your thoughts on this, you have a lot of valuable knowledge on this project 🥺

[TkDodo]

it looks like you're having two version of react-query or so due to consuming it as a dependency. You can try the contextSharing boolean as described here: https://react-query.tanstack.com/reference/QueryClientProvider or maybe change react-query to be a peerDependency of your Child package. I'm mainly guessing here, sorry.