Unable to wrap QueryClientProvider

[Hydrair]

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.
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}</>;
};

main.tsx

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.

Vite has an open issue for this vitejs/vite#3753 but in this SO post (https://stackoverflow.com/questions/71020363/using-queryclientprovider-in-a-wrapper) it seemed to be machine related?

[TkDodo]

How is "the library" referencing react-query? Does it have it as a peerDependency ? It looks like you have two versions of react-query, both bringing in their own context

[ZhengRui]

I found a hacky solution:

in nextjs app yarn add link:relative_path_to_react_query_in_package_node_modules , in package set react-query as dependencies, this way the app is using the package's react-query.

Ideally I prefer the package uses app's react-query by setting it as peerDependencies and something like @types/react-query as devDependencies in the package, similar to react case.

[TkDodo]

I have a package that contains useQuery, but expecting QueryClientProvider to be provided in the nextjs App that imports the package.

That's a bit of a leaky abstraction imo. How does the App know which keys the package is using? It's a bit like mixins where you can easily get conflicts.

[ZhengRui]

ahhh, i see your point. You mean if the provider is in the App, then there maybe key conflicts between the App and the package. Right, so if i am to write a react library that uses useQuery, i should also wrap the provider inside the library? I think i did it this way because unlike App, there isn't an entry component in the package, so my first thought was to put the provider outside of the package.

[TkDodo]

in v4 you can pass a custom context to achieve isolation:

• https://tanstack.com/query/v4/docs/react/guides/migrating-to-react-query-4#custom-contexts-for-multiple-providers

this will change in v5 though towards custom queryClient to be passed, which is independent of react

[ZhengRui]

Thanks for pointing out, have updated the package code and the way to use it in App is much cleaner now