@dhis2/app-service-data 3.11.3 → 3.12.0-alpha.2

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

@@ -1,19 +1,12 @@
 "use strict";
 
-var _reactHooks = require("@testing-library/react-hooks");
-
+var _react = require("@testing-library/react");
 var React = _interopRequireWildcard(require("react"));
-
 var _CustomDataProvider = require("../components/CustomDataProvider");
-
 var _useDataEngine = require("./useDataEngine");
-
 var _useDataMutation = require("./useDataMutation");
-
-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; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 describe('useDataMutation', () => {
   it('should render without failing', async () => {
     const mutation = {
@@ -26,8 +19,7 @@ describe('useDataMutation', () => {
     const data = {
       answer: 42
     };
-
-    const wrapper = (_ref) => {
+    const wrapper = _ref => {
       let {
         children
       } = _ref;
@@ -35,11 +27,9 @@ describe('useDataMutation', () => {
         data: data
       }, children);
     };
-
     const {
-      result,
-      waitFor
-    } = (0, _reactHooks.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation), {
+      result
+    } = (0, _react.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation), {
       wrapper
     });
     const [mutate, beforeMutation] = result.current;
@@ -47,17 +37,17 @@ describe('useDataMutation', () => {
       loading: false,
       called: false
     });
-    (0, _reactHooks.act)(() => {
+    (0, _react.act)(() => {
       mutate();
     });
-    await waitFor(() => {
+    await (0, _react.waitFor)(() => {
       const [, duringMutation] = result.current;
       expect(duringMutation).toMatchObject({
         loading: true,
         called: true
       });
     });
-    await waitFor(() => {
+    await (0, _react.waitFor)(() => {
       const [, afterMutation] = result.current;
       expect(afterMutation).toMatchObject({
         loading: false,
@@ -77,8 +67,7 @@ describe('useDataMutation', () => {
     const data = {
       answer: 42
     };
-
-    const wrapper = (_ref2) => {
+    const wrapper = _ref2 => {
       let {
         children
       } = _ref2;
@@ -86,11 +75,9 @@ describe('useDataMutation', () => {
         data: data
       }, children);
     };
-
     const {
-      result,
-      waitFor
-    } = (0, _reactHooks.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation, {
+      result
+    } = (0, _react.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation, {
       lazy: false
     }), {
       wrapper
@@ -100,7 +87,7 @@ describe('useDataMutation', () => {
       loading: true,
       called: true
     });
-    await waitFor(() => {
+    await (0, _react.waitFor)(() => {
       const [, afterMutation] = result.current;
       expect(afterMutation).toMatchObject({
         loading: false,
@@ -121,8 +108,7 @@ describe('useDataMutation', () => {
     const data = {
       answer: 42
     };
-
-    const wrapper = (_ref3) => {
+    const wrapper = _ref3 => {
       let {
         children
       } = _ref3;
@@ -130,21 +116,19 @@ describe('useDataMutation', () => {
         data: data
       }, children);
     };
-
     const {
-      result,
-      waitFor
-    } = (0, _reactHooks.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation, {
+      result
+    } = (0, _react.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation, {
       onComplete
     }), {
       wrapper
     });
     expect(onComplete).toHaveBeenCalledTimes(0);
     const [mutate] = result.current;
-    (0, _reactHooks.act)(() => {
+    (0, _react.act)(() => {
       mutate();
     });
-    await waitFor(() => {
+    await (0, _react.waitFor)(() => {
       const [, state] = result.current;
       expect(state).toMatchObject({
         loading: false,
@@ -170,8 +154,7 @@ describe('useDataMutation', () => {
         throw error;
       }
     };
-
-    const wrapper = (_ref4) => {
+    const wrapper = _ref4 => {
       let {
         children
       } = _ref4;
@@ -179,21 +162,19 @@ describe('useDataMutation', () => {
         data: data
       }, children);
     };
-
     const {
-      result,
-      waitFor
-    } = (0, _reactHooks.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation, {
+      result
+    } = (0, _react.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation, {
       onError
     }), {
       wrapper
     });
     expect(onError).toHaveBeenCalledTimes(0);
     const [mutate] = result.current;
-    (0, _reactHooks.act)(() => {
+    (0, _react.act)(() => {
       mutate();
     });
-    await waitFor(() => {
+    await (0, _react.waitFor)(() => {
       const [, state] = result.current;
       expect(state).toMatchObject({
         loading: false,
@@ -208,7 +189,7 @@ describe('useDataMutation', () => {
     const mutation = {
       type: 'update',
       resource: 'answer',
-      id: (_ref5) => {
+      id: _ref5 => {
         let {
           id
         } = _ref5;
@@ -222,8 +203,7 @@ describe('useDataMutation', () => {
     const data = {
       answer: answerSpy
     };
-
-    const wrapper = (_ref6) => {
+    const wrapper = _ref6 => {
       let {
         children
       } = _ref6;
@@ -231,11 +211,9 @@ describe('useDataMutation', () => {
         data: data
       }, children);
     };
-
     const {
-      result,
-      waitFor
-    } = (0, _reactHooks.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation, {
+      result
+    } = (0, _react.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation, {
       lazy: false,
       variables: {
         id: '1'
@@ -243,18 +221,18 @@ describe('useDataMutation', () => {
     }), {
       wrapper
     });
-    await waitFor(() => {
+    await (0, _react.waitFor)(() => {
       expect(answerSpy).toHaveBeenLastCalledWith(expect.any(String), expect.objectContaining({
         id: '1'
       }), expect.any(Object));
     });
     const [mutate] = result.current;
-    (0, _reactHooks.act)(() => {
+    (0, _react.act)(() => {
       mutate({
         id: '2'
       });
     });
-    await waitFor(() => {
+    await (0, _react.waitFor)(() => {
       expect(answerSpy).toHaveBeenLastCalledWith(expect.any(String), expect.objectContaining({
         id: '2'
       }), expect.any(Object));
@@ -268,8 +246,7 @@ describe('useDataMutation', () => {
         answer: '?'
       }
     };
-
-    const wrapper = (_ref7) => {
+    const wrapper = _ref7 => {
       let {
         children
       } = _ref7;
@@ -277,18 +254,17 @@ describe('useDataMutation', () => {
         data: {}
       }, children);
     };
-
-    const engineHook = (0, _reactHooks.renderHook)(() => (0, _useDataEngine.useDataEngine)(), {
+    const engineHook = (0, _react.renderHook)(() => (0, _useDataEngine.useDataEngine)(), {
       wrapper
     });
-    const mutationHook = (0, _reactHooks.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation), {
+    const mutationHook = (0, _react.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 () => {
@@ -302,8 +278,7 @@ describe('useDataMutation', () => {
     const data = {
       answer: 42
     };
-
-    const wrapper = (_ref8) => {
+    const wrapper = _ref8 => {
       let {
         children
       } = _ref8;
@@ -311,14 +286,13 @@ describe('useDataMutation', () => {
         data: data
       }, children);
     };
-
     const {
       result
-    } = (0, _reactHooks.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation), {
+    } = (0, _react.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation), {
       wrapper
     });
     const [firstMutate] = result.current;
-    await (0, _reactHooks.act)(async () => {
+    await (0, _react.act)(async () => {
       await firstMutate({
         variable: 'variable'
       });
@@ -341,8 +315,7 @@ describe('useDataMutation', () => {
     const data = {
       answer: 42
     };
-
-    const wrapper = (_ref9) => {
+    const wrapper = _ref9 => {
       let {
         children
       } = _ref9;
@@ -350,19 +323,17 @@ describe('useDataMutation', () => {
         data: data
       }, children);
     };
-
     const {
-      result,
-      waitFor
-    } = (0, _reactHooks.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation), {
+      result
+    } = (0, _react.renderHook)(() => (0, _useDataMutation.useDataMutation)(mutation), {
       wrapper
     });
     let mutatePromise;
     const [mutate] = result.current;
-    (0, _reactHooks.act)(() => {
+    (0, _react.act)(() => {
       mutatePromise = mutate();
     });
-    await waitFor(() => {
+    await (0, _react.waitFor)(() => {
       const [, state] = result.current;
       expect(state).toMatchObject({
         loading: false,

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

@@ -4,31 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useDataQuery = void 0;
-
+var _reactQuery = require("@tanstack/react-query");
 var _react = require("react");
-
-var _reactQuery = require("react-query");
-
 var _mergeAndCompareVariables = require("./mergeAndCompareVariables");
-
 var _useDataEngine = require("./useDataEngine");
-
 var _useStaticInput = require("./useStaticInput");
-
-const noop = () => {
-  /**
-   * Used to silence the default react-query logger. Eventually we
-   * could expose the setLogger functionality and remove the call
-   * to setLogger here.
-   */
-};
-
-(0, _reactQuery.setLogger)({
-  log: noop,
-  warn: noop,
-  error: noop
-});
-
 const useDataQuery = function (query) {
   let {
     onComplete: userOnSuccess,
@@ -47,6 +27,7 @@ const useDataQuery = function (query) {
     enabled: !initialLazy,
     refetchCallback: undefined
   });
+
   /**
    * Display current query state and refetch count in React DevTools
    */
@@ -56,53 +37,50 @@ const useDataQuery = function (query) {
     enabled: queryState.current.enabled,
     variables: queryState.current.variables
   }, debugValue => JSON.stringify(debugValue));
+
   /**
    * User callbacks and refetch handling
    */
 
   const onSuccess = data => {
     var _queryState$current$r, _queryState$current;
-
     (_queryState$current$r = (_queryState$current = queryState.current).refetchCallback) === null || _queryState$current$r === void 0 ? void 0 : _queryState$current$r.call(_queryState$current, data);
     queryState.current.refetchCallback = undefined;
-
     if (userOnSuccess) {
       userOnSuccess(data);
     }
   };
-
   const onError = error => {
     // If we'd want to reject on errors we'd call the cb with the error here
     queryState.current.refetchCallback = undefined;
-
     if (userOnError) {
       userOnError(error);
     }
   };
+
   /**
    * Setting up react-query
    */
 
-
   const engine = (0, _useDataEngine.useDataEngine)();
   const queryKey = [staticQuery, queryState.current.variables];
-
   const queryFn = () => engine.query(staticQuery, {
     variables: queryState.current.variables
   });
-
   const {
-    isIdle,
-    isFetching,
-    isLoading,
+    status,
+    fetchStatus,
     error,
     data,
     refetch: queryRefetch
-  } = (0, _reactQuery.useQuery)(queryKey, queryFn, {
+  } = (0, _reactQuery.useQuery)({
+    queryKey,
+    queryFn,
     enabled: queryState.current.enabled,
     onSuccess,
     onError
   });
+
   /**
    * Refetch allows a user to update the variables or just
    * trigger a refetch of the query with the current variables.
@@ -118,52 +96,56 @@ const useDataQuery = function (query) {
       mergedVariables,
       mergedVariablesHash
     } = (0, _mergeAndCompareVariables.mergeAndCompareVariables)(queryState.current.variables, newVariables, queryState.current.variablesHash);
+
     /**
      * If there are no updates that will trigger an automatic refetch
      * we'll need to call react-query's refetch directly
      */
-
     if (queryState.current.enabled && identical) {
       return queryRefetch({
-        cancelRefetch: true,
         throwOnError: false
-      }).then((_ref) => {
+      }).then(_ref => {
         let {
           data
         } = _ref;
         return data;
       });
     }
-
     queryState.current.variables = mergedVariables;
     queryState.current.variablesHash = mergedVariablesHash;
-    queryState.current.enabled = true; // This promise does not currently reject on errors
+    queryState.current.enabled = true;
 
+    // This promise does not currently reject on errors
     const refetchPromise = new Promise(resolve => {
       queryState.current.refetchCallback = data => {
         resolve(data);
       };
-    }); // Trigger a react-query refetch by incrementing variablesUpdateCount state
+    });
 
+    // Trigger a react-query refetch by incrementing variablesUpdateCount state
     setVariablesUpdateCount(prevCount => prevCount + 1);
     return refetchPromise;
   }, [queryRefetch]);
+
   /**
    * 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,
-    // A query is idle if it is lazy and no initial data is available.
-    called: !isIdle,
-    loading: isLoading,
-    fetching: isFetching,
+    // A query has not been called if it is lazy (fetchStatus = 'idle') and no initial data is available (status = 'loading').
+    // https://tanstack.com/query/v4/docs/framework/react/guides/queries
+    called: !(status === 'loading' && fetchStatus === 'idle'),
+    // 'loading' should only be true when actively fetching (fetchStatus = 'fetching') while there is no data yet (status = 'loading').
+    // If there is already data for the query, then 'loading' will not become 'true' when refetching, so the previous data can still be
+    // displayed while new data is fetched in the background
+    loading: fetchStatus === 'fetching' && status === 'loading',
+    // 'fetching' reflects the fetching behavior behind the scenes
+    fetching: fetchStatus === 'fetching',
     error: ourError,
     data,
     refetch
   };
 };
-
 exports.useDataQuery = useDataQuery;