Merge pull request #612 from wildan-m/wildan/fix/51296-make-onyx-allo…

…w-dynamic-key Add param to allow dynamic key
Expensify · Jan 17, 2025 · 43243d8 · 43243d8
2 parents 10831d6 + f2cc869
commit 43243d8
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 3 deletions.
diff --git a/lib/useOnyx.ts b/lib/useOnyx.ts
@@ -32,6 +32,11 @@ type BaseUseOnyxOptions = {
      * with the same connect configurations.
      */
     reuseConnection?: boolean;
+
+    /**
+     * If set to `true`, the key can be changed dynamically during the component lifecycle.
+     */
+    allowDynamicKey?: boolean;
 };
 
 type UseOnyxInitialValueOption<TInitialValue> = {
@@ -157,7 +162,7 @@ function useOnyx<TKey extends OnyxKey, TReturnValue = OnyxValue<TKey>>(
 
     useEffect(() => {
         // These conditions will ensure we can only handle dynamic collection member keys from the same collection.
-        if (previousKey === key) {
+        if (options?.allowDynamicKey || previousKey === key) {
             return;
         }
 
@@ -181,7 +186,7 @@ function useOnyx<TKey extends OnyxKey, TReturnValue = OnyxValue<TKey>>(
         throw new Error(
             `'${previousKey}' key can't be changed to '${key}'. useOnyx() only supports dynamic keys if they are both collection member keys from the same collection e.g. from 'collection_id1' to 'collection_id2'.`,
         );
-    }, [previousKey, key]);
+    }, [previousKey, key, options?.allowDynamicKey]);
 
     useEffect(() => {
         // This effect will only run if the `dependencies` array changes. If it changes it will force the hook
@@ -342,4 +347,4 @@ function useOnyx<TKey extends OnyxKey, TReturnValue = OnyxValue<TKey>>(
 
 export default useOnyx;
 
-export type {FetchStatus, ResultMetadata, UseOnyxResult};
+export type {FetchStatus, ResultMetadata, UseOnyxResult, BaseUseOnyxOptions, UseOnyxSelector, UseOnyxSelectorOption, UseOnyxInitialValueOption, UseOnyxOptions};
diff --git a/tests/unit/useOnyxTest.ts b/tests/unit/useOnyxTest.ts
@@ -89,6 +89,44 @@ describe('useOnyx', () => {
                 fail("Expected to don't throw any errors.");
             }
         });
+
+        it('should not throw an error when changing from a non-collection key to another one if allowDynamicKey is true', async () => {
+            const {rerender} = renderHook((key: string) => useOnyx(key, {allowDynamicKey: true}), {initialProps: ONYXKEYS.TEST_KEY});
+
+            try {
+                await act(async () => {
+                    rerender(ONYXKEYS.TEST_KEY_2);
+                });
+            } catch (e) {
+                fail("Expected to don't throw any errors.");
+            }
+        });
+
+        it('should throw an error when changing from a non-collection key to another one if allowDynamicKey is false', async () => {
+            const {rerender} = renderHook((key: string) => useOnyx(key, {allowDynamicKey: false}), {initialProps: ONYXKEYS.TEST_KEY});
+
+            try {
+                await act(async () => {
+                    rerender(ONYXKEYS.TEST_KEY_2);
+                });
+
+                fail('Expected to throw an error.');
+            } catch (e) {
+                expect((e as Error).message).toBe(error(ONYXKEYS.TEST_KEY, ONYXKEYS.TEST_KEY_2));
+            }
+        });
+
+        it('should not throw an error when changing from a collection member key to another one if allowDynamicKey is true', async () => {
+            const {rerender} = renderHook((key: string) => useOnyx(key, {allowDynamicKey: true}), {initialProps: `${ONYXKEYS.COLLECTION.TEST_KEY}` as string});
+
+            try {
+                await act(async () => {
+                    rerender(`${ONYXKEYS.COLLECTION.TEST_KEY_2}`);
+                });
+            } catch (e) {
+                fail("Expected to don't throw any errors.");
+            }
+        });
     });
 
     describe('misc', () => {