Restore QueryClientProviderPropsWithContext and QueryClientProviderPr…

…opsWithContextSharing

docs/src/pages/reference/QueryClientProvider.md

@@ -20,7 +20,8 @@ function App() {
 - `client: QueryClient`
   - **Required**
   - the QueryClient instance to provide
-- `context?: React.Context<QueryClient | undefined> | 'sharing'`
-  - Set this to React Context of type `QueryClient | undefined` to use a custom context for this provider.
-  - Set this to `sharing` 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.
-  - Otherwise, this defaults to `undefined`, in which the default context will be used.
+- `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.
+- `context?: React.Context<QueryClient | undefined>`
+  - Use this to use a custom React Query context. Otherwise, the default will be used.

src/reactjs/QueryClientProvider.tsx

@@ -49,27 +49,38 @@ export const useQueryClient = ({ context }: ContextOptions = {}) => {
   return queryClient
 }
 
-export interface QueryClientProviderProps {
+type QueryClientProviderPropsBase = {
   client: QueryClient
-  context?: React.Context<QueryClient | undefined> | 'sharing'
 }
+type QueryClientProviderPropsWithContext = ContextOptions & {
+  contextSharing?: never
+} & QueryClientProviderPropsBase
+type QueryClientProviderPropsWithContextSharing = {
+  context?: never
+  contextSharing?: boolean
+} & QueryClientProviderPropsBase
 
-export const QueryClientProvider: React.FC<QueryClientProviderProps> = props => {
-  const { client, children } = props
+export type QueryClientProviderProps =
+  | QueryClientProviderPropsWithContext
+  | QueryClientProviderPropsWithContextSharing
+
+export const QueryClientProvider: React.FC<QueryClientProviderProps> = ({
+  client,
+  children,
+  context,
+  contextSharing = false,
+}) => {
   React.useEffect(() => {
     client.mount()
     return () => {
       client.unmount()
     }
   }, [client])
 
-  const propsContext = props.context === 'sharing' ? undefined : props.context
-  const contextSharing = props.context === 'sharing'
-
-  const Context = getQueryClientContext(propsContext, contextSharing)
+  const Context = getQueryClientContext(context, contextSharing)
 
   return (
-    <QueryClientSharingContext.Provider value={contextSharing}>
+    <QueryClientSharingContext.Provider value={!context && contextSharing}>
       <Context.Provider value={client}>{children}</Context.Provider>
     </QueryClientSharingContext.Provider>
   )

src/reactjs/tests/QueryClientProvider.test.tsx

@@ -178,10 +178,16 @@ describe('QueryClientProvider', () => {
         )
       }
 
+      // contextSharing should be ignored when passing a custom context.
+      const contextSharing = true
+
       const rendered = render(
         <QueryClientProvider client={queryClientOuter} context={contextOuter}>
           <QueryClientProvider client={queryClientInner} context={contextInner}>
-            <QueryClientProvider client={queryClientInnerInner}>
+            <QueryClientProvider
+              client={queryClientInnerInner}
+              contextSharing={contextSharing}
+            >
               <Page />
             </QueryClientProvider>
           </QueryClientProvider>
@@ -212,7 +218,7 @@ describe('QueryClientProvider', () => {
       consoleMock.mockRestore()
     })
 
-    test('should use window to get the context when context sharing', () => {
+    test('should use window to get the context when contextSharing is true', () => {
       const queryCache = new QueryCache()
       const queryClient = new QueryClient({ queryCache })
 
@@ -230,7 +236,7 @@ describe('QueryClientProvider', () => {
       }
 
       render(
-        <QueryClientProvider client={queryClient} context={'sharing'}>
+        <QueryClientProvider client={queryClient} contextSharing={true}>
           <Page />
         </QueryClientProvider>
       )
@@ -239,7 +245,7 @@ describe('QueryClientProvider', () => {
       expect(queryClientFromWindow).toEqual(queryClient)
     })
 
-    test('should not use window to get the context when context sharing and window does not exist', () => {
+    test('should not use window to get the context when contextSharing is true and window does not exist', () => {
       const queryCache = new QueryCache()
       const queryClient = new QueryClient({ queryCache })
 
@@ -256,7 +262,7 @@ describe('QueryClientProvider', () => {
       }
 
       renderToString(
-        <QueryClientProvider client={queryClient} context={'sharing'}>
+        <QueryClientProvider client={queryClient} contextSharing={true}>
           <Page />
         </QueryClientProvider>
       )