@dhis2/app-service-data 3.2.4 → 3.2.8

package/build/cjs/react/hooks/useDataMutation.test.js

@@ -2,79 +2,347 @@
 
 var _reactHooks = require("@testing-library/react-hooks");
 
-var _react = _interopRequireDefault(require("react"));
+var React = _interopRequireWildcard(require("react"));
 
 var _CustomDataProvider = require("../components/CustomDataProvider");
 
+var _useDataEngine = require("./useDataEngine");
+
 var _useDataMutation = require("./useDataMutation");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const customData = {
-  answer: 42
-};
-
-const wrapper = ({
-  children
-}) => /*#__PURE__*/_react.default.createElement(_CustomDataProvider.CustomDataProvider, {
-  data: customData
-}, children);
-
-const mutation = {
-  type: 'create',
-  resource: 'answer',
-  data: {
-    answer: 42
-  }
-};
-describe('useDataMustation', () => {
-  const originalError = console.error;
-  afterEach(() => {
-    console.error = originalError;
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+describe('useDataMutation', () => {
+  it('should render without failing', async () => {
+    const mutation = {
+      type: 'create',
+      resource: 'answer',
+      data: {
+        answer: '?'
+      }
+    };
+    const data = {
+      answer: 42
+    };
+
+    const wrapper = ({
+      children
+    }) => /*#__PURE__*/React.createElement(_CustomDataProvider.CustomDataProvider, {
+      data: data
+    }, children);
+
+    const {
+      result,
+      waitFor
+    } = (0, _reactHooks.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation), {
+      wrapper
+    });
+    const [mutate, beforeMutation] = result.current;
+    expect(beforeMutation).toMatchObject({
+      loading: false,
+      called: false
+    });
+    (0, _reactHooks.act)(() => {
+      mutate();
+    });
+    await waitFor(() => {
+      const [, duringMutation] = result.current;
+      expect(duringMutation).toMatchObject({
+        loading: true,
+        called: true
+      });
+    });
+    await waitFor(() => {
+      const [, afterMutation] = result.current;
+      expect(afterMutation).toMatchObject({
+        loading: false,
+        called: true,
+        data: 42
+      });
+    });
   });
-  it('Should render without failing', async () => {
-    let hookState;
-    console.error = jest.fn();
+  it('should run immediately with lazy: false', async () => {
+    const mutation = {
+      type: 'create',
+      resource: 'answer',
+      data: {
+        answer: '?'
+      }
+    };
+    const data = {
+      answer: 42
+    };
+
+    const wrapper = ({
+      children
+    }) => /*#__PURE__*/React.createElement(_CustomDataProvider.CustomDataProvider, {
+      data: data
+    }, children);
+
+    const {
+      result,
+      waitFor
+    } = (0, _reactHooks.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation, {
+      lazy: false
+    }), {
+      wrapper
+    });
+    const [, duringMutation] = result.current;
+    expect(duringMutation).toMatchObject({
+      loading: true,
+      called: true
+    });
+    await waitFor(() => {
+      const [, afterMutation] = result.current;
+      expect(afterMutation).toMatchObject({
+        loading: false,
+        called: true,
+        data: 42
+      });
+    });
+  });
+  it('should call onComplete on success', async () => {
+    const onComplete = jest.fn();
+    const mutation = {
+      type: 'create',
+      resource: 'answer',
+      data: {
+        answer: '?'
+      }
+    };
+    const data = {
+      answer: 42
+    };
+
+    const wrapper = ({
+      children
+    }) => /*#__PURE__*/React.createElement(_CustomDataProvider.CustomDataProvider, {
+      data: data
+    }, children);
+
+    const {
+      result,
+      waitFor
+    } = (0, _reactHooks.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation, {
+      onComplete
+    }), {
+      wrapper
+    });
+    expect(onComplete).toHaveBeenCalledTimes(0);
+    const [mutate] = result.current;
     (0, _reactHooks.act)(() => {
-      hookState = (0, _reactHooks.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation), {
-        wrapper
+      mutate();
+    });
+    await waitFor(() => {
+      const [, state] = result.current;
+      expect(state).toMatchObject({
+        loading: false,
+        called: true,
+        data: 42
       });
+      expect(onComplete).toHaveBeenCalledTimes(1);
+      expect(onComplete).toHaveBeenLastCalledWith(42);
     });
-    let [mutate, state] = hookState.result.current;
-    expect(state).toMatchObject({
-      called: false,
-      loading: false
+  });
+  it('should call onError on error', async () => {
+    const error = new Error('Something went wrong');
+    const onError = jest.fn();
+    const mutation = {
+      type: 'create',
+      resource: 'answer',
+      data: {
+        answer: 42
+      }
+    };
+    const data = {
+      answer: () => {
+        throw error;
+      }
+    };
+
+    const wrapper = ({
+      children
+    }) => /*#__PURE__*/React.createElement(_CustomDataProvider.CustomDataProvider, {
+      data: data
+    }, children);
+
+    const {
+      result,
+      waitFor
+    } = (0, _reactHooks.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation, {
+      onError
+    }), {
+      wrapper
     });
+    expect(onError).toHaveBeenCalledTimes(0);
+    const [mutate] = result.current;
     (0, _reactHooks.act)(() => {
       mutate();
     });
-    mutate = hookState.result.current[0];
-    state = hookState.result.current[1];
-    expect(state).toMatchObject({
-      called: true,
-      loading: true
+    await waitFor(() => {
+      const [, state] = result.current;
+      expect(state).toMatchObject({
+        loading: false,
+        called: true,
+        error
+      });
     });
+    expect(onError).toHaveBeenCalledTimes(1);
+    expect(onError).toHaveBeenLastCalledWith(error);
   });
-  it('Should run immediately with lazy: false', async () => {
-    let hookState;
-    console.error = jest.fn();
+  it('should resolve variables', async () => {
+    const mutation = {
+      type: 'update',
+      resource: 'answer',
+      id: ({
+        id
+      }) => id,
+      data: {
+        answer: '?'
+      }
+    };
+    const answerSpy = jest.fn(() => 42);
+    const data = {
+      answer: answerSpy
+    };
+
+    const wrapper = ({
+      children
+    }) => /*#__PURE__*/React.createElement(_CustomDataProvider.CustomDataProvider, {
+      data: data
+    }, children);
+
+    const {
+      result,
+      waitFor
+    } = (0, _reactHooks.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation, {
+      lazy: false,
+      variables: {
+        id: '1'
+      }
+    }), {
+      wrapper
+    });
+    await waitFor(() => {
+      expect(answerSpy).toHaveBeenLastCalledWith(expect.any(String), expect.objectContaining({
+        id: '1'
+      }), expect.any(Object));
+    });
+    const [mutate] = result.current;
     (0, _reactHooks.act)(() => {
-      hookState = (0, _reactHooks.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation, {
-        lazy: false
-      }), {
-        wrapper
+      mutate({
+        id: '2'
       });
     });
-    let [, state] = hookState.result.current;
-    expect(state).toMatchObject({
-      called: true,
-      loading: true
+    await waitFor(() => {
+      expect(answerSpy).toHaveBeenLastCalledWith(expect.any(String), expect.objectContaining({
+        id: '2'
+      }), expect.any(Object));
     });
-    await hookState.waitForNextUpdate();
-    state = hookState.result.current[1];
+  });
+  it('should return a reference to the engine', async () => {
+    const mutation = {
+      type: 'create',
+      resource: 'answer',
+      data: {
+        answer: '?'
+      }
+    };
+
+    const wrapper = ({
+      children
+    }) => /*#__PURE__*/React.createElement(_CustomDataProvider.CustomDataProvider, {
+      data: {}
+    }, children);
+
+    const engineHook = (0, _reactHooks.renderHook)(() => (0, _useDataEngine.useDataEngine)(), {
+      wrapper
+    });
+    const mutationHook = (0, _reactHooks.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation), {
+      wrapper
+    });
+    /**
+     * Ideally we'd check referential equality here with .toBe, but since
+     * both hooks run in a different context that doesn't work.
+     */
+
+    expect(mutationHook.result.current[1].engine).toStrictEqual(engineHook.result.current);
+  });
+  it('should return a stable mutate function', async () => {
+    const mutation = {
+      type: 'create',
+      resource: 'answer',
+      data: {
+        answer: '?'
+      }
+    };
+    const data = {
+      answer: 42
+    };
+
+    const wrapper = ({
+      children
+    }) => /*#__PURE__*/React.createElement(_CustomDataProvider.CustomDataProvider, {
+      data: data
+    }, children);
+
+    const {
+      result
+    } = (0, _reactHooks.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation), {
+      wrapper
+    });
+    const [firstMutate] = result.current;
+    await (0, _reactHooks.act)(async () => {
+      await firstMutate({
+        variable: 'variable'
+      });
+    });
+    const [secondMutate, state] = result.current;
     expect(state).toMatchObject({
       loading: false,
-      data: 42
+      called: true
+    });
+    expect(firstMutate).toBe(secondMutate);
+  });
+  it('should resolve with the data from mutate on success', async () => {
+    const mutation = {
+      type: 'create',
+      resource: 'answer',
+      data: {
+        answer: '?'
+      }
+    };
+    const data = {
+      answer: 42
+    };
+
+    const wrapper = ({
+      children
+    }) => /*#__PURE__*/React.createElement(_CustomDataProvider.CustomDataProvider, {
+      data: data
+    }, children);
+
+    const {
+      result,
+      waitFor
+    } = (0, _reactHooks.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation), {
+      wrapper
+    });
+    let mutatePromise;
+    const [mutate] = result.current;
+    (0, _reactHooks.act)(() => {
+      mutatePromise = mutate();
+    });
+    await waitFor(() => {
+      const [, state] = result.current;
+      expect(state).toMatchObject({
+        loading: false,
+        called: true,
+        data: 42
+      });
+      expect(mutatePromise).resolves.toBe(42);
     });
   });
 });

package/build/cjs/react/hooks/useDataQuery.js

@@ -96,9 +96,13 @@ const useDataQuery = (query, {
   /**
    * Refetch allows a user to update the variables or just
    * trigger a refetch of the query with the current variables.
+   *
+   * We're using useCallback to make the identity of the function
+   * as stable as possible, so that it won't trigger excessive
+   * rerenders when used for side-effects.
    */
 
-  const refetch = newVariables => {
+  const refetch = (0, _react.useCallback)(newVariables => {
     /**
      * If there are no updates that will trigger an automatic refetch
      * we'll need to call react-query's refetch directly
@@ -112,10 +116,6 @@ const useDataQuery = (query, {
       }) => data);
     }
 
-    if (!enabled) {
-      setEnabled(true);
-    }
-
     if (newVariables) {
       // Use cached hash if it exists
       const currentHash = variablesHash.current || (0, _stableVariablesHash.stableVariablesHash)(variables);
@@ -125,8 +125,11 @@ const useDataQuery = (query, {
       const mergedHash = (0, _stableVariablesHash.stableVariablesHash)(mergedVariables);
       const identical = currentHash === mergedHash;
 
-      if (identical) {
-        // If the variables are identical we'll need to trigger the refetch manually
+      if (identical && enabled) {
+        /**
+         * If the variables are identical and the query is enabled
+         * we'll need to trigger the refetch manually
+         */
         return queryRefetch({
           cancelRefetch: true,
           throwOnError: false
@@ -137,6 +140,11 @@ const useDataQuery = (query, {
         variablesHash.current = mergedHash;
         setVariables(mergedVariables);
       }
+    } // Enable the query after the variables have been set to prevent extra request
+
+
+    if (!enabled) {
+      setEnabled(true);
     } // This promise does not currently reject on errors
 
 
@@ -145,13 +153,12 @@ const useDataQuery = (query, {
         resolve(data);
       };
     });
-  };
+  }, [enabled, queryRefetch, variables]);
   /**
    * react-query returns null or an error, but we return undefined
    * or an error, so this ensures consistency with the other types.
    */
 
-
   const ourError = error || undefined;
   return {
     engine,

package/build/cjs/react/hooks/useDataQuery.test.js

@@ -507,6 +507,149 @@ describe('useDataQuery', () => {
     });
   });
   describe('return values: refetch', () => {
+    it('Should only trigger a single request when refetch is called on a lazy query with new variables', async () => {
+      const spy = jest.fn((type, query) => {
+        if (query.id === '1') {
+          return 42;
+        }
+
+        return 0;
+      });
+      const data = {
+        answer: spy
+      };
+      const query = {
+        x: {
+          resource: 'answer',
+          id: ({
+            id
+          }) => id
+        }
+      };
+
+      const wrapper = ({
+        children
+      }) => /*#__PURE__*/React.createElement(_CustomDataProvider.CustomDataProvider, {
+        data: data
+      }, children);
+
+      const {
+        result,
+        waitFor
+      } = (0, _reactHooks.renderHook)(() => (0, _useDataQuery.useDataQuery)(query, {
+        lazy: true
+      }), {
+        wrapper
+      });
+      expect(spy).not.toHaveBeenCalled();
+      (0, _reactHooks.act)(() => {
+        result.current.refetch({
+          id: '1'
+        });
+      });
+      await waitFor(() => {
+        expect(result.current).toMatchObject({
+          loading: false,
+          called: true,
+          data: {
+            x: 42
+          }
+        });
+      });
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+    it('Should only trigger a single request when refetch is called on a lazy query with identical variables', async () => {
+      const spy = jest.fn((type, query) => {
+        if (query.id === '1') {
+          return 42;
+        }
+
+        return 0;
+      });
+      const data = {
+        answer: spy
+      };
+      const query = {
+        x: {
+          resource: 'answer',
+          id: ({
+            id
+          }) => id
+        }
+      };
+
+      const wrapper = ({
+        children
+      }) => /*#__PURE__*/React.createElement(_CustomDataProvider.CustomDataProvider, {
+        data: data
+      }, children);
+
+      const {
+        result,
+        waitFor
+      } = (0, _reactHooks.renderHook)(() => (0, _useDataQuery.useDataQuery)(query, {
+        lazy: true,
+        variables: {
+          id: '1'
+        }
+      }), {
+        wrapper
+      });
+      expect(spy).not.toHaveBeenCalled();
+      (0, _reactHooks.act)(() => {
+        result.current.refetch({
+          id: '1'
+        });
+      });
+      await waitFor(() => {
+        expect(result.current).toMatchObject({
+          loading: false,
+          called: true,
+          data: {
+            x: 42
+          }
+        });
+      });
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+    it('Should have a stable identity if the variables have not changed', async () => {
+      const data = {
+        answer: () => 42
+      };
+      const query = {
+        x: {
+          resource: 'answer'
+        }
+      };
+
+      const wrapper = ({
+        children
+      }) => /*#__PURE__*/React.createElement(_CustomDataProvider.CustomDataProvider, {
+        data: data
+      }, children);
+
+      const {
+        result,
+        waitForNextUpdate,
+        rerender
+      } = (0, _reactHooks.renderHook)(() => (0, _useDataQuery.useDataQuery)(query), {
+        wrapper
+      });
+      const firstRefetch = result.current.refetch;
+      await waitForNextUpdate();
+      (0, _reactHooks.act)(() => {
+        result.current.refetch();
+        /**
+         * FIXME: https://github.com/tannerlinsley/react-query/issues/2481
+         * This forced rerender is not necessary in the app, just when testing.
+         * It is unclear why.
+         */
+
+        rerender();
+      });
+      await waitForNextUpdate();
+      expect(result.current.refetch).toBe(firstRefetch);
+    });
     it('Should return stale data and set loading to true on refetch', async () => {
       const answers = [42, 43];
       const mockSpy = jest.fn(() => Promise.resolve(answers.shift()));