即使在index.js中使用了QueryClientProvider，在外部包中使用react-query也会导致“No QueryClient set”错误

Question

我尝试使用自行开发的包中的钩子，该包在 create-react-app 应用程序中使用 useQuery 。

这是我的场景：我正在开发两个 npm 项目：“ Core ”和“ Demo ”。 Core包含我想在其他应用程序中使用的函数、挂钩和组件（例如作为 CRA 的Demo ）。一些钩子包含 useQuery (react-query)。不幸的是，当在Demo等其他应用程序中使用此挂钩时，即使我设置了QueryClientProvider，我总是收到错误消息“未设置 QueryClient，请使用 QueryClientProvider 设置一个” 。

我是否必须在Core中设置任何配置才能使所需的行为发挥作用（例如，将使用的挂钩放置在应用程序上下文中）？我是否必须将包构建为特定模块？或者是否可以将应用程序的 QueryClient 传递给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 };
}

演示/index.js：

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

演示/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>
  );
}

这是我如何将Core安装到Demo中

• 在 Core 中（在 Verdaccio 上本地构建 + 发布）
• • rm -rf dist && NODE_ENV=生产 babel src --out-dir dist --copy-files
• • npm 发布 --registry http://localhost:4873/
• 在演示中
• • NPM_CONFIG_REGISTRY=http://localhost:4873 npm i 核心

Answer 1

我遇到了同样的问题，解决方案是在你的纱线锁或 NPM 包锁中删除你的反应查询依赖项：

对于yarn.lock你可以运行

npx yarn-deduplicate --strategy fewer

或者对于 package-lock.json：

npm dedupe

这将解决你的问题，就像解决我的问题一样。