@dhis2/app-runtime - npm Package Compare versions

Comparing version 1.4.3 to 1.5.0

build/cjs/index.js

@@ -71,5 +71,18 @@ 'use strict';
 }
-const useDataQuery = query => {
+
+const reduceResponses = (responses, names) => responses.reduce((out, response, idx) => {
+  out[names[idx]] = response;
+  return out;
+}, {});
+
+const fetchData = (context, query, signal) => {
   const names = Object.keys(query);
   const requests = names.map(name => query[name]);
+  const requestPromises = requests.map(q => context.fetch(q, {
+    signal: signal
+  }));
+  return Promise.all(requestPromises).then(responses => reduceResponses(responses, names));
+};
+
+const useDataQuery = query => {
   const context = React.useContext(DataContext);
@@ -79,14 +92,26 @@ const [state, setState] = React.useState({
   });
+  const [refetchCount, setRefetchCount] = React.useState(0);
+  const refetch = React.useCallback(() => setRefetchCount(count => count + 1), []);
   React.useEffect(() => {
-    Promise.all(requests.map(q => context.fetch(q))).then(responses => responses.reduce((out, response, idx) => _objectSpread({}, out, {
-      [names[idx]]: response
-    }), [])).then(data => setState({
-      loading: false,
-      data
-    })).catch(error => setState({
-      loading: false,
-      error
-    }));
-  }, []);
-  return state;
+    const controller = new AbortController();
+
+    const abort = () => controller.abort();
+
+    fetchData(context, query, controller.signal).then(data => {
+      !controller.signal.aborted && setState({
+        loading: false,
+        data
+      });
+    }).catch(error => {
+      !controller.signal.aborted && setState({
+        loading: false,
+        error
+      });
+    }); // Cleanup inflight requests
+
+    return abort;
+  }, [context, query, refetchCount]);
+  return _objectSpread({
+    refetch
+  }, state);
 };
@@ -98,12 +123,4 @@
 }) => {
-  const {
-    loading,
-    error,
-    data
-  } = useDataQuery(query);
-  return children({
-    loading,
-    error,
-    data
-  });
+  const queryState = useDataQuery(query);
+  return children(queryState);
 };
@@ -208,3 +225,3 @@
 }
