Merge pull request #6188 from marmelab/fix-usegetmany-enabled

Fix useGetMany Does Not Respect Enabled Option
marmelab · Apr 19, 2021 · a631a6d · a631a6d
2 parents ff6b318 + b4157a5
commit a631a6d
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 1 deletion.
diff --git a/packages/ra-core/src/dataProvider/useGetMany.spec.tsx b/packages/ra-core/src/dataProvider/useGetMany.spec.tsx
@@ -40,6 +40,44 @@ describe('useGetMany', () => {
         ]);
     });
 
+    it('should not call the dataProvider with a GET_MANY on mount if enabled is false', async () => {
+        const dataProvider = {
+            getMany: jest.fn(() =>
+                Promise.resolve({ data: [{ id: 1, title: 'foo' }] })
+            ),
+        };
+        const { dispatch, rerender } = renderWithRedux(
+            <DataProviderContext.Provider value={dataProvider}>
+                <UseGetMany
+                    resource="posts"
+                    ids={[1]}
+                    options={{ enabled: false }}
+                />
+            </DataProviderContext.Provider>
+        );
+        await new Promise(resolve => setTimeout(resolve));
+        expect(dispatch).toBeCalledTimes(0);
+        expect(dataProvider.getMany).toBeCalledTimes(0);
+
+        rerender(
+            <DataProviderContext.Provider value={dataProvider}>
+                <UseGetMany
+                    resource="posts"
+                    ids={[1]}
+                    options={{ enabled: true }}
+                />
+            </DataProviderContext.Provider>
+        );
+        await new Promise(resolve => setTimeout(resolve));
+        expect(dispatch).toBeCalledTimes(5);
+        expect(dispatch.mock.calls[0][0].type).toBe('RA/CRUD_GET_MANY');
+        expect(dataProvider.getMany).toBeCalledTimes(1);
+        expect(dataProvider.getMany.mock.calls[0]).toEqual([
+            'posts',
+            { ids: [1] },
+        ]);
+    });
+
     it('should aggregate multiple queries into a single call', async () => {
         const dataProvider = {
             getMany: jest.fn(() =>

diff --git a/packages/ra-core/src/dataProvider/useGetMany.ts b/packages/ra-core/src/dataProvider/useGetMany.ts
@@ -91,7 +91,7 @@ const DataProviderOptions = { action: CRUD_GET_MANY };
 const useGetMany = (
     resource: string,
     ids: Identifier[],
-    options: UseGetManyOptions = {}
+    options: UseGetManyOptions = { enabled: true }
 ): UseGetManyResult => {
     // we can't use useQueryWithStore here because we're aggregating queries first
     // therefore part of the useQueryWithStore logic will have to be repeated below
@@ -116,6 +116,10 @@ const useGetMany = (
     }
     dataProvider = useDataProvider(); // not the best way to pass the dataProvider to a function outside the hook, but I couldn't find a better one
     useEffect(() => {
+        if (options.enabled === false) {
+            return;
+        }
+
         if (!queriesToCall[resource]) {
             queriesToCall[resource] = [];
         }