@khanacademy/wonder-blocks-data 2.3.1 → 3.0.0

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 3);
+/******/ 	return __webpack_require__(__webpack_require__.s = 13);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -99,225 +99,13 @@ module.exports = require("@khanacademy/wonder-blocks-core");
 
 /***/ }),
 /* 2 */
-/***/ (function(module, exports) {
-
-function _extends() {
-  module.exports = _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  module.exports["default"] = module.exports, module.exports.__esModule = true;
-  return _extends.apply(this, arguments);
-}
-
-module.exports = _extends;
-module.exports["default"] = module.exports, module.exports.__esModule = true;
-
-/***/ }),
-/* 3 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, "initializeCache", function() { return /* binding */ initializeCache; });
-__webpack_require__.d(__webpack_exports__, "fulfillAllDataRequests", function() { return /* binding */ fulfillAllDataRequests; });
-__webpack_require__.d(__webpack_exports__, "hasUnfulfilledRequests", function() { return /* binding */ hasUnfulfilledRequests; });
-__webpack_require__.d(__webpack_exports__, "removeFromCache", function() { return /* binding */ removeFromCache; });
-__webpack_require__.d(__webpack_exports__, "removeAllFromCache", function() { return /* binding */ removeAllFromCache; });
-__webpack_require__.d(__webpack_exports__, "RequestHandler", function() { return /* reexport */ RequestHandler; });
-__webpack_require__.d(__webpack_exports__, "TrackData", function() { return /* reexport */ track_data_TrackData; });
-__webpack_require__.d(__webpack_exports__, "Data", function() { return /* reexport */ data_Data; });
-__webpack_require__.d(__webpack_exports__, "InterceptData", function() { return /* reexport */ intercept_data_InterceptData; });
-__webpack_require__.d(__webpack_exports__, "InterceptCache", function() { return /* reexport */ intercept_cache_InterceptCache; });
-__webpack_require__.d(__webpack_exports__, "NoCache", function() { return /* reexport */ NoCache; });
-
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
-var wonder_blocks_core_ = __webpack_require__(1);
-
-// CONCATENATED MODULE: ./packages/wonder-blocks-data/src/util/memory-cache.js
-function deepClone(source) {
-  /**
-   * We want to deep clone the source cache to dodge mutations by external
-   * references. So we serialize the source cache to JSON and parse it
-   * back into a new object.
-   *
-   * NOTE: This doesn't work for get/set property accessors.
-   */
-  const serializedInitCache = JSON.stringify(source);
-  const cloneInitCache = JSON.parse(serializedInitCache);
-  return Object.freeze(cloneInitCache);
-}
-/**
- * INTERNAL USE ONLY
- *
- * Special case cache implementation for the memory cache.
- *
- * This is only used within our framework. Handlers don't need to
- * provide this as a custom cache as the framework will default to this in the
- * absence of a custom cache. We use this for SSR too (see ./response-cache.js).
- */
-
-
-class MemoryCache {
-  constructor(source = null) {
-    this.store = (handler, options, entry) => {
-      const requestType = handler.type;
-      const frozenEntry = Object.isFrozen(entry) ? entry : Object.freeze(entry); // Ensure we have a cache location for this handler type.
-
-      this._cache[requestType] = this._cache[requestType] || {}; // Cache the data.
-
-      const key = handler.getKey(options);
-      this._cache[requestType][key] = frozenEntry;
-    };
-
-    this.retrieve = (handler, options) => {
-      const requestType = handler.type; // Get the internal subcache for the handler.
-
-      const handlerCache = this._cache[requestType];
-
-      if (!handlerCache) {
-        return null;
-      } // Get the response.
-
-
-      const key = handler.getKey(options);
-      const internalEntry = handlerCache[key];
-
-      if (internalEntry == null) {
-        return null;
-      }
-
-      return internalEntry;
-    };
-
-    this.remove = (handler, options) => {
-      const requestType = handler.type; // NOTE(somewhatabstract): We could invoke removeAll with a predicate
-      // to match the key of the entry we're removing, but that's an
-      // inefficient way to remove a single item, so let's not do that.
-      // Get the internal subcache for the handler.
-
-      const handlerCache = this._cache[requestType];
-
-      if (!handlerCache) {
-        return false;
-      } // Get the entry.
-
-
-      const key = handler.getKey(options);
-      const internalEntry = handlerCache[key];
-
-      if (internalEntry == null) {
-        return false;
-      } // Delete the entry.
-
-
-      delete handlerCache[key];
-      return true;
-    };
-
-    this.removeAll = (handler, predicate) => {
-      const requestType = handler.type; // Get the internal subcache for the handler.
-
-      const handlerCache = this._cache[requestType];
-
-      if (!handlerCache) {
-        return 0;
-      } // Apply the predicate to what we have cached.
-
-
-      let removedCount = 0;
-
-      for (const [key, entry] of Object.entries(handlerCache)) {
-        if (typeof predicate !== "function" || predicate(key, entry)) {
-          removedCount++;
-          delete handlerCache[key];
-        }
-      }
-
-      return removedCount;
-    };
-
-    this.cloneData = () => {
-      try {
-        return deepClone(this._cache);
-      } catch (e) {
-        throw new Error(`An error occurred while trying to clone the cache: ${e}`);
-      }
-    };
-
-    this._cache = {};
-
-    if (source != null) {
-      try {
-        /**
-         * Object.assign only performs a shallow clone.
-         * So we deep clone it and then assign the clone values to our
-         * internal cache.
-         */
-        const cloneInitCache = deepClone(source);
-        Object.assign(this._cache, cloneInitCache);
-      } catch (e) {
-        throw new Error(`An error occurred trying to initialize from a response cache snapshot: ${e}`);
-      }
-    }
-  }
-
-  get inUse() {
-    return Object.keys(this._cache).length > 0;
-  }
-
-}
-// CONCATENATED MODULE: ./packages/wonder-blocks-data/src/util/no-cache.js
-let defaultInstance = null;
-/**
- * This is a cache implementation to use when no caching is wanted.
- *
- * Use this with your request handler if you want to support server-side
- * rendering of your data requests, but want to ensure data is never cached
- * on the client-side.
- *
- * This is better than having `shouldRefreshCache` always return `true` in the
- * handler as this ensures that cache space and memory are never used for the
- * requested data after hydration has finished.
- */
-
-class NoCache {
-  constructor() {
-    this.store = (handler, options, entry) => {
-      /* empty */
-    };
-
-    this.retrieve = (handler, options) => null;
-
-    this.remove = (handler, options) => false;
-
-    this.removeAll = (handler, predicate) => 0;
-  }
-
-  static get Default() {
-    if (defaultInstance == null) {
-      defaultInstance = new NoCache();
-    }
-
-    return defaultInstance;
-  }
-
-}
-// CONCATENATED MODULE: ./packages/wonder-blocks-data/src/util/response-cache.js
-
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ResponseCache; });
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _memory_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7);
 
 
 
