From 1842b11b7c25ce853bc0fbcc785cfe5e2371b6b8 Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Fri, 5 Mar 2021 19:33:38 +0100 Subject: [PATCH 1/3] fix (QueryClient): disable context sharing per default but still allow for it by adding a `contextSharing` boolean prop when creating the QueryClient context --- src/react/QueryClientProvider.tsx | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/src/react/QueryClientProvider.tsx b/src/react/QueryClientProvider.tsx index 1743637851..394d1d7698 100644 --- a/src/react/QueryClientProvider.tsx +++ b/src/react/QueryClientProvider.tsx @@ -9,28 +9,28 @@ 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 } - - return window.ReactQueryClientContext } return defaultContext } 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 +41,12 @@ export const useQueryClient = () => { export interface QueryClientProviderProps { client: QueryClient + contextSharing?: boolean } export const QueryClientProvider: React.FC = ({ client, + contextSharing = false, children, }) => { React.useEffect(() => { @@ -54,7 +56,11 @@ export const QueryClientProvider: React.FC = ({ } }, [client]) - const Context = getQueryClientContext() + const Context = getQueryClientContext(contextSharing) - return {children} + return ( + + {children} + + ) } From a68956ca8c7587bf4836efbd7e4518b2ade548ba Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Fri, 5 Mar 2021 19:40:31 +0100 Subject: [PATCH 2/3] document the contextSharing prop --- docs/src/pages/reference/QueryClientProvider.md | 8 ++++++++ 1 file changed, 8 insertions(+) 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. From f1bbdb8ac92852fad3a82dd4b4a804851a51108d Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Fri, 5 Mar 2021 19:42:51 +0100 Subject: [PATCH 3/3] fix (QueryClient): disable context sharing per default I somehow lost the return statement --- src/react/QueryClientProvider.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/react/QueryClientProvider.tsx b/src/react/QueryClientProvider.tsx index 394d1d7698..e0ea8baa52 100644 --- a/src/react/QueryClientProvider.tsx +++ b/src/react/QueryClientProvider.tsx @@ -22,6 +22,8 @@ function getQueryClientContext(contextSharing: boolean) { if (!window.ReactQueryClientContext) { window.ReactQueryClientContext = defaultContext } + + return window.ReactQueryClientContext } return defaultContext