Merge pull request #3252 from fargito/remove-duplicate-api-call

[RFR] Remove duplicate API call in ReferenceArrayInput
marmelab · Jun 5, 2019 · e619159 · e619159
2 parents b90d5d0 + 38f0117
commit e619159
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 11 deletions.
diff --git a/packages/ra-core/src/controller/input/ReferenceArrayInputController.spec.tsx b/packages/ra-core/src/controller/input/ReferenceArrayInputController.spec.tsx
@@ -417,7 +417,45 @@ describe('<ReferenceArrayInputController />', () => {
         assert.equal(crudGetMany.mock.calls.length, 2);
     });
 
-    it('should call crudGetOne and crudGetMatching when record changes', () => {
+    it('should call crudGetMany when input value changes only with the additional input values', () => {
+        const crudGetMany = jest.fn();
+        const wrapper = shallow(
+            <ReferenceArrayInputController
+                {...defaultProps}
+                input={{ value: [5] }}
+                allowEmpty
+                crudGetMany={crudGetMany}
+            />
+        );
+        expect(
+            crudGetMany.mock.calls[crudGetMany.mock.calls.length - 1]
+        ).toEqual([defaultProps.reference, [5]]);
+        wrapper.setProps({ input: { value: [5, 6] } });
+        expect(
+            crudGetMany.mock.calls[crudGetMany.mock.calls.length - 1]
+        ).toEqual([defaultProps.reference, [6]]);
+    });
+
+    it('should not call crudGetMany when already fetched input value changes', () => {
+        const crudGetMany = jest.fn();
+        const wrapper = shallow(
+            <ReferenceArrayInputController
+                {...defaultProps}
+                input={{ value: [5, 6] }}
+                allowEmpty
+                crudGetMany={crudGetMany}
+            />
+        );
+        expect(
+            crudGetMany.mock.calls[0]
+        ).toEqual([defaultProps.reference, [5, 6]]);
+        wrapper.setProps({ input: { value: [6] } });
+        expect(
+            crudGetMany.mock.calls.length
+        ).toEqual(1);
+    });
+
+    it('should only call crudGetOne and not crudGetMatching when only the record changes', () => {
         const crudGetMany = jest.fn();
         const crudGetMatching = jest.fn();
         const wrapper = shallow(
@@ -433,6 +471,6 @@ describe('<ReferenceArrayInputController />', () => {
         assert.equal(crudGetMany.mock.calls.length, 1);
         wrapper.setProps({ record: { id: 1 } });
         assert.equal(crudGetMatching.mock.calls.length, 2);
-        assert.equal(crudGetMany.mock.calls.length, 2);
+        assert.equal(crudGetMany.mock.calls.length, 1);
     });
 });
diff --git a/packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx b/packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx
@@ -3,7 +3,9 @@ import { connect } from 'react-redux';
 import debounce from 'lodash/debounce';
 import compose from 'recompose/compose';
 import { createSelector } from 'reselect';
+import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
+import difference from 'lodash/difference';
 import { WrappedFieldInputProps } from 'redux-form';
 
 import {
@@ -138,9 +140,7 @@ interface EnhancedProps {
  *     <SelectArrayInput optionText="name" />
  * </ReferenceArrayInput>
  */
-export class UnconnectedReferenceArrayInputController extends Component<
-    Props & EnhancedProps
-> {
+export class UnconnectedReferenceArrayInputController extends Component<Props & EnhancedProps> {
     public static defaultProps = {
         allowEmpty: false,
         filter: {},
@@ -164,7 +164,7 @@ export class UnconnectedReferenceArrayInputController extends Component<
     }
 
     componentDidMount() {
-        this.fetchReferencesAndOptions(this.props);
+        this.fetchReferencesAndOptions(this.props, {} as Props & EnhancedProps);
     }
 
     componentWillReceiveProps(nextProps: Props & EnhancedProps) {
@@ -223,16 +223,17 @@ export class UnconnectedReferenceArrayInputController extends Component<
         }
     };
 
-    fetchReferences = (props = this.props) => {
-        const { crudGetMany, input, reference } = props;
+    fetchReferences = (nextProps, currentProps = this.props) => {
+        const { crudGetMany, input, reference } = nextProps;
         const ids = input.value;
         if (ids) {
             if (!Array.isArray(ids)) {
                 throw Error(
                     'The value of ReferenceArrayInput should be an array'
                 );
             }
-            crudGetMany(reference, ids);
+            const idsToFetch = difference(ids, get(currentProps, 'input.value', []));
+            if (idsToFetch.length) crudGetMany(reference, idsToFetch);
         }
     };
 
@@ -255,8 +256,8 @@ export class UnconnectedReferenceArrayInputController extends Component<
         );
     };
 
-    fetchReferencesAndOptions(nextProps) {
-        this.fetchReferences(nextProps);
+    fetchReferencesAndOptions(nextProps, currentProps = this.props) {
+        this.fetchReferences(nextProps, currentProps);
         this.fetchOptions(nextProps);
     }