时间戳

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

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

问题描述

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

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

我必须在Core中设置任何配置以使所需的行为起作用（例如，使用的钩子放置在应用程序上下文中）吗？我必须将包构建为特定模块吗？或者是否可以将应用程序的 QueryClient 传递给Core的自定义挂钩？

这是一些代码来显示我的尝试：

核心/钩子/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中的方法

标签： reactjsnpmmodulereact-hooksreact-query

解决方案

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

对于 yarn.lock 你可以运行

npx yarn-deduplicate --strategy fewer

或者对于 package-lock.json：

npm dedupe

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

推荐阅读