diff --git a/docs/src/pages/reference/QueryClientProvider.md b/docs/src/pages/reference/QueryClientProvider.md index f956dccf62..e31338de68 100644 --- a/docs/src/pages/reference/QueryClientProvider.md +++ b/docs/src/pages/reference/QueryClientProvider.md @@ -14,3 +14,11 @@ function App() { return ... } ``` +**Options** + +- `client: QueryClient` + - **Required** + - the QueryClient instance to provide +- `contextSharing: boolean` + - defaults to `false` + - Set this to `true` to enable context sharing, which will share the first and at least one instance of the context across the window to ensure that if React Query is used across different bundles or microfrontends they will all use the same **instance** of context, regardless of module scoping. diff --git a/src/react/QueryClientProvider.tsx b/src/react/QueryClientProvider.tsx index 1743637851..e0ea8baa52 100644 --- a/src/react/QueryClientProvider.tsx +++ b/src/react/QueryClientProvider.tsx @@ -9,16 +9,16 @@ declare global { } const defaultContext = React.createContext(undefined) +const QueryClientSharingContext = React.createContext(false) -// We share the first and at least one +// if contextSharing is on, we share the first and at least one // instance of the context across the window // to ensure that if React Query is used across // different bundles or microfrontends they will // all use the same **instance** of context, regardless // of module scoping. -function getQueryClientContext() { - // @ts-ignore (for global) - if (typeof window !== 'undefined') { +function getQueryClientContext(contextSharing: boolean) { + if (contextSharing && typeof window !== 'undefined') { if (!window.ReactQueryClientContext) { window.ReactQueryClientContext = defaultContext } @@ -30,7 +30,9 @@ function getQueryClientContext() { } export const useQueryClient = () => { - const queryClient = React.useContext(getQueryClientContext()) + const queryClient = React.useContext( + getQueryClientContext(React.useContext(QueryClientSharingContext)) + ) if (!queryClient) { throw new Error('No QueryClient set, use QueryClientProvider to set one') @@ -41,10 +43,12 @@ export const useQueryClient = () => { export interface QueryClientProviderProps { client: QueryClient + contextSharing?: boolean } export const QueryClientProvider: React.FC = ({ client, + contextSharing = false, children, }) => { React.useEffect(() => { @@ -54,7 +58,11 @@ export const QueryClientProvider: React.FC = ({ } }, [client]) - const Context = getQueryClientContext() + const Context = getQueryClientContext(contextSharing) - return {children} + return ( + + {children} + + ) }