T
TanStack•3y ago
yammering-amber

React Query not sharing context correctly in lerna monorepo

I am currently building an internal component library. This library contains a Header and Footer component which both uses the useQuery hook. However, this package is handled by Lerna in a mono repo setup. So my Remix app imports the Header and Footer from the package named "components". Inside the Remix app there is the React Query context provider. like so: <QueryClientProvider client={queryClient}> <Hydrate state={dehydratedState}> <Layout> <GoogleReCaptchaProvider reCaptchaKey={ENV.RECAPTCHA_SITE_KEY} language="nl" > <Outlet /> </GoogleReCaptchaProvider> </Layout> </Hydrate> </QueryClientProvider> </RootContext.Provider> For some reason react-query fails with the following: Error: No QueryClient set, use QueryClientProvider to set one When I move the Header and Footer component back to the remix app itself (without being a separate lerna package) it just works. To me this looks like React Query somehow isn't able to share the context with other packages. Or I am making a huge mistake. If possible, could anyone eleborate more on this for a possible fix?
4 Replies
yammering-amber
yammering-amberOP•3y ago
Github query: https://stackoverflow.com/questions/77153109/how-to-share-context-between-lerna-packages-with-react-and-tanstack-react-query Public repository: https://github.com/kevinvugts/lerna-react-query-context/tree/main
Stack Overflow
How to share context between Lerna packages with React and @tanstac...
In my monorepo built with Lerna, I have two packages: app and components General information The app package is a clean install of a Remix Run app. The components package is a simple component libr...
GitHub
GitHub - kevinvugts/lerna-react-query-context: Demo environment to ...
Demo environment to showcase issue with Lerna, Context and react-query - GitHub - kevinvugts/lerna-react-query-context: Demo environment to showcase issue with Lerna, Context and react-query
multiple-amethyst
multiple-amethyst•3y ago
Where do I answer this question now - you've asked it like 4 times... Can't say without running it and don't have the time right now, but I'm pretty sure you just have two versions of RQ in node_modules I mean does each package get its own node_modules? If yes then you have two different react contexts and they don't see each other When you create your own context it works differently because you don't install that multiple times
yammering-amber
yammering-amberOP•3y ago
can you run the example from the provided github source? You'll see there is just 1 single version of @tanstack/react-query and react as well Lerna creates 1 single node_modules at the root of the folder and only different versions will be mentioned in the packages. As I am using peer deps this won't be the case
multiple-amethyst
multiple-amethyst•3y ago
there's nothing special that we're doing. it's just: 
export const QueryClientContext = React.createContext<QueryClient | undefined>(
  undefined,
)

export const useQueryClient = (queryClient?: QueryClient) => {
  const client = React.useContext(QueryClientContext)

  if (queryClient) {
    return queryClient
  }

  if (!client) {
    throw new Error('No QueryClient set, use QueryClientProvider to set one')
  }

  return client
}
export const QueryClientContext = React.createContext<QueryClient | undefined>(
  undefined,
)

export const useQueryClient = (queryClient?: QueryClient) => {
  const client = React.useContext(QueryClientContext)

  if (queryClient) {
    return queryClient
  }

  if (!client) {
    throw new Error('No QueryClient set, use QueryClientProvider to set one')
  }

  return client
}
and the QueryClientProvider is a context provider so with that, I would say that any 3rd party lib that uses react context would have the same issue you can try by adding another lib, e.g. redux and have the provider be in the app, and then useSelector in your Button component. If that fails as well, we can rule out react-query as a problem

Did you find this page helpful?