-function fetchData(url, options = {}) {
+function fetchData$1(url, options = {}) {
   return fetch(url, _objectSpread$1({}, options, {
@@ -338,3 +355,3 @@ credentials: 'include',
     apiUrl,
-    fetch: (query, options) => fetchData(joinPath(queryToResourceUrl(query, context)), options)
+    fetch: (query, options) => fetchData$1(joinPath(queryToResourceUrl(query, context)), options)
   };
@@ -404,3 +421,4 @@ return context;
 const resolveCustomResource = async (customResource, query, {
-  failOnMiss
+  failOnMiss,
+  options
 }) => {
@@ -416,3 +434,3 @@ switch (typeof customResource) {
       // function
-      const result = await customResource(query);
+      const result = await customResource(query, options);
 
@@ -437,3 +455,3 @@ if (!result && failOnMiss) {
 
-  const customFetch = async query => {
+  const customFetch = async (query, options) => {
     const customResource = customData[query.resource];
@@ -450,3 +468,4 @@
     return await resolveCustomResource(customResource, query, {
-      failOnMiss
+      failOnMiss,
+      options
     });
@@ -453,0 +472,0 @@ };

build/es/index.js

@@ -1,2 +0,2 @@
-import React, { useContext, useState, useEffect } from 'react';
+import React, { useContext, useState, useCallback, useEffect } from 'react';
 
@@ -64,5 +64,18 @@ const uninitializedFetch = async () => {
 }
-const useDataQuery = query => {
+
+const reduceResponses = (responses, names) => responses.reduce((out, response, idx) => {
+  out[names[idx]] = response;
+  return out;
+}, {});
+
+const fetchData = (context, query, signal) => {
   const names = Object.keys(query);
   const requests = names.map(name => query[name]);
+  const requestPromises = requests.map(q => context.fetch(q, {
+    signal: signal
+  }));
+  return Promise.all(requestPromises).then(responses => reduceResponses(responses, names));
+};
+
+const useDataQuery = query => {
   const context = useContext(DataContext);
@@ -72,14 +85,26 @@ const [state, setState] = useState({
   });
+  const [refetchCount, setRefetchCount] = useState(0);
+  const refetch = useCallback(() => setRefetchCount(count => count + 1), []);
   useEffect(() => {
-    Promise.all(requests.map(q => context.fetch(q))).then(responses => responses.reduce((out, response, idx) => _objectSpread({}, out, {
-      [names[idx]]: response
-    }), [])).then(data => setState({
-      loading: false,
-      data
-    })).catch(error => setState({
-      loading: false,
-      error
-    }));
-  }, []);
-  return state;
+    const controller = new AbortController();
+
+    const abort = () => controller.abort();
+
+    fetchData(context, query, controller.signal).then(data => {
+      !controller.signal.aborted && setState({
+        loading: false,
+        data
+      });
+    }).catch(error => {
+      !controller.signal.aborted && setState({
+        loading: false,
+        error
+      });
+    }); // Cleanup inflight requests
+
+    return abort;
+  }, [context, query, refetchCount]);
+  return _objectSpread({
+    refetch
+  }, state);
 };
@@ -91,12 +116,4 @@
 }) => {
-  const {
-    loading,
-    error,
-    data
-  } = useDataQuery(query);
-  return children({
-    loading,
-    error,
-    data
-  });
+  const queryState = useDataQuery(query);
+  return children(queryState);
 };
@@ -201,3 +218,3 @@
 }
-function fetchData(url, options = {}) {
+function fetchData$1(url, options = {}) {
   return fetch(url, _objectSpread$1({}, options, {
@@ -331,3 +348,3 @@ credentials: 'include',
     apiUrl,
-    fetch: (query, options) => fetchData(joinPath(queryToResourceUrl(query, context)), options)
+    fetch: (query, options) => fetchData$1(joinPath(queryToResourceUrl(query, context)), options)
   };
@@ -397,3 +414,4 @@ return context;
 const resolveCustomResource = async (customResource, query, {
-  failOnMiss
+  failOnMiss,
+  options
 }) => {
@@ -409,3 +427,3 @@ switch (typeof customResource) {
       // function
-      const result = await customResource(query);
+      const result = await customResource(query, options);
 
@@ -430,3 +448,3 @@ if (!result && failOnMiss) {
 
-  const customFetch = async query => {
+  const customFetch = async (query, options) => {
     const customResource = customData[query.resource];
@@ -443,3 +461,4 @@
     return await resolveCustomResource(customResource, query, {
-      failOnMiss
+      failOnMiss,
+      options
     });
@@ -446,0 +465,0 @@ };

package.json

 {
     "name": "@dhis2/app-runtime",
     "description": "A singular runtime dependency for applications on the DHIS2 platform",
-    "version": "1.4.3",
+    "version": "1.5.0",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "types": "build/types/index.d.ts",
-    "repository": "https://github.com/dhis2/app-runtime.git",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/dhis2/app-runtime.git",
+        "directory": "runtime"
+    },
     "author": "Austin McGee <[e-mail]>",
@@ -18,4 +22,4 @@ "license": "BSD-3-Clause",
     "devDependencies": {
-        "@dhis2/app-service-config": "1.4.3",
-        "@dhis2/app-service-data": "1.4.3"
+        "@dhis2/app-service-config": "1.5.0",
+        "@dhis2/app-service-data": "1.5.0"
     },
@@ -22,0 +26,0 @@ "peerDependencies": {

README.md

@@ -15,2 +15,11 @@ # DHIS2 Application Runtime
 
+## Required Polyfills
+
+The following must be polyfilled to support older and non-compliant browsers (i.e. IE11):
+
+* es6.promise (i.e. [core-js/features/promise](https://github.com/zloirock/core-js))
+* window.fetch (i.e. [whatwg-fetch](https://github.com/github/fetch))
+* AbortController / AbortSignal (i.e. [abortcontroller-polyfill](https://www.npmjs.com/package/abortcontroller-polyfill))
+
+
 ## Usage
@@ -20,2 +29,3 @@
 
+-   [config](../services/config) - contextualized application configuration
 -   [data](../services/data) - declarative data fetching for DHIS2 api queries

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26984

increased by7.69%

Lines of code

815

increased by3.3%

Number of lines in readme file

30

increased by50%

Number of low supply chain risk alerts

0

decreased by-100%

No dependency changes