@@ -333,33 +121,31 @@ let _default;
  */
 
 
-class response_cache_ResponseCache {
+class ResponseCache {
   static get Default() {
     if (!_default) {
-      _default = new response_cache_ResponseCache();
+      _default = new ResponseCache();
     }
 
     return _default;
   }
 
-  constructor(memoryCache = null, ssrOnlyCache = null) {
+  constructor(hydrationCache = null, ssrOnlyCache = null) {
     this.initialize = source => {
-      if (this._hydrationAndDefaultCache.inUse) {
+      if (this._hydrationCache.inUse) {
         throw new Error("Cannot initialize data response cache more than once");
       }
 
       try {
-        this._hydrationAndDefaultCache = new MemoryCache(source);
+        this._hydrationCache = new _memory_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"](source);
       } catch (e) {
         throw new Error(`An error occurred trying to initialize the data response cache: ${e}`);
       }
     };
 
-    this.cacheData = (handler, options, data) => {
-      return this._setCacheEntry(handler, options, {
-        data
-      });
-    };
+    this.cacheData = (handler, options, data) => this._setCacheEntry(handler, options, {
+      data
+    });
 
     this.cacheError = (handler, options, error) => {
       const errorMessage = typeof error === "string" ? error : error.message;
@@ -369,110 +155,64 @@ class response_cache_ResponseCache {
     };
 
     this.getEntry = (handler, options) => {
-      // If we're not server-side, and the handler has a custom cache
-      // let's try to use it.
-      if (this._ssrOnlyCache == null && handler.cache != null) {
-        const entry = handler.cache.retrieve(handler, options);
-
-        if (entry != null) {
-          // Custom cache has an entry, so use it.
-          return entry;
-        }
-      } // Get the internal entry for the handler.
-      // This allows us to use our hydrated cache during hydration.
-      // If we just returned null when the custom cache didn't have it,
-      // we would never hydrate properly.
-
-
-      const internalEntry = this._defaultCache(handler).retrieve(handler, options); // If we are not server-side and we hydrated something that the custom
-      // cache didn't have, we need to make sure the custom cache contains
-      // that value.
-
-
-      if (this._ssrOnlyCache == null && handler.cache != null && internalEntry != null) {
-        // Yes, if this throws, we will have a problem. We want that.
-        // Bad cache implementations should be overt.
-        handler.cache.store(handler, options, internalEntry); // We now delete this from our in-memory cache as we don't need it.
+      // Get the cached entry for this value.
+      // If the handler wants WB Data to hydrate (i.e. handler.hydrate is
+      // true), we use our hydration cache. Otherwise, if we're server-side
+      // we use our SSR-only cache. Otherwise, there's no entry to return.
+      const cache = handler.hydrate ? this._hydrationCache : _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide() ? this._ssrOnlyCache : undefined;
+      const internalEntry = cache == null ? void 0 : cache.retrieve(handler, options); // If we are not server-side and we hydrated something, let's clear
+      // that from the hydration cache to save memory.
+
+      if (this._ssrOnlyCache == null && internalEntry != null) {
+        // We now delete this from our hydration cache as we don't need it.
         // This does mean that if another handler of the same type but
-        // without a custom cache won't get the value, but that's not an
-        // expected valid usage of this framework - two handlers with
-        // different caching options shouldn't be using the same type name.
-
-        this._hydrationAndDefaultCache.remove(handler, options);
+        // without some sort of linked cache won't get the value, but
+        // that's not an expected use-case. If two different places use the
+        // same handler and options (i.e. the same request), then the
+        // handler should cater to that to ensure they share the result.
+        this._hydrationCache.remove(handler, options);
       }
 
       return internalEntry;
     };
 
     this.remove = (handler, options) => {
+      var _this$_ssrOnlyCache$r, _this$_ssrOnlyCache;
+
       // NOTE(somewhatabstract): We could invoke removeAll with a predicate
       // to match the key of the entry we're removing, but that's an
       // inefficient way to remove a single item, so let's not do that.
-      // If we're not server-side, and the handler has a custom cache
-      // let's try to use it.
-      const customCache = this._ssrOnlyCache == null ? handler.cache : null;
-      const removedCustom = !!(customCache != null && customCache.remove(handler, options)); // Delete the entry from our internal cache.
-      // Even if we have a custom cache, we want to make sure we still
-      // removed the same value from internal cache since this could be
-      // getting called before hydration for some complex advanced usage
-      // reason.
-
-      return this._defaultCache(handler).remove(handler, options) || removedCustom;
+      // Delete the entry from the appropriate cache.
+      return handler.hydrate ? this._hydrationCache.remove(handler, options) : (_this$_ssrOnlyCache$r = (_this$_ssrOnlyCache = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache.remove(handler, options)) != null ? _this$_ssrOnlyCache$r : false;
     };
 
     this.removeAll = (handler, predicate) => {
-      // If we're not server-side, and the handler has a custom cache
-      // let's try to use it.
-      const customCache = this._ssrOnlyCache == null ? handler.cache : null;
-      const removedCountCustom = (customCache == null ? void 0 : customCache.removeAll(handler, predicate)) || 0; // Apply the predicate to what we have in our internal cached.
-      // Even if we have a custom cache, we want to make sure we still
-      // removed the same value from internal cache since this could be
-      // getting called before hydration for some complex advanced usage
-      // reason.
-
-      const removedCount = this._defaultCache(handler).removeAll(handler, predicate); // We have no idea which keys were removed from which caches,
-      // so we can't dedupe the remove counts based on keys.
-      // That's why we return the total records deleted rather than the
-      // total keys deleted.
-
-
-      return removedCount + removedCountCustom;
+      var _this$_ssrOnlyCache$r2, _this$_ssrOnlyCache2;
+
+      // Apply the predicate to what we have in the appropriate cache.
+      return handler.hydrate ? this._hydrationCache.removeAll(handler, predicate) : (_this$_ssrOnlyCache$r2 = (_this$_ssrOnlyCache2 = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache2.removeAll(handler, predicate)) != null ? _this$_ssrOnlyCache$r2 : 0;
     };
 
     this.cloneHydratableData = () => {
       // We return our hydration cache only.
-      return this._hydrationAndDefaultCache.cloneData();
+      return this._hydrationCache.cloneData();
     };
 
-    this._ssrOnlyCache = wonder_blocks_core_["Server"].isServerSide() ? ssrOnlyCache || new MemoryCache() : undefined;
-    this._hydrationAndDefaultCache = memoryCache || new MemoryCache();
-  }
-  /**
-   * Returns the default cache to use for the given handler.
-   */
-
-
-  _defaultCache(handler) {
-    if (handler.hydrate) {
-      return this._hydrationAndDefaultCache;
-    } // If the handler doesn't want to hydrate, we return the SSR-only cache.
-    // If we are client-side, we return our non-caching implementation.
-
-
-    return this._ssrOnlyCache || NoCache.Default;
+    this._ssrOnlyCache = _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide() ? ssrOnlyCache || new _memory_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"]() : undefined;
+    this._hydrationCache = hydrationCache || new _memory_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"]();
   }
 
   _setCacheEntry(handler, options, entry) {
     const frozenEntry = Object.freeze(entry);
 
-    if (this._ssrOnlyCache == null && handler.cache != null) {
-      // We are not server-side, and our handler has its own cache,
-      // so we use that to store values.
-      handler.cache.store(handler, options, frozenEntry);
-    } else {
-      // We are either server-side, or our handler doesn't provide
-      // a caching override.
-      this._defaultCache(handler).store(handler, options, frozenEntry);
+    if (this._ssrOnlyCache != null) {
+      // We are server-side.
+      // We need to store this value.
+      if (handler.hydrate) {
+        this._hydrationCache.store(handler, options, frozenEntry);
+      } else {
+        this._ssrOnlyCache.store(handler, options, frozenEntry);
+      }
     }
 
     return frozenEntry;
@@ -485,89 +225,18 @@ class response_cache_ResponseCache {
 
 
 }
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(0);
-
-// CONCATENATED MODULE: ./packages/wonder-blocks-data/src/util/request-fulfillment.js
-
-
-let request_fulfillment_default;
-
-class request_fulfillment_RequestFulfillment {
-  static get Default() {
-    if (!request_fulfillment_default) {
-      request_fulfillment_default = new request_fulfillment_RequestFulfillment();
-    }
-
-    return request_fulfillment_default;
-  }
-
-  constructor(responseCache = undefined) {
-    this._requests = {};
-
-    this._getHandlerSubcache = handler => {
-      if (!this._requests[handler.type]) {
-        this._requests[handler.type] = {};
-      }
-
-      return this._requests[handler.type];
-    };
-
-    this.fulfill = (handler, options) => {
-      const handlerRequests = this._getHandlerSubcache(handler);
-
-      const key = handler.getKey(options);
-      /**
-       * If we have an inflight request, we'll provide that.
-       */
-
-      const inflight = handlerRequests[key];
-
-      if (inflight) {
-        return inflight;
-      }
-      /**
-       * We don't have an inflight request, so let's set one up.
-       */
-
-
-      const {
-        cacheData,
-        cacheError
-      } = this._responseCache;
-
-      try {
-        const request = handler.fulfillRequest(options).then(data => {
-          delete handlerRequests[key];
-          /**
-           * Let's cache the data!
-           */
-
-          return cacheData(handler, options, data);
-        }).catch(error => {
-          delete handlerRequests[key];
-          /**
-           * Let's cache the error!
-           */
-
-          return cacheError(handler, options, error);
-        });
-        handlerRequests[key] = request;
-        return request;
-      } catch (e) {
-        /**
-         * In this case, we don't cache an inflight request, because there
-         * really isn't one.
-         */
-        return Promise.resolve(cacheError(handler, options, e));
-      }
-    };
 
-    this._responseCache = responseCache || response_cache_ResponseCache.Default;
-  }
+/***/ }),
+/* 3 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-}
-// CONCATENATED MODULE: ./packages/wonder-blocks-data/src/util/request-tracking.js
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return TrackerContext; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return RequestTracker; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _response_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
+/* harmony import */ var _request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
 
 
 
@@ -577,13 +246,13 @@ class request_fulfillment_RequestFulfillment {
  *
  * INTERNAL USE ONLY
  */
-const TrackerContext = new external_react_["createContext"](null);
+const TrackerContext = new react__WEBPACK_IMPORTED_MODULE_0__["createContext"](null);
 /**
  * The default instance is stored here.
  * It's created below in the Default() static property.
  */
 
-let request_tracking_default;
+let _default;
 /**
  * Implements request tracking and fulfillment.
  *
@@ -591,13 +260,13 @@ let request_tracking_default;
  */
 
 
-class request_tracking_RequestTracker {
+class RequestTracker {
   static get Default() {
-    if (!request_tracking_default) {
-      request_tracking_default = new request_tracking_RequestTracker();
+    if (!_default) {
+      _default = new RequestTracker();
     }
 
-    return request_tracking_default;
+    return _default;
   }
   /**
    * These are the caches for tracked requests, their handlers, and responses.
@@ -675,8 +344,8 @@ class request_tracking_RequestTracker {
       return Promise.all(promises).then(() => this._responseCache.cloneHydratableData());
     };
 
-    this._responseCache = responseCache || response_cache_ResponseCache.Default;
-    this._requestFulfillment = new request_fulfillment_RequestFulfillment(responseCache);
+    this._responseCache = responseCache || _response_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* ResponseCache */ "a"].Default;
+    this._requestFulfillment = new _request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__[/* RequestFulfillment */ "a"](responseCache);
   }
   /**
    * Track a request.
@@ -708,369 +377,499 @@ class request_tracking_RequestTracker {
 
 
 }
-// CONCATENATED MODULE: ./packages/wonder-blocks-data/src/util/request-handler.js
+
+/***/ }),
+/* 4 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+
+
 /**
- * Base implementation for creating a request handler.
+ * InterceptContext defines a map from handler type to interception methods.
  *
- * Provides a base implementation of the `IRequestHandler` base class for
- * use with the Wonder Blocks Data framework.
+ * INTERNAL USE ONLY
  */
-class RequestHandler {
-  constructor(type, cache, hydrate = true) {
-    this._type = type;
-    this._cache = cache || null;
-    this._hydrate = !!hydrate;
-  }
+const InterceptContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createContext"]({});
+/* harmony default export */ __webpack_exports__["a"] = (InterceptContext);
 
-  get type() {
-    return this._type;
-  }
+/***/ }),
+/* 5 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-  get cache() {
-    return this._cache;
-  }
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useData; });
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _util_request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
+/* harmony import */ var _components_intercept_context_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
+/* harmony import */ var _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3);
+/* harmony import */ var _util_result_from_cache_entry_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(12);
+/* harmony import */ var _util_response_cache_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(2);
 
-  get hydrate() {
-    return this._hydrate;
-  }
 
-  shouldRefreshCache(options, cachedEntry) {
-    /**
-     * By default, the cache needs a refresh if the current entry is an
-     * error.
-     *
-     * This means that an error will cause a re-request on render.
-     * Useful if the server rendered an error, as it means the client
-     * will update after rehydration.
-     */
-    return cachedEntry == null || cachedEntry.error != null;
-  }
 
-  getKey(options) {
-    try {
-      return options === undefined ? "undefined" : JSON.stringify(options);
-    } catch (e) {
-      throw new Error(`Failed to auto-generate key: ${e}`);
-    }
-  }
 
-  fulfillRequest(options) {
-    throw new Error("Not implemented");
-  }
 
-}
-// CONCATENATED MODULE: ./packages/wonder-blocks-data/src/components/track-data.js
 
 
+const useData = (handler, options) => {
+  // If we're server-side or hydrating, we'll have a cached entry to use.
+  // So we get that and use it to initialize our state.
+  // This works in both hydration and SSR because the very first call to
+  // this will have cached data in those cases as it will be present on the
+  // initial render - and subsequent renders on the client it will be null.
+  const cachedResult = _util_response_cache_js__WEBPACK_IMPORTED_MODULE_6__[/* ResponseCache */ "a"].Default.getEntry(handler, options);
+  const [result, setResult] = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(cachedResult); // We only track data requests when we are server-side and we don't
+  // already have a result, as given by the cachedData (which is also the
+  // initial value for the result state).
 
+  const maybeTrack = Object(react__WEBPACK_IMPORTED_MODULE_1__["useContext"])(_util_request_tracking_js__WEBPACK_IMPORTED_MODULE_4__[/* TrackerContext */ "b"]);
 
-/**
- * Component to enable data request tracking when server-side rendering.
- */
-class track_data_TrackData extends external_react_["Component"] {
-  render() {
-    if (!wonder_blocks_core_["Server"].isServerSide()) {
-      throw new Error("This component is not for use during client-side rendering");
-    }
+  if (result == null && _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide()) {
+    maybeTrack == null ? void 0 : maybeTrack(handler, options);
+  } // Lookup to see if there's an interceptor for the handler.
+  // If we have one, we need to replace the handler with one that
+  // uses the interceptor.
 
-    return /*#__PURE__*/external_react_["createElement"](TrackerContext.Provider, {
-      value: request_tracking_RequestTracker.Default.trackDataRequest
-    }, this.props.children);
-  }
 
-}
-// CONCATENATED MODULE: ./packages/wonder-blocks-data/src/components/internal-data.js
+  const interceptorMap = Object(react__WEBPACK_IMPORTED_MODULE_1__["useContext"])(_components_intercept_context_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"]);
+  const interceptor = interceptorMap[handler.type]; // We need to update our request when the handler changes or the key
+  // to the options change, so we keep track of those.
+  // However, even if we are hydrating from cache, we still need to make the
+  // request at least once, so we do not initialize these references.
 
+  const handlerRef = Object(react__WEBPACK_IMPORTED_MODULE_1__["useRef"])();
+  const keyRef = Object(react__WEBPACK_IMPORTED_MODULE_1__["useRef"])();
+  const interceptorRef = Object(react__WEBPACK_IMPORTED_MODULE_1__["useRef"])(); // This effect will ensure that we fulfill the request as desired.
 
+  Object(react__WEBPACK_IMPORTED_MODULE_1__["useEffect"])(() => {
+    // If we are server-side, then just skip the effect. We track requests
+    // during SSR and fulfill them outside of the React render cycle.
+    // NOTE: This shouldn't happen since effects would not run on the server
+    // but let's be defensive - I think it makes the code clearer.
 
+    /* istanbul ignore next */
+    if (_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide()) {
+      return;
+    } // Update our refs to the current handler and key.
 
 
-/**
- * This component is responsible for actually handling the data request.
- * It is wrapped by Data in order to support intercepts and be exported for use.
- *
- * INTERNAL USE ONLY
- */
-class internal_data_InternalData extends external_react_["Component"] {
-  constructor(props) {
-    super(props);
-    this.state = this._buildStateAndfulfillNeeds(props);
-  }
-
-  componentDidMount() {
-    this._mounted = true;
-  }
+    handlerRef.current = handler;
+    keyRef.current = handler.getKey(options);
+    interceptorRef.current = interceptor; // If we're not hydrating a result, we want to make sure we set our
+    // result to null so that we're in the loading state.
 
-  shouldComponentUpdate(nextProps, nextState) {
-    /**
-     * We only bother updating if our state changed.
-     *
-     * And we only update the state if props changed
-     * or we got new data/error.
-     */
-    if (!this._propsMatch(nextProps)) {
-      const newState = this._buildStateAndfulfillNeeds(nextProps);
-
-      this.setState(newState);
+    if (cachedResult == null) {
+      // Mark ourselves as loading.
+      setResult(null);
     }
 
-    return this.state.loading !== nextState.loading || this.state.data !== nextState.data || this.state.error !== nextState.error;
-  }
+    const getMaybeInterceptedHandler = () => {
+      if (interceptor == null) {
+        return handler;
+      }
 
-  componentWillUnmount() {
-    this._mounted = false;
-  }
+      const fulfillRequestFn = options => {
+        var _interceptor$fulfillR;
 
-  _propsMatch(otherProps) {
-    const {
-      handler,
-      options
-    } = this.props;
-    const {
-      handler: prevHandler,
-      options: prevOptions
-    } = otherProps;
-    return handler === prevHandler && handler.getKey(options) === prevHandler.getKey(prevOptions);
-  }
+        return (_interceptor$fulfillR = interceptor.fulfillRequest(options)) != null ? _interceptor$fulfillR : handler.fulfillRequest(options);
+      };
+
+      return {
+        fulfillRequest: fulfillRequestFn,
+        getKey: options => handler.getKey(options),
+        type: handler.type,
+        hydrate: handler.hydrate
+      };
+    }; // We aren't server-side, so let's make the request.
+    // The request handler is in control of whether that request actually
+    // happens or not.
 
-  _buildStateAndfulfillNeeds(propsAtFulfillment) {
-    const {
-      getEntry,
-      handler,
-      options
-    } = propsAtFulfillment;
-    const cachedData = getEntry(handler, options);
 
-    if (!wonder_blocks_core_["Server"].isServerSide() && (cachedData == null || handler.shouldRefreshCache(options, cachedData))) {
+    let cancel = false;
+    _util_request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__[/* RequestFulfillment */ "a"].Default.fulfill(getMaybeInterceptedHandler(), options).then(updateEntry => {
+      if (cancel) {
+        return;
+      }
+
+      setResult(updateEntry);
+      return;
+    }).catch(e => {
+      if (cancel) {
+        return;
+      }
       /**
-       * We're not on the server, the cache missed, or our handler says
-       * we should refresh the cache.
-       *
-       * Therefore, we need to request data.
-       *
-       * We have to do this here from the constructor so that this
-       * data request is tracked when performing server-side rendering.
+       * We should never get here as errors in fulfillment are part
+       * of the `then`, but if we do.
        */
-      request_fulfillment_RequestFulfillment.Default.fulfill(handler, options).then(cacheEntry => {
-        /**
-         * We get here, we should have updated the cache.
-         * However, we need to update the component, but we
-         * should only do that if the props are the same as they
-         * were when this was called.
-         */
-        if (this._mounted && this._propsMatch(propsAtFulfillment)) {
-          this.setState({
-            loading: false,
-            data: cacheEntry.data,
-            error: cacheEntry.error
-          });
-        }
+      // eslint-disable-next-line no-console
 
-        return null;
-      }).catch(e => {
-        /**
-         * We should never get here, but if we do.
-         */
-        // eslint-disable-next-line no-console
-        console.error(`Unexpected error occurred during data fulfillment: ${e}`);
-
-        if (this._mounted && this._propsMatch(propsAtFulfillment)) {
-          this.setState({
-            loading: false,
-            data: null,
-            error: typeof e === "string" ? e : e.message
-          });
-        }
 
-        return null;
+      console.error(`Unexpected error occurred during data fulfillment: ${e}`);
+      setResult({
+        data: null,
+        error: typeof e === "string" ? e : e.message
       });
-    }
-    /**
-     * This is the default response for the server and for the initial
-     * client-side render if we have cachedData.
-     *
-     * This ensures we don't make promises we don't want when doing
-     * server-side rendering. Instead, we either have data from the cache
-     * or we don't.
-     */
+      return;
+    });
+    return () => {
+      cancel = true;
+    }; // - handler.getKey is a proxy for options
+    // - We don't want to trigger on cachedResult changing, we're
+    //   just using that as a flag for render state if the other things
+    //   trigger this effect.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [handler, handler.getKey(options), interceptor]);
+  return Object(_util_result_from_cache_entry_js__WEBPACK_IMPORTED_MODULE_5__[/* resultFromCacheEntry */ "a"])(result);
+};
 
+/***/ }),
+/* 6 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-    return {
-      loading: cachedData == null,
-      data: cachedData && cachedData.data,
-      error: cachedData && cachedData.error
-    };
-  }
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return RequestFulfillment; });
+/* harmony import */ var _response_cache_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 
-  _resultFromState() {
-    const {
-      loading,
-      data,
-      error
-    } = this.state;
 
-    if (loading) {
-      return {
-        loading: true
-      };
-    }
+let _default;
 
-    if (data != null) {
-      return {
-        loading: false,
-        data
-      };
+class RequestFulfillment {
+  static get Default() {
+    if (!_default) {
+      _default = new RequestFulfillment();
     }
 
-    if (error == null) {
-      // We should never get here ever.
-      throw new Error("Loaded result has invalid state where data and error are missing");
-    }
+    return _default;
+  }
 
-    return {
-      loading: false,
-      error
+  constructor(responseCache = undefined) {
+    this._requests = {};
+
+    this._getHandlerSubcache = handler => {
+      if (!this._requests[handler.type]) {
+        this._requests[handler.type] = {};
+      }
+
+      return this._requests[handler.type];
     };
-  }
 
-  _renderContent(result) {
-    const {
-      children
-    } = this.props;
-    return children(result);
-  }
+    this.fulfill = (handler, options) => {
+      const handlerRequests = this._getHandlerSubcache(handler);
 
-  _renderWithTrackingContext(result) {
-    return /*#__PURE__*/external_react_["createElement"](TrackerContext.Consumer, null, track => {
+      const key = handler.getKey(options);
       /**
-       * If data tracking wasn't enabled, don't do it.
+       * If we have an inflight request, we'll provide that.
        */
-      if (track != null) {
-        track(this.props.handler, this.props.options);
+
+      const inflight = handlerRequests[key];
+
+      if (inflight) {
+        return inflight;
       }
+      /**
+       * We don't have an inflight request, so let's set one up.
+       */
 
-      return this._renderContent(result);
-    });
-  }
 
-  render() {
-    const result = this._resultFromState(); // We only track data requests when we are server-side and we don't
-    // already have a result. The existence of a result is indicated by the
-    // loading flag being false.
+      const {
+        cacheData,
+        cacheError
+      } = this._responseCache;
 
+      try {
+        const request = handler.fulfillRequest(options).then(data => {
+          delete handlerRequests[key];
+          /**
+           * Let's cache the data!
+           *
+           * NOTE: This only caches when we're server side.
+           */
 
-    if (result.loading && wonder_blocks_core_["Server"].isServerSide()) {
-      return this._renderWithTrackingContext(result);
-    }
+          return cacheData(handler, options, data);
+        }).catch(error => {
+          delete handlerRequests[key];
+          /**
+           * Let's cache the error!
+           *
+           * NOTE: This only caches when we're server side.
+           */
 
-    return this._renderContent(result);
+          return cacheError(handler, options, error);
+        });
+        handlerRequests[key] = request;
+        return request;
+      } catch (e) {
+        /**
+         * In this case, we don't cache an inflight request, because there
+         * really isn't one.
+         */
+        return Promise.resolve(cacheError(handler, options, e));
+      }
+    };
+
+    this._responseCache = responseCache || _response_cache_js__WEBPACK_IMPORTED_MODULE_0__[/* ResponseCache */ "a"].Default;
   }
 
 }
-// CONCATENATED MODULE: ./packages/wonder-blocks-data/src/components/intercept-context.js
 
+/***/ }),
+/* 7 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return MemoryCache; });
+function deepClone(source) {
+  /**
+   * We want to deep clone the source cache to dodge mutations by external
+   * references. So we serialize the source cache to JSON and parse it
+   * back into a new object.
+   *
+   * NOTE: This doesn't work for get/set property accessors.
+   */
+  const serializedInitCache = JSON.stringify(source);
+  const cloneInitCache = JSON.parse(serializedInitCache);
+  return Object.freeze(cloneInitCache);
+}
 /**
- * InterceptContext defines a map from handler type to interception methods.
- *
  * INTERNAL USE ONLY
+ *
+ * Special case cache implementation for the memory cache.
+ *
+ * This is only used within our framework for SSR (see ./response-cache.js).
  */
-const InterceptContext = /*#__PURE__*/external_react_["createContext"]({});
-/* harmony default export */ var intercept_context = (InterceptContext);
-// CONCATENATED MODULE: ./packages/wonder-blocks-data/src/components/data.js
 
 
+class MemoryCache {
+  constructor(source = null) {
+    this.store = (handler, options, entry) => {
+      const requestType = handler.type;
+      const frozenEntry = Object.freeze(entry); // Ensure we have a cache location for this handler type.
+
+      this._cache[requestType] = this._cache[requestType] || {}; // Cache the data.
+
+      const key = handler.getKey(options);
+      this._cache[requestType][key] = frozenEntry;
+    };
+
+    this.retrieve = (handler, options) => {
+      const requestType = handler.type; // Get the internal subcache for the handler.
+
+      const handlerCache = this._cache[requestType];
+
+      if (!handlerCache) {
+        return null;
+      } // Get the response.
+
+
+      const key = handler.getKey(options);
+      const internalEntry = handlerCache[key];
+
+      if (internalEntry == null) {
+        return null;
+      }
+
+      return internalEntry;
+    };
+
+    this.remove = (handler, options) => {
+      const requestType = handler.type; // NOTE(somewhatabstract): We could invoke removeAll with a predicate
+      // to match the key of the entry we're removing, but that's an
+      // inefficient way to remove a single item, so let's not do that.
+      // Get the internal subcache for the handler.
+
+      const handlerCache = this._cache[requestType];
+
+      if (!handlerCache) {
+        return false;
+      } // Get the entry.
+
+
+      const key = handler.getKey(options);
+      const internalEntry = handlerCache[key];
+
+      if (internalEntry == null) {
+        return false;
+      } // Delete the entry.
+
+
+      delete handlerCache[key];
+      return true;
+    };
 
+    this.removeAll = (handler, predicate) => {
+      const requestType = handler.type; // Get the internal subcache for the handler.
 
+      const handlerCache = this._cache[requestType];
+
+      if (!handlerCache) {
+        return 0;
+      }
+
+      let removedCount = 0;
 
+      if (typeof predicate === "function") {
+        // Apply the predicate to what we have cached.
+        for (const [key, entry] of Object.entries(handlerCache)) {
+          if (predicate(key, entry)) {
+            removedCount++;
+            delete handlerCache[key];
+          }
+        }
+      } else {
+        // We're removing everything so delete the entire subcache.
+        removedCount = Object.keys(handlerCache).length;
+        delete this._cache[requestType];
+      }
+
+      return removedCount;
+    };
+
+    this.cloneData = () => {
+      try {
+        return deepClone(this._cache);
+      } catch (e) {
+        throw new Error(`An error occurred while trying to clone the cache: ${e}`);
+      }
+    };
+
+    this._cache = {};
+
+    if (source != null) {
+      try {
+        /**
+         * Object.assign only performs a shallow clone.
+         * So we deep clone it and then assign the clone values to our
+         * internal cache.
+         */
+        const cloneInitCache = deepClone(source);
+        Object.assign(this._cache, cloneInitCache);
+      } catch (e) {
+        throw new Error(`An error occurred trying to initialize from a response cache snapshot: ${e}`);
+      }
+    }
+  }
+  /**
+   * Indicate if this cache is being used or now.
+   *
+   * When the cache has entries, returns `true`; otherwise, returns `false`.
+   */
+
+
+  get inUse() {
+    return Object.keys(this._cache).length > 0;
+  }
+
+}
+
+/***/ }),
+/* 8 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return RequestHandler; });
 /**
- * This component is the main component of Wonder Blocks Data. With this, data
- * requirements can be placed in a React application in a manner that will
- * support server-side rendering and efficient caching.
+ * Base implementation for creating a request handler.
+ *
+ * Provides a base implementation of the `IRequestHandler` base class for
+ * use with the Wonder Blocks Data framework.
  */
-class data_Data extends external_react_["Component"] {
-  _getHandlerFromInterceptor(interceptor) {
-    const {
-      handler
-    } = this.props;
-
-    if (!interceptor) {
-      return handler;
-    }
+class RequestHandler {
+  constructor(type, hydrate = true) {
+    this._type = type;
+    this._hydrate = !!hydrate;
+  }
 
-    const {
-      fulfillRequest,
-      shouldRefreshCache
-    } = interceptor;
-    const fulfillRequestFn = fulfillRequest ? options => {
-      const interceptedResult = fulfillRequest(options);
-      return interceptedResult != null ? interceptedResult : handler.fulfillRequest(options);
-    } : options => handler.fulfillRequest(options);
-    const shouldRefreshCacheFn = shouldRefreshCache ? (options, cacheEntry) => {
-      const interceptedResult = shouldRefreshCache(options, cacheEntry);
-      return interceptedResult != null ? interceptedResult : handler.shouldRefreshCache(options, cacheEntry);
-    } : (options, cacheEntry) => handler.shouldRefreshCache(options, cacheEntry);
-    return {
-      fulfillRequest: fulfillRequestFn,
-      shouldRefreshCache: shouldRefreshCacheFn,
-      getKey: options => handler.getKey(options),
-      type: handler.type,
-      cache: handler.cache,
-      hydrate: handler.hydrate
-    };
+  get type() {
+    return this._type;
   }
 
-  _getCacheLookupFnFromInterceptor(interceptor) {
-    const getEntry = interceptor && interceptor.getEntry;
+  get hydrate() {
+    return this._hydrate;
+  }
 
-    if (!getEntry) {
-      return response_cache_ResponseCache.Default.getEntry;
+  getKey(options) {
+    try {
+      return options === undefined ? "undefined" : JSON.stringify(options);
+    } catch (e) {
+      throw new Error(`Failed to auto-generate key: ${e}`);
     }
+  }
 
-    return (handler, options) => {
-      // 1. Lookup the current cache value.
-      const cacheEntry = response_cache_ResponseCache.Default.getEntry(handler, options); // 2. See if our interceptor wants to override it.
+  fulfillRequest(options) {
+    throw new Error("Not implemented");
+  }
 
-      const interceptedData = getEntry(options, cacheEntry); // 3. Return the appropriate response.
+}
 
-      return interceptedData != null ? interceptedData : cacheEntry;
-    };
-  }
+/***/ }),
+/* 9 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-  render() {
-    return /*#__PURE__*/external_react_["createElement"](intercept_context.Consumer, null, value => {
-      const handlerType = this.props.handler.type;
-      const interceptor = value[handlerType];
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return TrackData; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
 
-      const handler = this._getHandlerFromInterceptor(interceptor);
 
-      const getEntry = this._getCacheLookupFnFromInterceptor(interceptor);
-      /**
-       * Need to share our types with InternalData so Flow
-       * doesn't need to infer them and find mismatches.
-       * However, just deriving a new component creates issues
-       * where InternalData starts rerendering too often.
-       * Couldn't track down why, so suppressing the error
-       * instead.
-       */
 
 
-      return /*#__PURE__*/external_react_["createElement"](internal_data_InternalData // $FlowIgnore[incompatible-type-arg]
-      , {
-        handler: handler,
-        options: this.props.options,
-        getEntry: getEntry
-      }, result => this.props.children(result));
-    });
+/**
+ * Component to enable data request tracking when server-side rendering.
+ */
+class TrackData extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  render() {
+    if (!_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__["Server"].isServerSide()) {
+      throw new Error("This component is not for use during client-side rendering");
+    }
+
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_util_request_tracking_js__WEBPACK_IMPORTED_MODULE_2__[/* TrackerContext */ "b"].Provider, {
+      value: _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_2__[/* RequestTracker */ "a"].Default.trackDataRequest
+    }, this.props.children);
   }
 
 }
-// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/extends.js
-var helpers_extends = __webpack_require__(2);
-var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends);
 
-// CONCATENATED MODULE: ./packages/wonder-blocks-data/src/components/intercept-data.js
+/***/ }),
+/* 10 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _hooks_use_data_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+
+
+
+/**
+ * This component is the main component of Wonder Blocks Data. With this, data
+ * requirements can be placed in a React application in a manner that will
+ * support server-side rendering and efficient caching.
+ */
+const Data = props => {
+  const data = Object(_hooks_use_data_js__WEBPACK_IMPORTED_MODULE_1__[/* useData */ "a"])(props.handler, props.options);
+  return props.children(data);
+};
+
+/* harmony default export */ __webpack_exports__["a"] = (Data);
+
+/***/ }),
+/* 11 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return InterceptData; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _intercept_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
 
 
 
@@ -1079,9 +878,6 @@ var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends);
  * type of a given handler and provide alternative results. This is mostly
  * useful for testing.
  *
- * Results from this interceptor will end up in the cache. If you
- * wish to only override the cache, use `InterceptCache` instead.
- *
  * This component is not recommended for use in production code as it
  * can prevent predictable functioning of the Wonder Blocks Data framework.
  * One possible side-effect is that inflight requests from the interceptor could
@@ -1093,88 +889,117 @@ var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends);
  * new instance will replace this interceptor for its children. All methods
  * will be replaced.
  */
-class intercept_data_InterceptData extends external_react_["Component"] {
+class InterceptData extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   render() {
-    return /*#__PURE__*/external_react_["createElement"](intercept_context.Consumer, null, value => {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_intercept_context_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"].Consumer, null, value => {
       const handlerType = this.props.handler.type;
-
-      const interceptor = extends_default()({}, value[handlerType], {
-        fulfillRequest: this.props.fulfillRequest || null,
-        shouldRefreshCache: this.props.shouldRefreshCache || null
-      });
-
-      const newValue = extends_default()({}, value, {
+      const interceptor = { ...value[handlerType],
+        fulfillRequest: this.props.fulfillRequest
+      };
+      const newValue = { ...value,
         [handlerType]: interceptor
-      });
-
-      return /*#__PURE__*/external_react_["createElement"](intercept_context.Provider, {
+      };
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_intercept_context_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"].Provider, {
         value: newValue
       }, this.props.children);
     });
   }
 
 }
-// CONCATENATED MODULE: ./packages/wonder-blocks-data/src/components/intercept-cache.js
-
-
 
+/***/ }),
+/* 12 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return resultFromCacheEntry; });
 /**
- * This component provides a mechanism to intercept cache lookups for the
- * type of a given handler and provide alternative values. This is mostly
- * useful for testing.
- *
- * This does not modify the cache in any way. If you want to intercept
- * requests and cache based on the intercept, then use `InterceptData`.
- *
- * This component is generally not suitable for use in production code as it
- * can prevent predictable functioning of the Wonder Blocks Data framework.
- *
- * These components do not chain. If a different `InterceptCache` instance is
- * rendered within this one that intercepts the same handler type, then that
- * new instance will replace this interceptor for its children.
+ * Turns a cache entry into a stateful result.
  */
-class intercept_cache_InterceptCache extends external_react_["Component"] {
-  render() {
-    return /*#__PURE__*/external_react_["createElement"](intercept_context.Consumer, null, value => {
-      const handlerType = this.props.handler.type;
+const resultFromCacheEntry = cacheEntry => {
+  // No cache entry means we didn't load one yet.
+  if (cacheEntry == null) {
+    return {
+      status: "loading"
+    };
+  }
 
-      const interceptor = extends_default()({}, value[handlerType], {
-        getEntry: this.props.getEntry
-      });
+  const {
+    data,
+    error
+  } = cacheEntry;
 
-      const newValue = extends_default()({}, value, {
-        [handlerType]: interceptor
-      });
+  if (data != null) {
+    return {
+      status: "success",
+      data
+    };
+  }
 
-      return /*#__PURE__*/external_react_["createElement"](intercept_context.Provider, {
-        value: newValue
-      }, this.props.children);
-    });
+  if (error == null) {
+    // We should never get here ever.
+    return {
+      status: "error",
+      error: "Loaded result has invalid state where data and error are missing"
+    };
   }
 
-}
-// CONCATENATED MODULE: ./packages/wonder-blocks-data/src/index.js
+  return {
+    status: "error",
+    error
+  };
+};
 
+/***/ }),
+/* 13 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "initializeCache", function() { return initializeCache; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "fulfillAllDataRequests", function() { return fulfillAllDataRequests; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hasUnfulfilledRequests", function() { return hasUnfulfilledRequests; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "removeFromCache", function() { return removeFromCache; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "removeAllFromCache", function() { return removeAllFromCache; });
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _util_response_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
+/* harmony import */ var _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
+/* harmony import */ var _util_request_handler_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(8);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RequestHandler", function() { return _util_request_handler_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
+
+/* harmony import */ var _components_track_data_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TrackData", function() { return _components_track_data_js__WEBPACK_IMPORTED_MODULE_4__["a"]; });
 
+/* harmony import */ var _components_data_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(10);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Data", function() { return _components_data_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });
 
-const initializeCache = source => response_cache_ResponseCache.Default.initialize(source);
+/* harmony import */ var _components_intercept_data_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(11);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InterceptData", function() { return _components_intercept_data_js__WEBPACK_IMPORTED_MODULE_6__["a"]; });
+
+/* harmony import */ var _hooks_use_data_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(5);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useData", function() { return _hooks_use_data_js__WEBPACK_IMPORTED_MODULE_7__["a"]; });
+
+
+
+
+const initializeCache = source => _util_response_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* ResponseCache */ "a"].Default.initialize(source);
 const fulfillAllDataRequests = () => {
-  if (!wonder_blocks_core_["Server"].isServerSide()) {
+  if (!_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide()) {
     return Promise.reject(new Error("Data requests are not tracked when client-side"));
   }
 
-  return request_tracking_RequestTracker.Default.fulfillTrackedRequests();
+  return _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_2__[/* RequestTracker */ "a"].Default.fulfillTrackedRequests();
 };
 const hasUnfulfilledRequests = () => {
-  if (!wonder_blocks_core_["Server"].isServerSide()) {
+  if (!_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide()) {
     throw new Error("Data requests are not tracked when client-side");
   }
 
-  return request_tracking_RequestTracker.Default.hasUnfulfilledRequests;
+  return _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_2__[/* RequestTracker */ "a"].Default.hasUnfulfilledRequests;
 };
-const removeFromCache = (handler, options) => response_cache_ResponseCache.Default.remove(handler, options);
-const removeAllFromCache = (handler, predicate) => response_cache_ResponseCache.Default.removeAll(handler, predicate);
+const removeFromCache = (handler, options) => _util_response_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* ResponseCache */ "a"].Default.remove(handler, options);
+const removeAllFromCache = (handler, predicate) => _util_response_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* ResponseCache */ "a"].Default.removeAll(handler, predicate);
 /**
  * TODO(somewhatabstract): Export each cache type we implement.
  *
@@ -1187,6 +1012,5 @@ const removeAllFromCache = (handler, predicate) => response_cache_ResponseCache.
 
 
 
-
 /***/ })
 /******/ ]);