Using react-query in external package leads to "No QueryClient set" error even though QueryClientProvider is used in index.js

Question

I try to use hooks from an self developed package that uses useQuery within a create-react-app application.

This is my scenario: I am developing two npm projects: 'Core' and 'Demo'. Core contains functions, hooks and components that I'd like to use in other applications (like Demo which is a CRA). Some hooks contain useQuery (react-query). Unfortunately, when using this hooks in other applications like Demo, I always get the error message "No QueryClient set, use QueryClientProvider to set one" even though I set a QueryClientProvider.

Is there any configuration I have to set within Core to make the desired behaviour work (e.g. that the used hook is placed within the application context)? Do I have to build the package as a specific module? Or is it possible to pass the application's QueryClient to the custom hooks of Core?

Here's some code to show my attempt:

Core/hooks/useHookWithUseQuery.js

export function useHookWithUseQuery() {
  const queryClient = useQueryClient();
  const { data } = useQuery(
    "QUERY_KEY",
    getDataFn
  );

  const invalidateData = () => {
    queryClient.invalidateQueries("QUERY_KEY");
  };

  return { data, invalidateData };
}

Demo/index.js:

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient} contextSharing={false}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Demo/App.js

import { useHookWithUseQuery } from "core/dist/hooks"; // also tried core/src/hooks
...

function App() {
  const { data } = useHookWithUseQuery();
 
  const { someFetchedText } = data;
  return (
    <div>{ someFetchedText }</div>
  );
}

And here is how I install Core into Demo

• in Core (build + publish locally on Verdaccio)
• • rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files
• • npm publish --registry http://localhost:4873/
• in Demo
• • NPM_CONFIG_REGISTRY=http://localhost:4873 npm i core

Olsson

do demo and core each come with their own version of React (and/or react-query) bundled? Because that might be the reason that context cannot be shared between them. – Shirley

In core I set React as peer dependency: "peerDependencies": { "react": "^17.0.2", ...}. In demo it's just a dependency: "dependencies": { "react": "^17.0.2", ... } I had problems with using React in two packages when I just added the core this way: npm i local/path/to/core and could solve the issue by linking the React version npm link path/to/core/node_modules/react. Later on I discovered Verdaccio and figured out that I do not have linking issues when I just publish core, locally. – Olsson

so I would check package-lock.json to see if there are multiple versions of react or react-query installed and dedupe if possible. Otherwise I'm not sure what the issue could be, sorry. – Shirley

Experiencing the same issue with multiple versions (dep running on a lower version). I had to dedupe with yarn resolutions forcing the dep to use a later version (within v3). – Almaraz

Oh wait, no deduping to the same version (3.19.0) hasn't worked :( – Almaraz

@Olsson Did you figure this out? – Gillis

I can't say for sure that I did. The "core/demo" project was a side project, so I was not forced to find a solution. A few weeks ago, I had to do a bug fix in that project and gave it another quick try (using a custom react-query hook from the core project). It worked! I was able to use the code from the core and demo app as intended. But I can't say exactly what the problem is (hence no answer here so far). The only change I can remember was previously removing all Node versions from my systems that I no longer needed. This caused problems with another build. Maybe it helped here as well. – Olsson

As was already said above, the issue is that you had two different instances of react-query module. Normally, react context Provider and Consumer must be referring to the same exact instance of the Context for it to work. For that those two must be imported from the same exact ES module (not just the same version). So, using it as a peer dependency and deduping should have helped. – Ultramicroscope

Answer 1

If anyone is still interested, I had the same issue described above.

The problem for me was that I was installing my 'Core' package from a local folder. As a consequence react-query was not correctly deduplicated.

Installing it directly from git (or from the npm registry) allowed npm to correctly dedupe it and fixed the issue for me.

Deboer

Answer 2

I had the same problem and deduplicating your react-query dependency in your yarn lock or NPM package lock is the solution:

For yarn.lock you can run

npx yarn-deduplicate --strategy fewer

Or for package-lock.json:

npm dedupe

This will solve your issue like solved mine.

Flibbertigibbet