在包装器中使用 QueryClientProvider

Question

我想在我提供的库中使用单个包装器组件。包装器应提供诸如 Context 和 QueryClient 之类的东西。该组件如下所示：

import { QueryClient, QueryClientProvider } from "react-query";

const client = new QueryClient();

function Wrapper(props) {
    return (
        <QueryClientProvider client={client}>
            {props.children}
        </QueryClientProvider>
    );
}

当使用 Wrapper useQuery 包装子项时，会引发未设置 QueryClientProvider 的错误。在这种情况下 App 使用来自 react-query 的 useQuery Hook。

import { Wrapper } from "my-lib";

ReactDOM.render(
    <React.StrictMode>
        <Wrapper>
            <App />
        </Wrapper>
    </React.StrictMode>,
    document.getElementById("root")
);

起初我认为您需要一个直接位于 useQuery 挂钩上方的 QueryClientProvider。但是例如在 Storybook 中，您可以为所有故事一起定义一个 QueryClient。我哪里做错了？

编辑：应用组件：

import { useQuery } from "react-query";

export const App = () => {
    const data = useQuery("data", () =>
        fetch("https://jsonplaceholder.typicode.com/todos/1").then((res) =>
            res.json()
        )
    );
    if (data.isError || data.isLoading) return <>Error/Loading</>;
    return <>{data.data.title}</>;
};

Answer 1

好吧，几步就能实现我的目标：

在库中，将react-query放入devDependencies和peerDependencies。
在应用程序中，将 react-query 放入 dependencies。
在库中，通过将 react-query 添加到您的捆绑器配置中来将其排除在捆绑之外。在我的例子中是 vite.config.ts:

const path = require("path");
const { defineConfig } = require("vite");

module.exports = defineConfig({
    build: {
        lib: {
            entry: path.resolve(__dirname, "src/index.ts"),
            name: "my-lib",
            formats: ["es", "umd"],
            fileName: "my-lib",
        },
        rollupOptions: {
            external: [
                "react",
                "react-dom",
                "react-query",
            ],         
        },
    },
});

在包装器中使用 QueryClientProvider

Using QueryClientProvider in a Wrapper

javascript

reactjs

react-query