@dhis2/app-service-data 3.4.1 → 3.4.2

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

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mergeAndCompareVariables = void 0;
+
+var _stableVariablesHash = require("./stableVariablesHash");
+
+const mergeAndCompareVariables = (previousVariables, newVariables, previousHash) => {
+  if (!newVariables) {
+    return {
+      identical: true,
+      mergedVariablesHash: previousHash,
+      mergedVariables: previousVariables
+    };
+  } // Use cached hash if it exists
+
+
+  const currentHash = previousHash || (0, _stableVariablesHash.stableVariablesHash)(previousVariables);
+  const mergedVariables = { ...previousVariables,
+    ...newVariables
+  };
+  const mergedVariablesHash = (0, _stableVariablesHash.stableVariablesHash)(mergedVariables);
+  const identical = currentHash === mergedVariablesHash;
+  return {
+    identical,
+    mergedVariablesHash,
+    mergedVariables
+  };
+};
+
+exports.mergeAndCompareVariables = mergeAndCompareVariables;

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

@@ -0,0 +1,57 @@
+"use strict";
+
+var _mergeAndCompareVariables = require("./mergeAndCompareVariables");
+
+var _stableVariablesHash = require("./stableVariablesHash");
+
+jest.mock('./stableVariablesHash', () => ({
+  stableVariablesHash: object => JSON.stringify(object)
+}));
+const testVariables = {
+  question: 'What do you get when you multiply six by nine?',
+  answer: 42
+};
+const testHash = (0, _stableVariablesHash.stableVariablesHash)(testVariables);
+describe('mergeAndCompareVariables', () => {
+  it('Should return previous variables and hash when no new variables are provided', () => {
+    expect((0, _mergeAndCompareVariables.mergeAndCompareVariables)(testVariables, undefined, undefined)).toMatchObject({
+      identical: true,
+      mergedVariables: testVariables,
+      mergedVariablesHash: undefined
+    });
+  });
+  it('Should return identical: true when merged variables are identical to old variables (without prev hash)', () => {
+    const newVariables = {
+      answer: testVariables.answer
+    };
+    expect((0, _mergeAndCompareVariables.mergeAndCompareVariables)(testVariables, newVariables, undefined)).toMatchObject({
+      identical: true,
+      mergedVariables: testVariables,
+      mergedVariablesHash: testHash
+    });
+  });
+  it('Should return identical: false with incorrect previous hash', () => {
+    const incorrectPreviousHash = 'IAmAHash';
+    const newVariables = {
+      answer: 42
+    };
+    expect((0, _mergeAndCompareVariables.mergeAndCompareVariables)(testVariables, newVariables, incorrectPreviousHash)).toMatchObject({
+      identical: false,
+      mergedVariables: testVariables,
+      mergedVariablesHash: testHash
+    });
+  });
+  it('Should return identical: false when merged variables are different than old variables', () => {
+    const newVariables = {
+      answer: 43
+    };
+    const expectedMergedVariables = { ...testVariables,
+      ...newVariables
+    };
+    expect((0, _mergeAndCompareVariables.mergeAndCompareVariables)(testVariables, newVariables, testHash)).toMatchObject({
+      identical: false,
+      mergedVariables: expectedMergedVariables,
+      mergedVariablesHash: (0, _stableVariablesHash.stableVariablesHash)(expectedMergedVariables)
+    });
+  });
+});

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

@@ -9,7 +9,7 @@ var _react = require("react");
 
 var _reactQuery = require("react-query");
 
-var _stableVariablesHash = require("./stableVariablesHash");
+var _mergeAndCompareVariables = require("./mergeAndCompareVariables");
 
 var _useDataEngine = require("./useDataEngine");
 
@@ -35,24 +35,35 @@ const useDataQuery = (query, {
   variables: initialVariables = {},
   lazy: initialLazy = false
 } = {}) => {
-  const variablesHash = (0, _react.useRef)(null);
-  const [variables, setVariables] = (0, _react.useState)(initialVariables);
-  const [enabled, setEnabled] = (0, _react.useState)(!initialLazy);
   const [staticQuery] = (0, _useStaticInput.useStaticInput)(query, {
     warn: true,
     name: 'query'
   });
+  const [variablesUpdateCount, setVariablesUpdateCount] = (0, _react.useState)(0);
+  const queryState = (0, _react.useRef)({
+    variables: initialVariables,
+    variablesHash: undefined,
+    enabled: !initialLazy,
+    refetchCallback: undefined
+  });
   /**
-   * User callbacks and refetch handling
+   * Display current query state and refetch count in React DevTools
    */
 
-  const refetchCallback = (0, _react.useRef)(null);
+  (0, _react.useDebugValue)({
+    variablesUpdateCount,
+    enabled: queryState.current.enabled,
+    variables: queryState.current.variables
+  }, debugValue => JSON.stringify(debugValue));
+  /**
+   * User callbacks and refetch handling
+   */
 
   const onSuccess = data => {
-    if (refetchCallback.current) {
-      refetchCallback.current(data);
-      refetchCallback.current = null;
-    }
+    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);
@@ -61,9 +72,7 @@ const useDataQuery = (query, {
 
   const onError = error => {
     // If we'd want to reject on errors we'd call the cb with the error here
-    if (refetchCallback.current) {
-      refetchCallback.current = null;
-    }
+    queryState.current.refetchCallback = undefined;
 
     if (userOnError) {
       userOnError(error);
@@ -75,10 +84,10 @@ const useDataQuery = (query, {
 
 
   const engine = (0, _useDataEngine.useDataEngine)();
-  const queryKey = [staticQuery, variables];
+  const queryKey = [staticQuery, queryState.current.variables];
 
   const queryFn = () => engine.query(staticQuery, {
-    variables
+    variables: queryState.current.variables
   });
 
   const {
@@ -89,7 +98,7 @@ const useDataQuery = (query, {
     data,
     refetch: queryRefetch
   } = (0, _reactQuery.useQuery)(queryKey, queryFn, {
-    enabled,
+    enabled: queryState.current.enabled,
     onSuccess,
     onError
   });
@@ -103,11 +112,17 @@ const useDataQuery = (query, {
    */
 
   const refetch = (0, _react.useCallback)(newVariables => {
+    const {
+      identical,
+      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 (enabled && !newVariables) {
+
+    if (queryState.current.enabled && identical) {
       return queryRefetch({
         cancelRefetch: true,
         throwOnError: false
@@ -116,44 +131,19 @@ const useDataQuery = (query, {
       }) => data);
     }
 
-    if (newVariables) {
-      // Use cached hash if it exists
-      const currentHash = variablesHash.current || (0, _stableVariablesHash.stableVariablesHash)(variables);
-      const mergedVariables = { ...variables,
-        ...newVariables
-      };
-      const mergedHash = (0, _stableVariablesHash.stableVariablesHash)(mergedVariables);
-      const identical = currentHash === mergedHash;
-
-      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
-        }).then(({
-          data
-        }) => data);
-      } else {
-        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
-
-
-    return new Promise(resolve => {
-      refetchCallback.current = data => {
+    queryState.current.variables = mergedVariables;
+    queryState.current.variablesHash = mergedVariablesHash;
+    queryState.current.enabled = true; // This promise does not currently reject on errors
+
+    const refetchPromise = new Promise(resolve => {
+      queryState.current.refetchCallback = data => {
         resolve(data);
       };
-    });
-  }, [enabled, queryRefetch, variables]);
+    }); // 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.

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

@@ -507,6 +507,65 @@ describe('useDataQuery', () => {
     });
   });
   describe('return values: refetch', () => {
+    it('Should be stable if the query variables change', async () => {
+      let count = 0;
+      const spy = jest.fn(() => {
+        count++;
+        return count;
+      });
+      const data = {
+        answer: spy
+      };
+      const query = {
+        x: {
+          resource: 'answer'
+        }
+      };
+
+      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();
+      const initialRefetch = result.current.refetch;
+      (0, _reactHooks.act)(() => {
+        initialRefetch();
+      });
+      await waitFor(() => {
+        expect(result.current).toMatchObject({
+          loading: false,
+          called: true,
+          data: {
+            x: 1
+          }
+        });
+      });
+      expect(spy).toHaveBeenCalledTimes(1);
+      (0, _reactHooks.act)(() => {
+        initialRefetch();
+      });
+      await waitFor(() => {
+        expect(result.current).toMatchObject({
+          loading: false,
+          called: true,
+          data: {
+            x: 2
+          }
+        });
+      });
+      expect(spy).toHaveBeenCalledTimes(2);
+      expect(initialRefetch).toBe(result.current.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') {

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

@@ -13,6 +13,7 @@ const useStaticInput = (staticValue, {
 } = {}) => {
   const originalValue = (0, _react.useRef)(staticValue);
   const [value, setValue] = (0, _react.useState)(() => originalValue.current);
+  (0, _react.useDebugValue)(value, debugValue => "".concat(name, ": ").concat(JSON.stringify(debugValue)));
   (0, _react.useEffect)(() => {
     if (warn && originalValue.current !== staticValue) {
       console.warn("The ".concat(name, " should be static, don't create it within the render loop!"));

package/build/es/react/hooks/mergeAndCompareVariables.js

@@ -0,0 +1,23 @@
+import { stableVariablesHash } from './stableVariablesHash';
+export const mergeAndCompareVariables = (previousVariables, newVariables, previousHash) => {
+  if (!newVariables) {
+    return {
+      identical: true,
+      mergedVariablesHash: previousHash,
+      mergedVariables: previousVariables
+    };
+  } // Use cached hash if it exists
+
+
+  const currentHash = previousHash || stableVariablesHash(previousVariables);
+  const mergedVariables = { ...previousVariables,
+    ...newVariables
+  };
+  const mergedVariablesHash = stableVariablesHash(mergedVariables);
+  const identical = currentHash === mergedVariablesHash;
+  return {
+    identical,
+    mergedVariablesHash,
+    mergedVariables
+  };
+};

package/build/es/react/hooks/mergeAndCompareVariables.test.js

@@ -0,0 +1,53 @@
+import { mergeAndCompareVariables } from './mergeAndCompareVariables';
+import { stableVariablesHash } from './stableVariablesHash';
+jest.mock('./stableVariablesHash', () => ({
+  stableVariablesHash: object => JSON.stringify(object)
+}));
+const testVariables = {
+  question: 'What do you get when you multiply six by nine?',
+  answer: 42
+};
+const testHash = stableVariablesHash(testVariables);
+describe('mergeAndCompareVariables', () => {
+  it('Should return previous variables and hash when no new variables are provided', () => {
+    expect(mergeAndCompareVariables(testVariables, undefined, undefined)).toMatchObject({
+      identical: true,
+      mergedVariables: testVariables,
+      mergedVariablesHash: undefined
+    });
+  });
+  it('Should return identical: true when merged variables are identical to old variables (without prev hash)', () => {
+    const newVariables = {
+      answer: testVariables.answer
+    };
+    expect(mergeAndCompareVariables(testVariables, newVariables, undefined)).toMatchObject({
+      identical: true,
+      mergedVariables: testVariables,
+      mergedVariablesHash: testHash
+    });
+  });
+  it('Should return identical: false with incorrect previous hash', () => {
+    const incorrectPreviousHash = 'IAmAHash';
+    const newVariables = {
+      answer: 42
+    };
+    expect(mergeAndCompareVariables(testVariables, newVariables, incorrectPreviousHash)).toMatchObject({
+      identical: false,
+      mergedVariables: testVariables,
+      mergedVariablesHash: testHash
+    });
+  });
+  it('Should return identical: false when merged variables are different than old variables', () => {
+    const newVariables = {
+      answer: 43
+    };
+    const expectedMergedVariables = { ...testVariables,
+      ...newVariables
+    };
+    expect(mergeAndCompareVariables(testVariables, newVariables, testHash)).toMatchObject({
+      identical: false,
+      mergedVariables: expectedMergedVariables,
+      mergedVariablesHash: stableVariablesHash(expectedMergedVariables)
+    });
+  });
+});

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

@@ -1,6 +1,6 @@
-import { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useCallback, useDebugValue } from 'react';
 import { useQuery, setLogger } from 'react-query';
-import { stableVariablesHash } from './stableVariablesHash';
+import { mergeAndCompareVariables } from './mergeAndCompareVariables';
 import { useDataEngine } from './useDataEngine';
 import { useStaticInput } from './useStaticInput';
 
@@ -23,24 +23,35 @@ export const useDataQuery = (query, {
   variables: initialVariables = {},
   lazy: initialLazy = false
 } = {}) => {
-  const variablesHash = useRef(null);
-  const [variables, setVariables] = useState(initialVariables);
-  const [enabled, setEnabled] = useState(!initialLazy);
   const [staticQuery] = useStaticInput(query, {
     warn: true,
     name: 'query'
   });
+  const [variablesUpdateCount, setVariablesUpdateCount] = useState(0);
+  const queryState = useRef({
+    variables: initialVariables,
+    variablesHash: undefined,
+    enabled: !initialLazy,
+    refetchCallback: undefined
+  });
   /**
-   * User callbacks and refetch handling
+   * Display current query state and refetch count in React DevTools
    */
 
-  const refetchCallback = useRef(null);
+  useDebugValue({
+    variablesUpdateCount,
+    enabled: queryState.current.enabled,
+    variables: queryState.current.variables
+  }, debugValue => JSON.stringify(debugValue));
+  /**
+   * User callbacks and refetch handling
+   */
 
   const onSuccess = data => {
-    if (refetchCallback.current) {
-      refetchCallback.current(data);
-      refetchCallback.current = null;
-    }
+    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);
@@ -49,9 +60,7 @@ export const useDataQuery = (query, {
 
   const onError = error => {
     // If we'd want to reject on errors we'd call the cb with the error here
-    if (refetchCallback.current) {
-      refetchCallback.current = null;
-    }
+    queryState.current.refetchCallback = undefined;
 
     if (userOnError) {
       userOnError(error);
@@ -63,10 +72,10 @@ export const useDataQuery = (query, {
 
 
   const engine = useDataEngine();
-  const queryKey = [staticQuery, variables];
+  const queryKey = [staticQuery, queryState.current.variables];
 
   const queryFn = () => engine.query(staticQuery, {
-    variables
+    variables: queryState.current.variables
   });
 
   const {
@@ -77,7 +86,7 @@ export const useDataQuery = (query, {
     data,
     refetch: queryRefetch
   } = useQuery(queryKey, queryFn, {
-    enabled,
+    enabled: queryState.current.enabled,
     onSuccess,
     onError
   });
@@ -91,11 +100,17 @@ export const useDataQuery = (query, {
    */
 
   const refetch = useCallback(newVariables => {
+    const {
+      identical,
+      mergedVariables,
+      mergedVariablesHash
+    } = 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 (enabled && !newVariables) {
+
+    if (queryState.current.enabled && identical) {
       return queryRefetch({
         cancelRefetch: true,
         throwOnError: false
@@ -104,44 +119,19 @@ export const useDataQuery = (query, {
       }) => data);
     }
 
-    if (newVariables) {
-      // Use cached hash if it exists
-      const currentHash = variablesHash.current || stableVariablesHash(variables);
-      const mergedVariables = { ...variables,
-        ...newVariables
-      };
-      const mergedHash = stableVariablesHash(mergedVariables);
-      const identical = currentHash === mergedHash;
-
-      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
-        }).then(({
-          data
-        }) => data);
-      } else {
-        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
-
-
-    return new Promise(resolve => {
-      refetchCallback.current = data => {
+    queryState.current.variables = mergedVariables;
+    queryState.current.variablesHash = mergedVariablesHash;
+    queryState.current.enabled = true; // This promise does not currently reject on errors
+
+    const refetchPromise = new Promise(resolve => {
+      queryState.current.refetchCallback = data => {
         resolve(data);
       };
-    });
-  }, [enabled, queryRefetch, variables]);
+    }); // 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.

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

@@ -497,6 +497,65 @@ describe('useDataQuery', () => {
     });
   });
   describe('return values: refetch', () => {
+    it('Should be stable if the query variables change', async () => {
+      let count = 0;
+      const spy = jest.fn(() => {
+        count++;
+        return count;
+      });
+      const data = {
+        answer: spy
+      };
+      const query = {
+        x: {
+          resource: 'answer'
+        }
+      };
+
+      const wrapper = ({
+        children
+      }) => /*#__PURE__*/React.createElement(CustomDataProvider, {
+        data: data
+      }, children);
+
+      const {
+        result,
+        waitFor
+      } = renderHook(() => useDataQuery(query, {
+        lazy: true
+      }), {
+        wrapper
+      });
+      expect(spy).not.toHaveBeenCalled();
+      const initialRefetch = result.current.refetch;
+      act(() => {
+        initialRefetch();
+      });
+      await waitFor(() => {
+        expect(result.current).toMatchObject({
+          loading: false,
+          called: true,
+          data: {
+            x: 1
+          }
+        });
+      });
+      expect(spy).toHaveBeenCalledTimes(1);
+      act(() => {
+        initialRefetch();
+      });
+      await waitFor(() => {
+        expect(result.current).toMatchObject({
+          loading: false,
+          called: true,
+          data: {
+            x: 2
+          }
+        });
+      });
+      expect(spy).toHaveBeenCalledTimes(2);
+      expect(initialRefetch).toBe(result.current.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') {

package/build/es/react/hooks/useStaticInput.js

@@ -1,10 +1,11 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useDebugValue } from 'react';
 export const useStaticInput = (staticValue, {
   warn = false,
   name = 'input'
 } = {}) => {
   const originalValue = useRef(staticValue);
   const [value, setValue] = useState(() => originalValue.current);
+  useDebugValue(value, debugValue => "".concat(name, ": ").concat(JSON.stringify(debugValue)));
   useEffect(() => {
     if (warn && originalValue.current !== staticValue) {
       console.warn("The ".concat(name, " should be static, don't create it within the render loop!"));

package/build/types/react/hooks/mergeAndCompareVariables.d.ts

@@ -0,0 +1,6 @@
+import type { QueryVariables } from '../../engine';
+export declare const mergeAndCompareVariables: (previousVariables?: QueryVariables | undefined, newVariables?: QueryVariables | undefined, previousHash?: string | undefined) => {
+    identical: boolean;
+    mergedVariablesHash: string | undefined;
+    mergedVariables: QueryVariables | undefined;
+};

package/build/types/react/hooks/useDataQuery.d.ts

@@ -1,3 +1,3 @@
-import { Query, QueryOptions } from '../../engine';
-import { QueryRenderInput } from '../../types';
+import type { Query, QueryOptions } from '../../engine';
+import type { QueryRenderInput } from '../../types';
 export declare const useDataQuery: (query: Query, { onComplete: userOnSuccess, onError: userOnError, variables: initialVariables, lazy: initialLazy, }?: QueryOptions) => QueryRenderInput;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/app-service-data",
-    "version": "3.4.1",
+    "version": "3.4.2",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "types": "build/types/index.d.ts",
@@ -22,7 +22,7 @@
         "build/**"
     ],
     "peerDependencies": {
-        "@dhis2/app-service-config": "3.4.1",
+        "@dhis2/app-service-config": "3.4.2",
         "@dhis2/cli-app-scripts": "^7.1.1",
         "prop-types": "^15.7.2",
         "react": "^16.8",