Using QueryClientProvider in a Wrapper

I want to use a single Wrapper Component in a library im providing. The wrapper should provide stuff like Context and QueryClient. The component looks like this:

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

const client = new QueryClient();

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

When wrapping children with the Wrapper useQuery throws an error that no QueryClientProvider is set. In this case App uses the useQuery Hook from react-query.

import { Wrapper } from "my-lib";

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

At first i thought you need a QueryClientProvider directly above an useQuery hook. But for example in Storybook you can define one QueryClient for all stories together. Where did i went wrong?

Edit: App component:

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

Well a few steps lead to my goal:

1. In the library, put react-query into the devDependencies and peerDependencies.
2. In the app, put react-query into the dependencies.
3. In the library, exclude react-query from being bundled by adding it to your bundler config. In my case it’s the 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",
            ],         
        },
    },
});