Merge 3adbb74 into e05929c

realm · Aug 23, 2023 · 55faae3 · 55faae3
2 parents e05929c + 3adbb74
commit 55faae3
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 4 deletions.
diff --git a/packages/realm-react/CHANGELOG.md b/packages/realm-react/CHANGELOG.md
@@ -4,7 +4,7 @@
 * None
 
 ### Enhancements
-* None
+* Add flag to keep realm open on unmount of `RealmProvider`. ([#6023](https://github.com/realm/realm-js/issues/6023))
 
 ### Fixed
 * Fix for `useObject`` not updating when using previously used primary key. ([#5620](https://github.com/realm/realm-js/issues/5620), since v0.4.2. Thanks @RS1-Project)

diff --git a/packages/realm-react/README.md b/packages/realm-react/README.md
@@ -234,6 +234,19 @@ const AppWrapper = () => {
   )
 }
 ```
+
+It may also be necessary to render multiple `RealmProvider`s of the same Realm in an app. In this case, the flag `closeOnUnmount` can be set to `false`` to prevent both Realm instances from closing when one has been removed from the component tree.
+This is set to `true` by default.
+
+```tsx
+const AppWrapper = () => {
+  return (
+    <RealmProvider closeOnUnmount={false}>
+      <App/>
+    <RealmProvider>
+  )
+}
+```
 ### Dynamically Updating a Realm Configuration
 
 It is possible to update the realm configuration by setting props on the `RealmProvider`.  The `RealmProvider` takes props for all possible realm configuration properties.

diff --git a/packages/realm-react/src/RealmProvider.tsx b/packages/realm-react/src/RealmProvider.tsx
@@ -27,6 +27,7 @@ type PartialRealmConfiguration = Omit<Partial<Realm.Configuration>, "sync"> & {
 
 type ProviderProps = PartialRealmConfiguration & {
   fallback?: React.ComponentType<unknown> | React.ReactElement | null | undefined;
+  closeOnUnmount?: boolean;
   realmRef?: React.MutableRefObject<Realm | null>;
   children: React.ReactNode;
 };
@@ -65,7 +66,7 @@ export function createRealmProvider(
    * For example, to override the `path` config value, use a prop named `path`,
    * e.g. `path="newPath.realm"`
    */
-  return ({ children, fallback: Fallback, realmRef, ...restProps }) => {
+  return ({ children, fallback: Fallback, closeOnUnmount = true, realmRef, ...restProps }) => {
     const [realm, setRealm] = useState<Realm | null>(() =>
       realmConfig.sync === undefined && restProps.sync === undefined
         ? new Realm(mergeRealmConfiguration(realmConfig, restProps))
@@ -129,11 +130,13 @@ export function createRealmProvider(
 
       return () => {
         if (realm) {
-          realm.close();
+          if (closeOnUnmount) {
+            realm.close();
+          }
           setRealm(null);
         }
       };
-    }, [configVersion, realm, setRealm]);
+    }, [configVersion, realm, setRealm, closeOnUnmount]);
 
     if (!realm) {
       if (typeof Fallback === "function") {

diff --git a/packages/realm-react/src/__tests__/RealmProvider.test.tsx b/packages/realm-react/src/__tests__/RealmProvider.test.tsx
@@ -68,6 +68,18 @@ describe("RealmProvider", () => {
     expect(realm.isClosed).toBe(true);
   });
 
+  it("returns the configured realm with useRealm and stays open if flagged", async () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <RealmProvider closeOnUnmount={false}>{children}</RealmProvider>
+    );
+    const { result, unmount } = renderHook(() => useRealm(), { wrapper });
+    await waitFor(() => expect(result.current).not.toBe(null));
+    const realm = result.current;
+    expect(realm.schema[0].name).toBe("dog");
+    unmount();
+    expect(realm.isClosed).toBe(false);
+  });
+
   it("will override the the configuration provided in createRealmContext", async () => {
     const wrapper = ({ children }: { children: React.ReactNode }) => (
       <RealmProvider schema={[catSchema]}>{children}</RealmProvider>