fix: cross-module react query context

src/react/QueryClientProvider.tsx

@@ -2,22 +2,32 @@ import React from 'react'
 
 import { QueryClient } from '../core'
 
-const QueryClientContext = (() => {
-  const context = React.createContext<QueryClient | undefined>(undefined)
-  if (typeof window !== 'undefined') {
-    // @ts-ignore
-    window.ReactQueryClientContext = context
-  }
-  return context
-})()
+interface GlobalOrWindow {
+  ReactQueryClientContext?: React.Context<QueryClient | undefined>
+}
 
+const defaultContext = React.createContext<QueryClient | undefined>(undefined)
+
+// 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() {
-  return typeof window !== 'undefined'
-    ? // @ts-ignore
-      (window.ReactQueryClientContext as React.Context<
-        QueryClient | undefined
-      >) ?? QueryClientContext
-    : QueryClientContext
+  // @ts-ignore (for global)
+  if (typeof global !== 'undefined' || typeof window !== 'undefined') {
+    // @ts-ignore (for global)
+    const thisContext = (global || window) as GlobalOrWindow
+
+    if (!thisContext.ReactQueryClientContext) {
+      thisContext.ReactQueryClientContext = defaultContext
+    }
+
+    return thisContext.ReactQueryClientContext
+  }
+
+  return defaultContext
 }
 
 export const useQueryClient = () => {