10

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
8
  • 1
    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. Commented Jul 23, 2021 at 11:55
  • 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. Commented Jul 26, 2021 at 12:50
  • 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. Commented Jul 30, 2021 at 8:31
  • 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). Commented Aug 6, 2021 at 5:04
  • Oh wait, no deduping to the same version (3.19.0) hasn't worked :( Commented Aug 6, 2021 at 5:24

2 Answers 2

-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.

Sign up to request clarification or add additional context in comments.

Comments

-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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.