@dhis2/app-service-data 3.12.0-alpha.1 → 3.12.0

package/build/cjs/react/components/CustomDataProvider.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CustomDataProvider = void 0;
+var _reactQuery = require("@tanstack/react-query");
 var _react = _interopRequireDefault(require("react"));
-var _reactQuery = require("react-query");
 var _engine = require("../../engine");
 var _links = require("../../links");
 var _DataContext = require("../context/DataContext");

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.queryClientOptions = exports.DataProvider = void 0;
 var _appServiceConfig = require("@dhis2/app-service-config");
+var _reactQuery = require("@tanstack/react-query");
 var _react = _interopRequireDefault(require("react"));
-var _reactQuery = require("react-query");
 var _engine = require("../../engine");
 var _links = require("../../links");
 var _DataContext = require("../context/DataContext");
@@ -25,7 +25,11 @@ const queryClientOptions = exports.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'
     }
   }
 };

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

@@ -4,23 +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,
@@ -80,13 +68,14 @@ const useDataQuery = function (query) {
     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
@@ -114,7 +103,6 @@ const useDataQuery = function (query) {
      */
     if (queryState.current.enabled && identical) {
       return queryRefetch({
-        cancelRefetch: true,
         throwOnError: false
       }).then(_ref => {
         let {
@@ -146,10 +134,15 @@ const useDataQuery = function (query) {
   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

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

@@ -1,5 +1,5 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
 import { DataEngine } from '../../engine';
 import { CustomDataLink } from '../../links';
 import { DataContext } from '../context/DataContext';

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

@@ -1,8 +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';
@@ -18,7 +18,11 @@ 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'
     }
   }
 };

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

@@ -1,20 +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,
@@ -74,13 +62,14 @@ export const useDataQuery = function (query) {
     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
@@ -108,7 +97,6 @@ export const useDataQuery = function (query) {
      */
     if (queryState.current.enabled && identical) {
       return queryRefetch({
-        cancelRefetch: true,
         throwOnError: false
       }).then(_ref => {
         let {
@@ -140,10 +128,15 @@ export const useDataQuery = function (query) {
   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

package/build/types/react/components/DataProvider.d.ts

@@ -1,18 +1,9 @@
+import { type QueryClientConfig } from '@tanstack/react-query';
 import React from 'react';
 export interface ProviderInput {
     baseUrl?: string;
     apiVersion?: number;
     children: React.ReactNode;
 }
-export declare const queryClientOptions: {
-    defaultOptions: {
-        queries: {
-            retry: boolean;
-            retryOnMount: boolean;
-            refetchOnMount: boolean;
-            refetchOnWindowFocus: boolean;
-            refetchOnReconnect: boolean;
-        };
-    };
-};
+export declare const queryClientOptions: QueryClientConfig;
 export declare const DataProvider: (props: ProviderInput) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/app-service-data",
-    "version": "3.12.0-alpha.1",
+    "version": "3.12.0",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "types": "build/types/index.d.ts",
@@ -32,10 +32,10 @@
         "coverage": "yarn test --coverage"
     },
     "dependencies": {
-        "react-query": "^3.13.11"
+        "@tanstack/react-query": "^4.36.1"
     },
     "peerDependencies": {
-        "@dhis2/app-service-config": "3.12.0-alpha.1",
+        "@dhis2/app-service-config": "3.12.0",
         "prop-types": "^15.7.2",
         "react": "^16.8 || ^18",
         "react-dom": "^16.8 || ^18"