@khanacademy/wonder-blocks-data 8.0.3 → 8.0.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-data
 
+## 8.0.4
+
+### Patch Changes
+
+-   dc2e00f4: Do not fetch if FetchPolicy is CacheBeforeNetwork and there is already a cached value, even if the requestId changes
+
 ## 8.0.3
 
 ### Patch Changes

package/dist/es/index.js

@@ -585,7 +585,6 @@ const useCachedEffect = (requestId, handler, options = {}) => {
 
     return fetchFn;
   }, [requestId, onResultChanged, forceUpdate, setMostRecentResult, fetchPolicy]);
-  const requestIdRef = React.useRef(requestId);
   const shouldFetch = React.useMemo(() => {
     if (hardSkip) {
       return false;
@@ -596,14 +595,13 @@ const useCachedEffect = (requestId, handler, options = {}) => {
         return false;
 
       case FetchPolicy.CacheBeforeNetwork:
-        return mostRecentResult == null || requestId !== requestIdRef.current;
+        return mostRecentResult == null;
 
       case FetchPolicy.CacheAndNetwork:
       case FetchPolicy.NetworkOnly:
         return networkResultRef.current == null;
     }
-  }, [requestId, mostRecentResult, fetchPolicy, hardSkip]);
-  requestIdRef.current = requestId;
+  }, [mostRecentResult, fetchPolicy, hardSkip]);
   React.useEffect(() => {
     if (!shouldFetch) {
       return;

package/dist/index.js

@@ -175,17 +175,10 @@ module.exports = require("@khanacademy/wonder-blocks-core");
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return FetchPolicy; });
-// TODO(somewhatabstract, FEI-4172): Update eslint-plugin-flowtype when
-// they've fixed https://github.com/gajus/eslint-plugin-flowtype/issues/502
-
-/* eslint-disable no-undef */
-
 /**
  * Defines the various fetch policies that can be applied to requests.
  */
 const FetchPolicy = __webpack_require__(22).Mirrored(["CacheBeforeNetwork", "CacheAndNetwork", "CacheOnly", "NetworkOnly"]);
-/* eslint-enable no-undef */
-
 /**
  * Define what can be cached.
  *
@@ -1343,10 +1336,7 @@ const useCachedEffect = (requestId, handler, options = {}) => {
     // really make sense - the same requestId should be handled the same as
     // each other.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [requestId, onResultChanged, forceUpdate, setMostRecentResult, fetchPolicy]); // We need to trigger a re-render when the request ID changes as that
-  // indicates its a different request.
-
-  const requestIdRef = react__WEBPACK_IMPORTED_MODULE_0__["useRef"](requestId); // Calculate if we want to fetch the result or not.
+  }, [requestId, onResultChanged, forceUpdate, setMostRecentResult, fetchPolicy]); // Calculate if we want to fetch the result or not.
   // If this is true, we will do a new fetch, cancelling the previous fetch
   // if there is one inflight.
 
@@ -1363,9 +1353,8 @@ const useCachedEffect = (requestId, handler, options = {}) => {
         return false;
 
       case _util_types_js__WEBPACK_IMPORTED_MODULE_7__[/* FetchPolicy */ "a"].CacheBeforeNetwork:
-        // If we don't have a cached value or this is a new requestId,
-        // then we need to fetch.
-        return mostRecentResult == null || requestId !== requestIdRef.current;
+        // If we don't have a cached value then we need to fetch.
+        return mostRecentResult == null;
 
       case _util_types_js__WEBPACK_IMPORTED_MODULE_7__[/* FetchPolicy */ "a"].CacheAndNetwork:
       case _util_types_js__WEBPACK_IMPORTED_MODULE_7__[/* FetchPolicy */ "a"].NetworkOnly:
@@ -1373,9 +1362,7 @@ const useCachedEffect = (requestId, handler, options = {}) => {
         // result, then we need to fetch one.
         return networkResultRef.current == null;
     }
-  }, [requestId, mostRecentResult, fetchPolicy, hardSkip]); // Let's make sure our ref is set to the most recent requestId.
-
-  requestIdRef.current = requestId;
+  }, [mostRecentResult, fetchPolicy, hardSkip]);
   react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](() => {
     if (!shouldFetch) {
       return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-data",
-  "version": "8.0.3",
+  "version": "8.0.4",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -13,7 +13,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.3",
+    "@babel/runtime": "^7.18.6",
     "@khanacademy/wonder-blocks-core": "^4.3.2"
   },
   "peerDependencies": {

package/src/hooks/use-cached-effect.js

@@ -232,10 +232,6 @@ export const useCachedEffect = <TData: ValidCacheData>(
         fetchPolicy,
     ]);
 
-    // We need to trigger a re-render when the request ID changes as that
-    // indicates its a different request.
-    const requestIdRef = React.useRef(requestId);
-
     // Calculate if we want to fetch the result or not.
     // If this is true, we will do a new fetch, cancelling the previous fetch
     // if there is one inflight.
@@ -252,12 +248,8 @@ export const useCachedEffect = <TData: ValidCacheData>(
                 return false;
 
             case FetchPolicy.CacheBeforeNetwork:
-                // If we don't have a cached value or this is a new requestId,
-                // then we need to fetch.
-                return (
-                    mostRecentResult == null ||
-                    requestId !== requestIdRef.current
-                );
+                // If we don't have a cached value then we need to fetch.
+                return mostRecentResult == null;
 
             case FetchPolicy.CacheAndNetwork:
             case FetchPolicy.NetworkOnly:
@@ -265,10 +257,7 @@ export const useCachedEffect = <TData: ValidCacheData>(
                 // result, then we need to fetch one.
                 return networkResultRef.current == null;
         }
-    }, [requestId, mostRecentResult, fetchPolicy, hardSkip]);
-
-    // Let's make sure our ref is set to the most recent requestId.
-    requestIdRef.current = requestId;
+    }, [mostRecentResult, fetchPolicy, hardSkip]);
 
     React.useEffect(() => {
         if (!shouldFetch) {

package/src/hooks/use-hydratable-effect.js

@@ -16,9 +16,6 @@ import type {Result, ValidCacheData} from "../util/types.js";
  * Policies to define how a hydratable effect should behave client-side.
  */
 export enum WhenClientSide {
-    // TODO(somewhatabstract, FEI-4172): Update eslint-plugin-flowtype when
-    // they've fixed https://github.com/gajus/eslint-plugin-flowtype/issues/502
-    /* eslint-disable no-undef */
     /**
      * The result from executing the effect server-side will not be hydrated.
      * The effect will always be executed client-side.
@@ -52,7 +49,6 @@ export enum WhenClientSide {
      * hydrated result status.
      */
     AlwaysExecute,
-    /* eslint-enable no-undef */
 }
 
 type HydratableEffectOptions<TData: ValidCacheData> = {|

package/src/util/types.js

@@ -1,9 +1,6 @@
 // @flow
 import type {Metadata} from "@khanacademy/wonder-stuff-core";
 
-// TODO(somewhatabstract, FEI-4172): Update eslint-plugin-flowtype when
-// they've fixed https://github.com/gajus/eslint-plugin-flowtype/issues/502
-/* eslint-disable no-undef */
 /**
  * Defines the various fetch policies that can be applied to requests.
  */
@@ -30,7 +27,6 @@ export enum FetchPolicy {
      */
     NetworkOnly,
 }
-/* eslint-enable no-undef */
 
 /**
  * Define what can be cached.