Question

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

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

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>
  );
}

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

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

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

0 个答案: