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

package/build/es/react/components/DataProvider.js

@@ -1,7 +1,8 @@
 /* eslint-disable react/no-unused-prop-types */
+
 import { useConfig } from '@dhis2/app-service-config';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
 import { DataEngine } from '../../engine';
 import { RestAPILink } from '../../links';
 import { DataContext } from '../context/DataContext';
@@ -17,13 +18,18 @@ export const queryClientOptions = {
       // Don't refetch when the window regains focus
       refetchOnWindowFocus: false,
       // Don't refetch after connection issues
-      refetchOnReconnect: false
+      refetchOnReconnect: false,
+      // RQv4 uses 'online' as the default, which pauses queries without network connection.
+      // 'always' reestablishes behavior from v3, and lets requests fire when offline
+      // https://tanstack.com/query/latest/docs/framework/react/guides/network-mode
+      networkMode: 'always'
     }
   }
 };
 const queryClient = new QueryClient(queryClientOptions);
 export const DataProvider = props => {
-  const config = { ...useConfig(),
+  const config = {
+    ...useConfig(),
     ...props
   };
   const link = new RestAPILink(config);

package/build/es/react/components/DataProvider.test.js

@@ -7,7 +7,7 @@ import { DataProvider } from './DataProvider';
 describe('DataProvider', () => {
   it('Should pass a new engine and RestAPILink to consumers', () => {
     const renderFunction = jest.fn();
-    render( /*#__PURE__*/React.createElement(DataProvider, {
+    render(/*#__PURE__*/React.createElement(DataProvider, {
       baseUrl: "test",
       apiVersion: 42
     }, /*#__PURE__*/React.createElement(DataContext.Consumer, null, renderFunction)));

package/build/es/react/components/DataQuery.js

@@ -1,5 +1,5 @@
 import { useDataQuery } from '../hooks/useDataQuery';
-export const DataQuery = (_ref) => {
+export const DataQuery = _ref => {
   let {
     query,
     onComplete,

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

@@ -6,11 +6,12 @@ export const mergeAndCompareVariables = (previousVariables, newVariables, previo
       mergedVariablesHash: previousHash,
       mergedVariables: previousVariables
     };
-  } // Use cached hash if it exists
-
+  }
 
+  // Use cached hash if it exists
   const currentHash = previousHash || stableVariablesHash(previousVariables);
-  const mergedVariables = { ...previousVariables,
+  const mergedVariables = {
+    ...previousVariables,
     ...newVariables
   };
   const mergedVariablesHash = stableVariablesHash(mergedVariables);

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

@@ -41,7 +41,8 @@ describe('mergeAndCompareVariables', () => {
     const newVariables = {
       answer: 43
     };
-    const expectedMergedVariables = { ...testVariables,
+    const expectedMergedVariables = {
+      ...testVariables,
       ...newVariables
     };
     expect(mergeAndCompareVariables(testVariables, newVariables, testHash)).toMatchObject({

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

@@ -1,42 +1,40 @@
 function hasObjectPrototype(o) {
   return Object.prototype.toString.call(o) === '[object Object]';
-} // eslint-disable-next-line @typescript-eslint/ban-types
-
+}
 
+// eslint-disable-next-line @typescript-eslint/ban-types
 export function isPlainObject(o) {
   if (!hasObjectPrototype(o)) {
     return false;
-  } // If has modified constructor
-
+  }
 
+  // If has modified constructor
   const ctor = o.constructor;
-
   if (typeof ctor === 'undefined') {
     return true;
-  } // If has modified prototype
-
+  }
 
+  // If has modified prototype
   const prot = ctor.prototype;
-
   if (!hasObjectPrototype(prot)) {
     return false;
-  } // If constructor does not have an Object-specific method
-
+  }
 
+  // If constructor does not have an Object-specific method
   if (!Object.prototype.hasOwnProperty.call(prot, 'isPrototypeOf')) {
     return false;
-  } // Most likely a plain Object
-
+  }
 
+  // Most likely a plain Object
   return true;
 }
+
 /**
  * Hashes the value into a stable hash.
  */
 
 export function stableVariablesHash(value) {
   let hash;
-
   try {
     hash = JSON.stringify(value, (_, val) => isPlainObject(val) ? Object.keys(val).sort().reduce((result, key) => {
       result[key] = val[key];
@@ -45,6 +43,5 @@ export function stableVariablesHash(value) {
   } catch (e) {
     throw new Error('Could not serialize variables. Make sure that the variables do not contain circular references and can be processed by JSON.stringify.');
   }
-
   return hash;
 }

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

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act, waitFor } from '@testing-library/react';
 import * as React from 'react';
 import { CustomDataProvider } from '../components/CustomDataProvider';
 import { useDataEngine } from './useDataEngine';
@@ -15,8 +15,7 @@ describe('useDataMutation', () => {
     const data = {
       answer: 42
     };
-
-    const wrapper = (_ref) => {
+    const wrapper = _ref => {
       let {
         children
       } = _ref;
@@ -24,10 +23,8 @@ describe('useDataMutation', () => {
         data: data
       }, children);
     };
-
     const {
-      result,
-      waitFor
+      result
     } = renderHook(() => useDataMutation(mutation), {
       wrapper
     });
@@ -66,8 +63,7 @@ describe('useDataMutation', () => {
     const data = {
       answer: 42
     };
-
-    const wrapper = (_ref2) => {
+    const wrapper = _ref2 => {
       let {
         children
       } = _ref2;
@@ -75,10 +71,8 @@ describe('useDataMutation', () => {
         data: data
       }, children);
     };
-
     const {
-      result,
-      waitFor
+      result
     } = renderHook(() => useDataMutation(mutation, {
       lazy: false
     }), {
@@ -110,8 +104,7 @@ describe('useDataMutation', () => {
     const data = {
       answer: 42
     };
-
-    const wrapper = (_ref3) => {
+    const wrapper = _ref3 => {
       let {
         children
       } = _ref3;
@@ -119,10 +112,8 @@ describe('useDataMutation', () => {
         data: data
       }, children);
     };
-
     const {
-      result,
-      waitFor
+      result
     } = renderHook(() => useDataMutation(mutation, {
       onComplete
     }), {
@@ -159,8 +150,7 @@ describe('useDataMutation', () => {
         throw error;
       }
     };
-
-    const wrapper = (_ref4) => {
+    const wrapper = _ref4 => {
       let {
         children
       } = _ref4;
@@ -168,10 +158,8 @@ describe('useDataMutation', () => {
         data: data
       }, children);
     };
-
     const {
-      result,
-      waitFor
+      result
     } = renderHook(() => useDataMutation(mutation, {
       onError
     }), {
@@ -197,7 +185,7 @@ describe('useDataMutation', () => {
     const mutation = {
       type: 'update',
       resource: 'answer',
-      id: (_ref5) => {
+      id: _ref5 => {
         let {
           id
         } = _ref5;
@@ -211,8 +199,7 @@ describe('useDataMutation', () => {
     const data = {
       answer: answerSpy
     };
-
-    const wrapper = (_ref6) => {
+    const wrapper = _ref6 => {
       let {
         children
       } = _ref6;
@@ -220,10 +207,8 @@ describe('useDataMutation', () => {
         data: data
       }, children);
     };
-
     const {
-      result,
-      waitFor
+      result
     } = renderHook(() => useDataMutation(mutation, {
       lazy: false,
       variables: {
@@ -257,8 +242,7 @@ describe('useDataMutation', () => {
         answer: '?'
       }
     };
-
-    const wrapper = (_ref7) => {
+    const wrapper = _ref7 => {
       let {
         children
       } = _ref7;
@@ -266,18 +250,17 @@ describe('useDataMutation', () => {
         data: {}
       }, children);
     };
-
     const engineHook = renderHook(() => useDataEngine(), {
       wrapper
     });
     const mutationHook = renderHook(() => 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 () => {
@@ -291,8 +274,7 @@ describe('useDataMutation', () => {
     const data = {
       answer: 42
     };
-
-    const wrapper = (_ref8) => {
+    const wrapper = _ref8 => {
       let {
         children
       } = _ref8;
@@ -300,7 +282,6 @@ describe('useDataMutation', () => {
         data: data
       }, children);
     };
-
     const {
       result
     } = renderHook(() => useDataMutation(mutation), {
@@ -330,8 +311,7 @@ describe('useDataMutation', () => {
     const data = {
       answer: 42
     };
-
-    const wrapper = (_ref9) => {
+    const wrapper = _ref9 => {
       let {
         children
       } = _ref9;
@@ -339,10 +319,8 @@ describe('useDataMutation', () => {
         data: data
       }, children);
     };
-
     const {
-      result,
-      waitFor
+      result
     } = renderHook(() => useDataMutation(mutation), {
       wrapper
     });

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

@@ -1,22 +1,8 @@
+import { useQuery } from '@tanstack/react-query';
 import { useState, useRef, useCallback, useDebugValue } from 'react';
-import { useQuery, setLogger } from 'react-query';
 import { mergeAndCompareVariables } from './mergeAndCompareVariables';
 import { useDataEngine } from './useDataEngine';
 import { useStaticInput } from './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.
-   */
-};
-
-setLogger({
-  log: noop,
-  warn: noop,
-  error: noop
-});
 export const useDataQuery = function (query) {
   let {
     onComplete: userOnSuccess,
@@ -35,6 +21,7 @@ export const useDataQuery = function (query) {
     enabled: !initialLazy,
     refetchCallback: undefined
   });
+
   /**
    * Display current query state and refetch count in React DevTools
    */
@@ -44,53 +31,50 @@ export 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 = 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
-  } = useQuery(queryKey, queryFn, {
+  } = 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.
@@ -106,48 +90,53 @@ export const useDataQuery = function (query) {
       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 (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