@khanacademy/wonder-blocks-data 4.0.0 → 6.0.0

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 19);
+/******/ 	return __webpack_require__(__webpack_require__.s = 28);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -93,32 +93,111 @@ module.exports = require("react");
 
 /***/ }),
 /* 1 */
-/***/ (function(module, exports) {
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-module.exports = require("@khanacademy/wonder-stuff-core");
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return DataErrors; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return DataError; });
+/* harmony import */ var _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6);
+/* harmony import */ var _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__);
+
+
+/**
+ * Error kinds for DataError.
+ */
+const DataErrors = Object.freeze({
+  /**
+   * The kind of error is not known.
+   */
+  Unknown: "Unknown",
+
+  /**
+   * The error is internal to the executing code.
+   */
+  Internal: "Internal",
+
+  /**
+   * There was a problem with the provided input.
+   */
+  InvalidInput: "InvalidInput",
+
+  /**
+   * A network error occurred.
+   */
+  Network: "Network",
+
+  /**
+   * Response could not be parsed.
+   */
+  Parse: "Parse",
+
+  /**
+   * An error that occurred during SSR and was hydrated from cache
+   */
+  Hydrated: "Hydrated"
+});
+/**
+ * An error from the Wonder Blocks Data API.
+ *
+ * Errors of this type will have names of the format:
+ *     `${kind}DataError`
+ */
+
+class DataError extends _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__["KindError"] {
+  constructor(message, kind, {
+    metadata,
+    cause
+  } = {}) {
+    super(message, kind, {
+      metadata,
+      cause,
+      name: "Data"
+    });
+  }
+
+}
 
 /***/ }),
 /* 2 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-core");
+
+/***/ }),
+/* 3 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return GqlErrors; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return GqlError; });
-/* harmony import */ var _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6);
 /* harmony import */ var _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__);
 
 
 /**
  * Error kinds for GqlError.
  */
-const GqlErrors = Object.freeze({ ..._khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__["Errors"],
-  Network: "Network",
-  Parse: "Parse",
+const GqlErrors = Object.freeze({
+  /**
+   * An internal framework error.
+   */
+  Internal: "Internal",
+
+  /**
+   * Response does not have the correct structure for a GraphQL response.
+   */
   BadResponse: "BadResponse",
+
+  /**
+   * A valid GraphQL result with errors field in the payload.
+   */
   ErrorResult: "ErrorResult"
 });
 /**
  * An error from the GQL API.
+ *
+ * Errors of this type will have names of the format:
+ *     `${kind}GqlError`
  */
 
 class GqlError extends _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__["KindError"] {
@@ -129,27 +208,50 @@ class GqlError extends _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0
     super(message, kind, {
       metadata,
       cause,
-      prefix: "Gql"
+      name: "Gql"
     });
   }
 
 }
 
 /***/ }),
-/* 3 */
-/***/ (function(module, exports) {
+/* 4 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-module.exports = require("@khanacademy/wonder-blocks-core");
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Status; });
+const loadingStatus = Object.freeze({
+  status: "loading"
+});
+const abortedStatus = Object.freeze({
+  status: "aborted"
+});
+/**
+ * Create Result<TData> instances with specific statuses.
+ */
+
+const Status = Object.freeze({
+  loading: () => loadingStatus,
+  aborted: () => abortedStatus,
+  success: data => ({
+    status: "success",
+    data
+  }),
+  error: error => ({
+    status: "error",
+    error
+  })
+});
 
 /***/ }),
-/* 4 */
+/* 5 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return SsrCache; });
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* 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 _scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony import */ var _serializable_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(12);
 
 
 const DefaultScope = "default";
@@ -181,7 +283,7 @@ class SsrCache {
         throw new Error("Cannot initialize data response cache more than once");
       }
 
-      this._hydrationCache = new _scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* ScopedInMemoryCache */ "a"]({
+      this._hydrationCache = new _serializable_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* SerializableInMemoryCache */ "a"]({
         // $FlowIgnore[incompatible-call]
         [DefaultScope]: source
       });
@@ -259,8 +361,8 @@ class SsrCache {
       return (_cache$DefaultScope = cache[DefaultScope]) != null ? _cache$DefaultScope : {};
     };
 
-    this._ssrOnlyCache = _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide() ? ssrOnlyCache || new _scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* ScopedInMemoryCache */ "a"]() : undefined;
-    this._hydrationCache = hydrationCache || new _scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* ScopedInMemoryCache */ "a"]();
+    this._ssrOnlyCache = _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide() ? ssrOnlyCache || new _serializable_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* SerializableInMemoryCache */ "a"]() : undefined;
+    this._hydrationCache = hydrationCache || new _serializable_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* SerializableInMemoryCache */ "a"]();
   }
 
   _setCachedResponse(id, entry, hydrate) {
@@ -293,124 +395,13 @@ class SsrCache {
 }
 
 /***/ }),
-/* 5 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ScopedInMemoryCache; });
-/* harmony import */ var _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
-/* harmony import */ var _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__);
-
-
-/**
- * Describe an in-memory cache.
- */
-class ScopedInMemoryCache {
-  constructor(initialCache = Object.freeze({})) {
-    this.set = (scope, id, value) => {
-      var _this$_cache$scope;
-
-      if (!id || typeof id !== "string") {
-        throw new _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__["KindError"]("id must be non-empty string", _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__["Errors"].InvalidInput);
-      }
-
-      if (!scope || typeof scope !== "string") {
-        throw new _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__["KindError"]("scope must be non-empty string", _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__["Errors"].InvalidInput);
-      }
-
-      if (typeof value === "function") {
-        throw new _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__["KindError"]("value must be a non-function value", _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__["Errors"].InvalidInput);
-      }
-
-      this._cache[scope] = (_this$_cache$scope = this._cache[scope]) != null ? _this$_cache$scope : {};
-      this._cache[scope][id] = Object.freeze(Object(_khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__["clone"])(value));
-    };
-
-    this.get = (scope, id) => {
-      var _this$_cache$scope$id, _this$_cache$scope2;
-
-      return (_this$_cache$scope$id = (_this$_cache$scope2 = this._cache[scope]) == null ? void 0 : _this$_cache$scope2[id]) != null ? _this$_cache$scope$id : null;
-    };
-
-    this.purge = (scope, id) => {
-      var _this$_cache$scope3;
-
-      if (!((_this$_cache$scope3 = this._cache[scope]) != null && _this$_cache$scope3[id])) {
-        return;
-      }
-
-      delete this._cache[scope][id];
-
-      if (Object.keys(this._cache[scope]).length === 0) {
-        delete this._cache[scope];
-      }
-    };
-
-    this.purgeScope = (scope, predicate) => {
-      if (!this._cache[scope]) {
-        return;
-      }
-
-      if (predicate == null) {
-        delete this._cache[scope];
-        return;
-      }
-
-      for (const key of Object.keys(this._cache[scope])) {
-        if (predicate(key, this._cache[scope][key])) {
-          delete this._cache[scope][key];
-        }
-      }
-
-      if (Object.keys(this._cache[scope]).length === 0) {
-        delete this._cache[scope];
-      }
-    };
-
-    this.purgeAll = predicate => {
-      if (predicate == null) {
-        this._cache = {};
-        return;
-      }
-
-      for (const scope of Object.keys(this._cache)) {
-        this.purgeScope(scope, (id, value) => predicate(scope, id, value));
-      }
-    };
-
-    this.clone = () => {
-      try {
-        return Object(_khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__["clone"])(this._cache);
-      } catch (e) {
-        throw new Error(`An error occurred while trying to clone the cache: ${e}`);
-      }
-    };
-
-    try {
-      this._cache = Object(_khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__["clone"])(initialCache);
-    } catch (e) {
-      throw new _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__["KindError"](`An error occurred trying to initialize from a response cache snapshot: ${e}`, _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__["Errors"].InvalidInput);
-    }
-  }
-  /**
-   * Indicate if this cache is being used or not.
-   *
-   * When the cache has entries, returns `true`; otherwise, returns `false`.
-   */
-
-
-  get inUse() {
-    return Object.keys(this._cache).length > 0;
-  }
-  /**
-   * Set a value in the cache.
-   */
-
+/* 6 */
+/***/ (function(module, exports) {
 
-}
+module.exports = require("@khanacademy/wonder-stuff-core");
 
 /***/ }),
-/* 6 */
+/* 7 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -418,8 +409,8 @@ class ScopedInMemoryCache {
 /* 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 _ssr_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
-/* harmony import */ var _request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9);
+/* harmony import */ var _ssr_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony import */ var _request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(10);
 
 
 
@@ -477,11 +468,55 @@ class RequestTracker {
 
     this.fulfillTrackedRequests = () => {
       const promises = [];
+      const {
+        cacheData,
+        cacheError
+      } = this._responseCache;
 
       for (const requestKey of Object.keys(this._trackedRequests)) {
-        const promise = this._requestFulfillment.fulfill(requestKey, this._trackedRequests[requestKey]);
-
-        promises.push(promise);
+        const options = this._trackedRequests[requestKey];
+
+        try {
+          promises.push(this._requestFulfillment.fulfill(requestKey, { ...options
+          }).then(result => {
+            switch (result.status) {
+              case "success":
+                /**
+                 * Let's cache the data!
+                 *
+                 * NOTE: This only caches when we're
+                 * server side.
+                 */
+                cacheData(requestKey, result.data, options.hydrate);
+                break;
+
+              case "error":
+                /**
+                 * Let's cache the error!
+                 *
+                 * NOTE: This only caches when we're
+                 * server side.
+                 */
+                cacheError(requestKey, result.error, options.hydrate);
+                break;
+            } // For status === "loading":
+            // Could never get here unless we wrote
+            // the code wrong. Rather than bloat
+            // code with useless error, just ignore.
+            // For status === "aborted":
+            // We won't cache this.
+            // We don't hydrate aborted requests,
+            // so the client would just see them
+            // as unfulfilled data.
+
+
+            return;
+          }));
+        } catch (e) {
+          // This captures if there are problems in the code that
+          // begins the requests.
+          promises.push(Promise.resolve(cacheError(requestKey, e, options.hydrate)));
+        }
       }
       /**
        * Clear out our tracked info.
@@ -489,16 +524,15 @@ class RequestTracker {
        * We call this now for a simpler API.
        *
        * If we reset the tracked calls after all promises resolve, any
-       * requst tracking done while promises are in flight would be lost.
+       * request tracking done while promises are in flight would be lost.
        *
        * If we don't reset at all, then we have to expose the `reset` call
        * for consumers to use, or they'll only ever be able to accumulate
        * more and more tracked requests, having to fulfill them all every
        * time.
        *
-       * Calling it here means we can have multiple "track -> request" cycles
-       * in a row and in an easy to reason about manner.
-       *
+       * Calling it here means we can have multiple "track -> request"
+       * cycles in a row and in an easy to reason about manner.
        */
 
 
@@ -511,7 +545,7 @@ class RequestTracker {
     };
 
     this._responseCache = responseCache || _ssr_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* SsrCache */ "a"].Default;
-    this._requestFulfillment = new _request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__[/* RequestFulfillment */ "a"](responseCache);
+    this._requestFulfillment = new _request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__[/* RequestFulfillment */ "a"]();
   }
   /**
    * Track a request.
@@ -545,71 +579,96 @@ class RequestTracker {
 }
 
 /***/ }),
-/* 7 */
+/* 8 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return clearSharedCache; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return useSharedCache; });
 /* 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 _util_data_error_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
+/* harmony import */ var _util_scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9);
+
+
 
 
 /**
- * InterceptContext defines a map from request ID to interception methods.
+ * This is the cache.
+ * It's incredibly complex.
+ * Very in-memory. So cache. Such complex. Wow.
+ */
+const cache = new _util_scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_2__[/* ScopedInMemoryCache */ "a"]();
+/**
+ * Clear the in-memory cache or a single scope within it.
+ */
+
+const clearSharedCache = (scope = "") => {
+  // If we have a valid scope (empty string is falsy), then clear that scope.
+  if (scope && typeof scope === "string") {
+    cache.purgeScope(scope);
+  } else {
+    // Just reset the object. This should be sufficient.
+    cache.purgeAll();
+  }
+};
+/**
+ * Hook to retrieve data from and store data in an in-memory cache.
  *
- * INTERNAL USE ONLY
+ * @returns {[?ReadOnlyCacheValue, CacheValueFn]}
+ * Returns an array containing the current cache entry (or undefined), a
+ * function to set the cache entry (passing null or undefined to this function
+ * will delete the entry).
+ *
+ * To clear a single scope within the cache or the entire cache,
+ * the `clearScopedCache` export is available.
+ *
+ * NOTE: Unlike useState or useReducer, we don't automatically update folks
+ * if the value they reference changes. We might add it later (if we need to),
+ * but the likelihood here is that things won't be changing in this cache in a
+ * way where we would need that. If we do (and likely only in specific
+ * circumstances), we should consider adding a simple boolean useState that can
+ * be toggled to cause a rerender whenever the referenced cached data changes
+ * so that callers can re-render on cache changes. However, we should make
+ * sure this toggling is optional - or we could use a callback argument, to
+ * achieve this on an as-needed basis.
  */
-const InterceptContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createContext"]({});
-/* harmony default export */ __webpack_exports__["a"] = (InterceptContext);
 
-/***/ }),
-/* 8 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
+const useSharedCache = (id, scope, initialValue) => {
+  // Verify arguments.
+  if (!id || typeof id !== "string") {
+    throw new _util_data_error_js__WEBPACK_IMPORTED_MODULE_1__[/* DataError */ "a"]("id must be a non-empty string", _util_data_error_js__WEBPACK_IMPORTED_MODULE_1__[/* DataErrors */ "b"].InvalidInput);
+  }
 
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useServerEffect; });
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
-/* 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_tracking_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
-/* harmony import */ var _util_ssr_cache_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
+  if (!scope || typeof scope !== "string") {
+    throw new _util_data_error_js__WEBPACK_IMPORTED_MODULE_1__[/* DataError */ "a"]("scope must be a non-empty string", _util_data_error_js__WEBPACK_IMPORTED_MODULE_1__[/* DataErrors */ "b"].InvalidInput);
+  } // Memoize our APIs.
+  // This one allows callers to set or replace the cached value.
 
 
+  const cacheValue = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](value => value == null ? cache.purge(scope, id) : cache.set(scope, id, value), [id, scope]); // We don't memo-ize the current value, just in case the cache was updated
+  // since our last run through. Also, our cache does not know what type it
+  // stores, so we have to cast it to the type we're exporting. This is a
+  // dev time courtesy, rather than a runtime thing.
+  // $FlowIgnore[incompatible-type]
 
+  let currentValue = cache.get(scope, id); // If we have an initial value, we need to add it to the cache
+  // and use it as our current value.
 
+  if (currentValue == null && initialValue !== undefined) {
+    // Get the initial value.
+    const value = typeof initialValue === "function" ? initialValue() : initialValue;
 
-/**
- * Hook to perform an asynchronous action during server-side rendering.
- *
- * This hook registers an asynchronous action to be performed during
- * server-side rendering. The action is performed only once, and the result
- * is cached against the given identifier so that subsequent calls return that
- * cached result allowing components to render more of the component.
- *
- * This hook requires the Wonder Blocks Data functionality for resolving
- * pending requests, as well as support for the hydration cache to be
- * embedded into a page so that the result can by hydrated (if that is a
- * requirement).
- *
- * The asynchronous action is never invoked on the client-side.
- */
-const useServerEffect = (id, handler, hydrate = true) => {
-  // 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_ssr_cache_js__WEBPACK_IMPORTED_MODULE_3__[/* SsrCache */ "a"].Default.getEntry(id); // 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).
+    if (value != null) {
+      // Update the cache.
+      cacheValue(value); // Make sure we return this value as our current value.
 
-  const maybeTrack = Object(react__WEBPACK_IMPORTED_MODULE_1__["useContext"])(_util_request_tracking_js__WEBPACK_IMPORTED_MODULE_2__[/* TrackerContext */ "b"]);
+      currentValue = value;
+    }
+  } // Now we have everything, let's return it.
 
-  if (cachedResult == null && _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide()) {
-    maybeTrack == null ? void 0 : maybeTrack(id, handler, hydrate);
-  }
 
-  return cachedResult;
+  return [currentValue, cacheValue];
 };
 
 /***/ }),
@@ -617,22 +676,142 @@ const useServerEffect = (id, handler, hydrate = true) => {
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return RequestFulfillment; });
-/* harmony import */ var _ssr_cache_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ScopedInMemoryCache; });
+/* harmony import */ var _data_error_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 
 
-let _default;
+/**
+ * Describe an in-memory cache.
+ */
+class ScopedInMemoryCache {
+  constructor(initialCache = {}) {
+    this._cache = initialCache;
+  }
+  /**
+   * Indicate if this cache is being used or not.
+   *
+   * When the cache has entries, returns `true`; otherwise, returns `false`.
+   */
 
-class RequestFulfillment {
-  static get Default() {
-    if (!_default) {
-      _default = new RequestFulfillment();
+
+  get inUse() {
+    return Object.keys(this._cache).length > 0;
+  }
+  /**
+   * Set a value in the cache.
+   */
+
+
+  set(scope, id, value) {
+    var _this$_cache$scope;
+
+    if (!id || typeof id !== "string") {
+      throw new _data_error_js__WEBPACK_IMPORTED_MODULE_0__[/* DataError */ "a"]("id must be non-empty string", _data_error_js__WEBPACK_IMPORTED_MODULE_0__[/* DataErrors */ "b"].InvalidInput);
     }
 
-    return _default;
+    if (!scope || typeof scope !== "string") {
+      throw new _data_error_js__WEBPACK_IMPORTED_MODULE_0__[/* DataError */ "a"]("scope must be non-empty string", _data_error_js__WEBPACK_IMPORTED_MODULE_0__[/* DataErrors */ "b"].InvalidInput);
+    }
+
+    if (typeof value === "function") {
+      throw new _data_error_js__WEBPACK_IMPORTED_MODULE_0__[/* DataError */ "a"]("value must be a non-function value", _data_error_js__WEBPACK_IMPORTED_MODULE_0__[/* DataErrors */ "b"].InvalidInput);
+    }
+
+    this._cache[scope] = (_this$_cache$scope = this._cache[scope]) != null ? _this$_cache$scope : {};
+    this._cache[scope][id] = value;
+  }
+  /**
+   * Retrieve a value from the cache.
+   */
+
+
+  get(scope, id) {
+    var _this$_cache$scope$id, _this$_cache$scope2;
+
+    return (_this$_cache$scope$id = (_this$_cache$scope2 = this._cache[scope]) == null ? void 0 : _this$_cache$scope2[id]) != null ? _this$_cache$scope$id : null;
   }
+  /**
+   * Purge an item from the cache.
+   */
 
-  constructor(responseCache = undefined) {
+
+  purge(scope, id) {
+    var _this$_cache$scope3;
+
+    if (!((_this$_cache$scope3 = this._cache[scope]) != null && _this$_cache$scope3[id])) {
+      return;
+    }
+
+    delete this._cache[scope][id];
+
+    if (Object.keys(this._cache[scope]).length === 0) {
+      delete this._cache[scope];
+    }
+  }
+  /**
+   * Purge a scope of items that match the given predicate.
+   *
+   * If the predicate is omitted, then all items in the scope are purged.
+   */
+
+
+  purgeScope(scope, predicate) {
+    if (!this._cache[scope]) {
+      return;
+    }
+
+    if (predicate == null) {
+      delete this._cache[scope];
+      return;
+    }
+
+    for (const key of Object.keys(this._cache[scope])) {
+      if (predicate(key, this._cache[scope][key])) {
+        delete this._cache[scope][key];
+      }
+    }
+
+    if (Object.keys(this._cache[scope]).length === 0) {
+      delete this._cache[scope];
+    }
+  }
+  /**
+   * Purge all items from the cache that match the given predicate.
+   *
+   * If the predicate is omitted, then all items in the cache are purged.
+   */
+
+
+  purgeAll(predicate) {
+    if (predicate == null) {
+      this._cache = {};
+      return;
+    }
+
+    for (const scope of Object.keys(this._cache)) {
+      this.purgeScope(scope, (id, value) => predicate(scope, id, value));
+    }
+  }
+
+}
+
+/***/ }),
+/* 10 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return RequestFulfillment; });
+/* harmony import */ var _data_error_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+
+
+let _default;
+/**
+ * This fulfills a request, making sure that in-flight requests are shared.
+ */
+
+
+class RequestFulfillment {
+  constructor() {
     this._requests = {};
 
     this.fulfill = (id, {
@@ -652,173 +831,539 @@ class RequestFulfillment {
        */
 
 
-      const {
-        cacheData,
-        cacheError
-      } = this._responseCache;
+      const request = handler().then(data => ({
+        status: "success",
+        data
+      })).catch(error => {
+        const actualError = typeof error === "string" ? new _data_error_js__WEBPACK_IMPORTED_MODULE_0__[/* DataError */ "a"]("Request failed", _data_error_js__WEBPACK_IMPORTED_MODULE_0__[/* DataErrors */ "b"].Unknown, {
+          metadata: {
+            unexpectedError: error
+          }
+        }) : error; // Return aborted result if the request was aborted.
+        // The only way to detect this reliably, it seems, is to
+        // check the error name and see if it's "AbortError" (this
+        // is also what Apollo does).
+        // Even then, it's reliant on the handler supporting aborts.
+        // TODO(somewhatabstract, FEI-4276): Add first class abort
+        // support to the handler API.
+
+        if (actualError.name === "AbortError") {
+          return {
+            status: "aborted"
+          };
+        }
 
-      try {
-        const request = handler().then(data => {
-          delete this._requests[id];
+        return {
+          status: "error",
+          error: actualError
+        };
+      }).finally(() => {
+        delete this._requests[id];
+      }); // Store the request in our cache.
 
-          if (data == null) {
-            // Request aborted. We won't cache this.
-            return null;
-          }
-          /**
-           * Let's cache the data!
-           *
-           * NOTE: This only caches when we're server side.
-           */
-
-
-          return cacheData(id, data, hydrate);
-        }).catch(error => {
-          delete this._requests[id];
-          /**
-           * Let's cache the error!
-           *
-           * NOTE: This only caches when we're server side.
-           */
-
-          return cacheError(id, error, hydrate);
-        });
-        this._requests[id] = 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(id, e, hydrate));
-      }
+      this._requests[id] = request;
+      return request;
     };
+  }
+
+  static get Default() {
+    if (!_default) {
+      _default = new RequestFulfillment();
+    }
+
+    return _default;
+  }
+
+}
+
+/***/ }),
+/* 11 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return WhenClientSide; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return useHydratableEffect; });
+/* 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 _util_abort_error_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(24);
+/* harmony import */ var _use_server_effect_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(14);
+/* harmony import */ var _use_shared_cache_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(8);
+/* harmony import */ var _use_cached_effect_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(15);
+
+
+
+
+
+
+/**
+ * Policies to define how a hydratable effect should behave client-side.
+ */
+const WhenClientSide = __webpack_require__(29).Mirrored(["DoNotHydrate", "ExecuteWhenNoResult", "ExecuteWhenNoSuccessResult", "AlwaysExecute"]);
+const DefaultScope = "useHydratableEffect";
+/**
+ * Hook to execute an async operation on server and client.
+ *
+ * This hook executes the given handler on the server and on the client,
+ * and, depending on the given options, can hydrate the server-side result.
+ *
+ * Results are cached on the client so they can be shared between equivalent
+ * invocations. Cache changes from one hook instance do not trigger renders
+ * in components that use the same requestID.
+ */
+
+const useHydratableEffect = (requestId, handler, options = {}) => {
+  const {
+    clientBehavior = WhenClientSide.ExecuteWhenNoSuccessResult,
+    skip = false,
+    retainResultOnChange = false,
+    onResultChanged,
+    scope = DefaultScope
+  } = options; // Now we instruct the server to perform the operation.
+  // When client-side, this will look up any response for hydration; it does
+  // not invoke the handler.
+
+  const serverResult = Object(_use_server_effect_js__WEBPACK_IMPORTED_MODULE_2__[/* useServerEffect */ "a"])(requestId, // If we're skipped (unlikely in server worlds, but maybe),
+  // just give an aborted response.
+  skip ? () => Promise.reject(new _util_abort_error_js__WEBPACK_IMPORTED_MODULE_1__[/* AbortError */ "a"]("skipped")) : handler, // Only hydrate if our behavior isn't telling us not to.
+  clientBehavior !== WhenClientSide.DoNotHydrate);
+  const getDefaultCacheValue = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => {
+    // If we don't have a requestId, it's our first render, the one
+    // where we hydrated. So defer to our clientBehavior value.
+    switch (clientBehavior) {
+      case WhenClientSide.DoNotHydrate:
+      case WhenClientSide.AlwaysExecute:
+        // Either we weren't hydrating at all, or we don't care
+        // if we hydrated something or not, either way, we're
+        // doing a request.
+        return null;
+
+      case WhenClientSide.ExecuteWhenNoResult:
+        // We only execute if we didn't hydrate something.
+        // So, returning the hydration result as default for our
+        // cache, will then prevent the cached effect running.
+        return serverResult;
+
+      case WhenClientSide.ExecuteWhenNoSuccessResult:
+        // We only execute if we didn't hydrate a success result.
+        if ((serverResult == null ? void 0 : serverResult.status) === "success") {
+          // So, returning the hydration result as default for our
+          // cache, will then prevent the cached effect running.
+          return serverResult;
+        }
+
+        return null;
+    } // There is no reason for this to change after the first render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []); // Instead of using state, which would be local to just this hook instance,
+  // we use a shared in-memory cache.
+
+  Object(_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_3__[/* useSharedCache */ "b"])(requestId, // The key of the cached item
+  scope, // The scope of the cached items
+  getDefaultCacheValue); // When we're client-side, we ultimately want the result from this call.
+
+  const clientResult = Object(_use_cached_effect_js__WEBPACK_IMPORTED_MODULE_4__[/* useCachedEffect */ "a"])(requestId, handler, {
+    skip,
+    onResultChanged,
+    retainResultOnChange,
+    scope
+  }); // OK, now which result do we return.
+  // Well, we return the serverResult on our very first call and then
+  // the clientResult thereafter. The great thing is that after the very
+  // first call, the serverResult is going to be `null` anyway.
+
+  return serverResult != null ? serverResult : clientResult;
+};
+
+/***/ }),
+/* 12 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return SerializableInMemoryCache; });
+/* harmony import */ var _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6);
+/* harmony import */ var _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _data_error_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
+/* harmony import */ var _scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9);
+
 
-    this._responseCache = responseCache || _ssr_cache_js__WEBPACK_IMPORTED_MODULE_0__[/* SsrCache */ "a"].Default;
+
+
+/**
+ * Describe a serializable in-memory cache.
+ */
+class SerializableInMemoryCache extends _scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_2__[/* ScopedInMemoryCache */ "a"] {
+  constructor(initialCache = {}) {
+    try {
+      super(Object(_khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__["clone"])(initialCache));
+    } catch (e) {
+      throw new _data_error_js__WEBPACK_IMPORTED_MODULE_1__[/* DataError */ "a"](`An error occurred trying to initialize from a response cache snapshot: ${e}`, _data_error_js__WEBPACK_IMPORTED_MODULE_1__[/* DataErrors */ "b"].InvalidInput);
+    }
   }
   /**
-   * Get a promise of a request for a given handler and options.
-   *
-   * This will return an inflight request if one exists, otherwise it will
-   * make a new request. Inflight requests are deleted once they resolve.
+   * Set a value in the cache.
    */
 
 
+  set(scope, id, value) {
+    super.set(scope, id, Object.freeze(Object(_khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__["clone"])(value)));
+  }
+  /**
+   * Clone the cache.
+   */
+
+
+  clone() {
+    try {
+      return Object(_khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__["clone"])(this._cache);
+    } catch (e) {
+      throw new _data_error_js__WEBPACK_IMPORTED_MODULE_1__[/* DataError */ "a"]("An error occurred while trying to clone the cache", _data_error_js__WEBPACK_IMPORTED_MODULE_1__[/* DataErrors */ "b"].Internal, {
+        cause: e
+      });
+    }
+  }
+
 }
 
 /***/ }),
-/* 10 */
+/* 13 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return GqlRouterContext; });
 /* 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__);
 
-const GqlRouterContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createContext"](null);
+
+/**
+ * InterceptContext defines a map from request ID to interception methods.
+ *
+ * INTERNAL USE ONLY
+ */
+const InterceptContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createContext"]([]);
+/* harmony default export */ __webpack_exports__["a"] = (InterceptContext);
 
 /***/ }),
-/* 11 */
+/* 14 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return clearSharedCache; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return useSharedCache; });
-/* 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_stuff_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
-/* harmony import */ var _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _util_scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useServerEffect; });
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* 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_tracking_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
+/* harmony import */ var _util_ssr_cache_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5);
+/* harmony import */ var _util_result_from_cache_response_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(25);
+/* harmony import */ var _use_request_interception_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(16);
+
+
+
 
 
 
 
 /**
- * This is the cache.
- * It's incredibly complex.
- * Very in-memory. So cache. Such complex. Wow.
+ * Hook to perform an asynchronous action during server-side rendering.
+ *
+ * This hook registers an asynchronous action to be performed during
+ * server-side rendering. The action is performed only once, and the result
+ * is cached against the given identifier so that subsequent calls return that
+ * cached result allowing components to render more of the component.
+ *
+ * This hook requires the Wonder Blocks Data functionality for resolving
+ * pending requests, as well as support for the hydration cache to be
+ * embedded into a page so that the result can by hydrated (if that is a
+ * requirement).
+ *
+ * The asynchronous action is never invoked on the client-side.
  */
-const cache = new _util_scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_2__[/* ScopedInMemoryCache */ "a"]();
+const useServerEffect = (requestId, handler, hydrate = true) => {
+  // Plug in to the request interception framework for code that wants
+  // to use that.
+  const interceptedHandler = Object(_use_request_interception_js__WEBPACK_IMPORTED_MODULE_5__[/* useRequestInterception */ "a"])(requestId, handler); // 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_ssr_cache_js__WEBPACK_IMPORTED_MODULE_3__[/* SsrCache */ "a"].Default.getEntry(requestId); // 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_2__[/* TrackerContext */ "b"]);
+
+  if (cachedResult == null && _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide()) {
+    maybeTrack == null ? void 0 : maybeTrack(requestId, interceptedHandler, hydrate);
+  } // A null result means there was no result to hydrate.
+
+
+  return cachedResult == null ? null : Object(_util_result_from_cache_response_js__WEBPACK_IMPORTED_MODULE_4__[/* resultFromCachedResponse */ "a"])(cachedResult);
+};
+
+/***/ }),
+/* 15 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useCachedEffect; });
+/* 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__(2);
+/* 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_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(10);
+/* harmony import */ var _util_status_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
+/* harmony import */ var _use_shared_cache_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8);
+/* harmony import */ var _use_request_interception_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(16);
+
+
+
+
+
+
+const DefaultScope = "useCachedEffect";
 /**
- * Clear the in-memory cache or a single scope within it.
+ * Hook to execute and cache an async operation on the client.
+ *
+ * This hook executes the given handler on the client if there is no
+ * cached result to use.
+ *
+ * Results are cached so they can be shared between equivalent invocations.
+ * In-flight requests are also shared, so that concurrent calls will
+ * behave as one might exect. Cache updates invoked by one hook instance
+ * do not trigger renders in components that use the same requestID; however,
+ * that should not matter since concurrent requests will share the same
+ * in-flight request, and subsequent renders will grab from the cache.
+ *
+ * Once the request has been tried once and a non-loading response has been
+ * cached, the request will not executed made again.
  */
 
-const clearSharedCache = (scope = "") => {
-  // If we have a valid scope (empty string is falsy), then clear that scope.
-  if (scope && typeof scope === "string") {
-    cache.purgeScope(scope);
-  } else {
-    // Just reset the object. This should be sufficient.
-    cache.purgeAll();
-  }
+const useCachedEffect = (requestId, handler, options = {}) => {
+  const {
+    skip: hardSkip = false,
+    retainResultOnChange = false,
+    onResultChanged,
+    scope = DefaultScope
+  } = options; // Plug in to the request interception framework for code that wants
+  // to use that.
+
+  const interceptedHandler = Object(_use_request_interception_js__WEBPACK_IMPORTED_MODULE_5__[/* useRequestInterception */ "a"])(requestId, handler); // Instead of using state, which would be local to just this hook instance,
+  // we use a shared in-memory cache.
+
+  const [mostRecentResult, setMostRecentResult] = Object(_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_4__[/* useSharedCache */ "b"])(requestId, // The key of the cached item
+  scope // The scope of the cached items
+  // No default value. We don't want the loading status there; to ensure
+  // that all calls when the request is in-flight will update once that
+  // request is done, we want the cache to be empty until that point.
+  ); // Build a function that will update the cache and either invoke the
+  // callback provided in options, or force an update.
+
+  const forceUpdate = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__["useForceUpdate"])();
+  const setCacheAndNotify = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](value => {
+    setMostRecentResult(value); // If our caller provided a cacheUpdated callback, we use that.
+    // Otherwise, we toggle our little state update.
+
+    if (onResultChanged != null) {
+      onResultChanged(value);
+    } else {
+      forceUpdate();
+    }
+  }, [setMostRecentResult, onResultChanged, forceUpdate]); // We need to trigger a re-render when the request ID changes as that
+  // indicates its a different request. We don't default the current id as
+  // this is a proxy for the first render, where we will make the request
+  // if we don't already have a cached value.
+
+  const requestIdRef = react__WEBPACK_IMPORTED_MODULE_0__["useRef"]();
+  const previousRequestId = requestIdRef.current; // Calculate our soft skip state.
+  // Soft skip changes are things that should skip the effect if something
+  // else triggers the effect to run, but should not itself trigger the effect
+  // (which would cancel a previous invocation).
+
+  const softSkip = react__WEBPACK_IMPORTED_MODULE_0__["useMemo"](() => {
+    if (requestId === previousRequestId) {
+      // If the requestId is unchanged, it means we already rendered at
+      // least once and so we already made the request at least once. So
+      // we can bail out right here.
+      return true;
+    } // If we already have a cached value, we're going to skip.
+
+
+    if (mostRecentResult != null) {
+      return true;
+    }
+
+    return false;
+  }, [requestId, previousRequestId, mostRecentResult]); // So now we make sure the client-side request happens per our various
+  // options.
+
+  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](() => {
+    let cancel = false; // We don't do anything if we've been told to hard skip (a hard skip
+    // means we should cancel the previous request and is therefore a
+    // dependency on that), or we have determined we have already done
+    // enough and can soft skip (a soft skip doesn't trigger the request
+    // to re-run; we don't want to cancel the in progress effect if we're
+    // soft skipping.
+
+    if (hardSkip || softSkip) {
+      return;
+    } // If we got here, we're going to perform the request.
+    // Let's make sure our ref is set to the most recent requestId.
+
+
+    requestIdRef.current = requestId; // OK, we've done all our checks and things. It's time to make the
+    // request. We use our request fulfillment here so that in-flight
+    // requests are shared.
+    // NOTE: Our request fulfillment handles the error cases here.
+    // Catching shouldn't serve a purpose.
+    // eslint-disable-next-line promise/catch-or-return
+
+    _util_request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__[/* RequestFulfillment */ "a"].Default.fulfill(requestId, {
+      handler: interceptedHandler
+    }).then(result => {
+      if (cancel) {
+        // We don't modify our result if an earlier effect was
+        // cancelled as it means that this hook no longer cares about
+        // that old request.
+        return;
+      }
+
+      setCacheAndNotify(result);
+      return; // Shut up eslint always-return rule.
+    });
+    return () => {
+      // TODO(somewhatabstract, FEI-4276): Eventually, we will want to be
+      // able abort in-flight requests, but for now, we don't have that.
+      // (Of course, we will only want to abort them if no one is waiting
+      // on them)
+      // For now, we just block cancelled requests from changing our
+      // cache.
+      cancel = true;
+    }; // We only want to run this effect if the requestId, or skip values
+    // change. These are the only two things that should affect the
+    // cancellation of a pending request. We do not update if the handler
+    // changes, in order to simplify the API - otherwise, callers would
+    // not be able to use inline functions with this hook.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hardSkip, requestId]); // We track the last result we returned in order to support the
+  // "retainResultOnChange" option.
+
+  const lastResultAgnosticOfIdRef = react__WEBPACK_IMPORTED_MODULE_0__["useRef"](_util_status_js__WEBPACK_IMPORTED_MODULE_3__[/* Status */ "a"].loading());
+  const loadingResult = retainResultOnChange ? lastResultAgnosticOfIdRef.current : _util_status_js__WEBPACK_IMPORTED_MODULE_3__[/* Status */ "a"].loading(); // Loading is a transient state, so we only use it here; it's not something
+  // we cache.
+
+  const result = react__WEBPACK_IMPORTED_MODULE_0__["useMemo"](() => mostRecentResult != null ? mostRecentResult : loadingResult, [mostRecentResult, loadingResult]);
+  lastResultAgnosticOfIdRef.current = result;
+  return result;
 };
+
+/***/ }),
+/* 16 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useRequestInterception; });
+/* 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 _components_intercept_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(13);
+
+
+
 /**
- * Hook to retrieve data from and store data in an in-memory cache.
- *
- * @returns {[?ReadOnlyCacheValue, CacheValueFn]}
- * Returns an array containing the current cache entry (or undefined), a
- * function to set the cache entry (passing null or undefined to this function
- * will delete the entry).
+ * Allow request handling to be intercepted.
  *
- * To clear a single scope within the cache or the entire cache,
- * the `clearScopedCache` export is available.
+ * Hook to take a uniquely identified request handler and return a
+ * method that will support request interception from the InterceptRequest
+ * component.
  *
- * NOTE: Unlike useState or useReducer, we don't automatically update folks
- * if the value they reference changes. We might add it later (if we need to),
- * but the likelihood here is that things won't be changing in this cache in a
- * way where we would need that. If we do (and likely only in specific
- * circumstances), we should consider adding a simple boolean useState that can
- * be toggled to cause a rerender whenever the referenced cached data changes
- * so that callers can re-render on cache changes. However, we should make
- * sure this toggling is optional - or we could use a callback argument, to
- * achieve this on an as-needed basis.
+ * If you want request interception to be supported with `useServerEffect` or
+ * any client-side effect that uses the handler, call this first to generate
+ * an intercepted handler, and then invoke `useServerEffect` (or other things)
+ * with that intercepted handler.
  */
+const useRequestInterception = (requestId, handler) => {
+  // Get the interceptors that have been registered.
+  const interceptors = react__WEBPACK_IMPORTED_MODULE_0__["useContext"](_components_intercept_context_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"]); // Now, we need to create a new handler that will check if the
+  // request is intercepted before ultimately calling the original handler
+  // if nothing intercepted it.
+  // We memoize this so that it only changes if something related to it
+  // changes.
+
+  const interceptedHandler = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => {
+    // Call the interceptors from closest to furthest.
+    // If one returns a non-null result, then we keep that.
+    const interceptResponse = interceptors.reduceRight((prev, interceptor) => {
+      if (prev != null) {
+        return prev;
+      }
 
-const useSharedCache = (id, scope, initialValue) => {
-  // Verify arguments.
-  if (!id || typeof id !== "string") {
-    throw new _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_1__["KindError"]("id must be a non-empty string", _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_1__["Errors"].InvalidInput);
-  }
-
-  if (!scope || typeof scope !== "string") {
-    throw new _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_1__["KindError"]("scope must be a non-empty string", _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_1__["Errors"].InvalidInput);
-  } // Memoize our APIs.
-  // This one allows callers to set or replace the cached value.
-
+      return interceptor(requestId);
+    }, null); // If nothing intercepted this request, invoke the original handler.
+    // NOTE: We can't guarantee all interceptors return the same type
+    // as our handler, so how can flow know? Let's just suppress that.
+    // $FlowFixMe[incompatible-return]
 
-  const cacheValue = react__WEBPACK_IMPORTED_MODULE_0__["useMemo"](() => value => value == null ? cache.purge(scope, id) : cache.set(scope, id, value), [id, scope]); // We don't memo-ize the current value, just in case the cache was updated
-  // since our last run through. Also, our cache does not know what type it
-  // stores, so we have to cast it to the type we're exporting. This is a
-  // dev time courtesy, rather than a runtime thing.
-  // $FlowIgnore[incompatible-type]
+    return interceptResponse != null ? interceptResponse : handler();
+  }, [handler, interceptors, requestId]);
+  return interceptedHandler;
+};
 
-  let currentValue = cache.get(scope, id); // If we have an initial value, we need to add it to the cache
-  // and use it as our current value.
+/***/ }),
+/* 17 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-  if (currentValue == null && initialValue !== undefined) {
-    // Get the initial value.
-    const value = typeof initialValue === "function" ? initialValue() : initialValue; // Update the cache.
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return GqlRouterContext; });
+/* 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__);
 
-    cacheValue(value); // Make sure we return this value as our current value.
+const GqlRouterContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createContext"](null);
 
-    currentValue = value;
-  } // Now we have everything, let's return it.
+/***/ }),
+/* 18 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return mergeGqlContext; });
+/**
+ * Construct a complete GqlContext from current defaults and a partial context.
+ *
+ * Values in the partial context that are `undefined` will be ignored.
+ * Values in the partial context that are `null` will be deleted.
+ */
+const mergeGqlContext = (defaultContext, overrides) => {
+  // Let's merge the partial context default context. We deliberately
+  // don't spread because spreading would overwrite default context
+  // values with undefined or null if the partial context includes a value
+  // explicitly set to undefined or null.
+  return Object.keys(overrides).reduce((acc, key) => {
+    // Undefined values are ignored.
+    if (overrides[key] !== undefined) {
+      if (overrides[key] === null) {
+        // Null indicates we delete this context value.
+        delete acc[key];
+      } else {
+        // Otherwise, we set it.
+        acc[key] = overrides[key];
+      }
+    }
 
-  return [currentValue, cacheValue];
+    return acc;
+  }, { ...defaultContext
+  });
 };
 
 /***/ }),
-/* 12 */
+/* 19 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "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__(3);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
 /* 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__(6);
+/* harmony import */ var _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 
 
 
@@ -840,22 +1385,13 @@ class TrackData extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 }
 
 /***/ }),
-/* 13 */
+/* 20 */
 /***/ (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 _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
-/* 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_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9);
-/* harmony import */ var _intercept_context_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(7);
-/* harmony import */ var _hooks_use_server_effect_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8);
-/* harmony import */ var _util_result_from_cache_response_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(17);
-
-
-
-
+/* harmony import */ var _hooks_use_hydratable_effect_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
 
 
 
@@ -868,118 +1404,26 @@ const Data = ({
   requestId,
   handler,
   children,
-  hydrate,
-  showOldDataWhileLoading,
-  alwaysRequestOnHydration
+  retainResultOnChange = false,
+  clientBehavior = _hooks_use_hydratable_effect_js__WEBPACK_IMPORTED_MODULE_1__[/* WhenClientSide */ "a"].ExecuteWhenNoSuccessResult
 }) => {
-  // 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.
-  const interceptorMap = react__WEBPACK_IMPORTED_MODULE_0__["useContext"](_intercept_context_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"]); // If we have an interceptor, we need to replace the handler with one
-  // that uses the interceptor. This helper function generates a new
-  // handler.
-
-  const maybeInterceptedHandler = react__WEBPACK_IMPORTED_MODULE_0__["useMemo"](() => {
-    const interceptor = interceptorMap[requestId];
-
-    if (interceptor == null) {
-      return handler;
-    }
-
-    return () => {
-      var _interceptor;
-
-      return (_interceptor = interceptor()) != null ? _interceptor : handler();
-    };
-  }, [handler, interceptorMap, requestId]);
-  const hydrateResult = Object(_hooks_use_server_effect_js__WEBPACK_IMPORTED_MODULE_4__[/* useServerEffect */ "a"])(requestId, maybeInterceptedHandler, hydrate);
-  const [currentResult, setResult] = react__WEBPACK_IMPORTED_MODULE_0__["useState"](hydrateResult); // Here we make sure the request still occurs client-side as needed.
-  // This is for legacy usage that expects this. Eventually we will want
-  // to deprecate.
-
-  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](() => {
-    // This is here until I can do a better documentation example for
-    // the TrackData docs.
-    // istanbul ignore next
-    if (_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__["Server"].isServerSide()) {
-      return;
-    } // We don't bother with this if we have hydration data and we're not
-    // forcing a request on hydration.
-    // We don't care if these things change after the first render,
-    // so we don't want them in the inputs array.
-
-
-    if (!alwaysRequestOnHydration && (hydrateResult == null ? void 0 : hydrateResult.data) != null) {
-      return;
-    } // If we're not hydrating a result and we're not going to render
-    // with old data until we're loaded, we want to make sure we set our
-    // result to null so that we're in the loading state.
-
-
-    if (!showOldDataWhileLoading) {
-      // Mark ourselves as loading.
-      setResult(null);
-    } // We aren't server-side, so let's make the request.
-    // We don't need to use our built-in request fulfillment here if we
-    // don't want, but it does mean we'll share inflight requests for the
-    // same ID and the result will be in the same format as the
-    // hydrated value.
-
-
-    let cancel = false;
-    _util_request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__[/* RequestFulfillment */ "a"].Default.fulfill(requestId, {
-      handler: maybeInterceptedHandler
-    }).then(result => {
-      if (cancel) {
-        return;
-      }
-
-      setResult(result);
-      return;
-    }).catch(e => {
-      if (cancel) {
-        return;
-      }
-      /**
-       * We should never get here as errors in fulfillment are part
-       * of the `then`, but if we do.
-       */
-      // eslint-disable-next-line no-console
-
-
-      console.error(`Unexpected error occurred during data fulfillment: ${e}`);
-      setResult({
-        error: typeof e === "string" ? e : e.message
-      });
-      return;
-    });
-    return () => {
-      cancel = true;
-    }; // If the handler changes, we don't care. The ID is what indicates
-    // the request that should be made and folks shouldn't be changing the
-    // handler without changing the ID as well.
-    // In addition, we don't want to include hydrateResult nor
-    // alwaysRequestOnHydration as them changinng after the first pass
-    // is irrelevant.
-    // Finally, we don't want to include showOldDataWhileLoading as that
-    // changing on its own is also not relevant. It only matters if the
-    // request itself changes. All of which is to say that we only
-    // run this effect for the ID changing.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [requestId]);
-  return children(Object(_util_result_from_cache_response_js__WEBPACK_IMPORTED_MODULE_5__[/* resultFromCachedResponse */ "a"])(currentResult));
+  const result = Object(_hooks_use_hydratable_effect_js__WEBPACK_IMPORTED_MODULE_1__[/* useHydratableEffect */ "b"])(requestId, handler, {
+    retainResultOnChange,
+    clientBehavior
+  });
+  return children(result);
 };
 
 /* harmony default export */ __webpack_exports__["a"] = (Data);
 
 /***/ }),
-/* 14 */
+/* 21 */
 /***/ (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 _intercept_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7);
+/* harmony import */ var _intercept_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(13);
 
 
 
@@ -993,36 +1437,35 @@ const Data = ({
  * be picked up by `Data` component requests from outside the children of this
  * component.
  *
- * These components do not chain. If a different `InterceptData` instance is
- * rendered within this one that intercepts the same id, then that
- * new instance will replace this interceptor for its children. All methods
- * will be replaced.
+ * Interceptions within the same component tree are chained such that the
+ * interceptor closest to the intercepted request is called first, and the
+ * furthest interceptor is called last.
  */
-const InterceptData = ({
-  requestId,
-  handler,
+const InterceptRequests = ({
+  interceptor,
   children
 }) => {
-  const interceptMap = react__WEBPACK_IMPORTED_MODULE_0__["useContext"](_intercept_context_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"]);
-  const updatedInterceptMap = react__WEBPACK_IMPORTED_MODULE_0__["useMemo"](() => ({ ...interceptMap,
-    [requestId]: handler
-  }), [interceptMap, requestId, handler]);
+  const interceptors = react__WEBPACK_IMPORTED_MODULE_0__["useContext"](_intercept_context_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"]);
+  const updatedInterceptors = react__WEBPACK_IMPORTED_MODULE_0__["useMemo"]( // We could build this in reverse order so that our hook that does
+  // the interception didn't have to use reduceRight, but I think it
+  // is easier to think about if we do this in component tree order.
+  () => [].concat(interceptors, [interceptor]), [interceptors, interceptor]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_intercept_context_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"].Provider, {
-    value: updatedInterceptMap
+    value: updatedInterceptors
   }, children);
 };
 
-/* harmony default export */ __webpack_exports__["a"] = (InterceptData);
+/* harmony default export */ __webpack_exports__["a"] = (InterceptRequests);
 
 /***/ }),
-/* 15 */
+/* 22 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return GqlRouter; });
 /* 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 _util_gql_router_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(10);
+/* harmony import */ var _util_gql_router_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(17);
 
 
 
@@ -1059,16 +1502,16 @@ const GqlRouter = ({
 };
 
 /***/ }),
-/* 16 */
+/* 23 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useGql; });
 /* 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 _util_gql_router_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(10);
-/* harmony import */ var _util_get_gql_data_from_response_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(18);
-/* harmony import */ var _util_gql_error_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
+/* harmony import */ var _util_merge_gql_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(18);
+/* harmony import */ var _use_gql_router_context_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(26);
+/* harmony import */ var _util_get_gql_data_from_response_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(27);
 
 
 
@@ -1084,74 +1527,69 @@ const GqlRouter = ({
  * Values in the partial context given to the returned fetch function will
  * only be included if they have a value other than undefined.
  */
-const useGql = () => {
+const useGql = (context = {}) => {
   // This hook only works if the `GqlRouter` has been used to setup context.
-  const gqlRouterContext = Object(react__WEBPACK_IMPORTED_MODULE_0__["useContext"])(_util_gql_router_context_js__WEBPACK_IMPORTED_MODULE_1__[/* GqlRouterContext */ "a"]);
-
-  if (gqlRouterContext == null) {
-    throw new _util_gql_error_js__WEBPACK_IMPORTED_MODULE_3__[/* GqlError */ "a"]("No GqlRouter", _util_gql_error_js__WEBPACK_IMPORTED_MODULE_3__[/* GqlErrors */ "b"].Internal);
-  }
-
-  const {
-    fetch,
-    defaultContext
-  } = gqlRouterContext; // Let's memoize the gqlFetch function we create based off our context.
+  const gqlRouterContext = Object(_use_gql_router_context_js__WEBPACK_IMPORTED_MODULE_2__[/* useGqlRouterContext */ "a"])(context); // Let's memoize the gqlFetch function we create based off our context.
   // That way, even if the context happens to change, if its values don't
   // we give the same function instance back to our callers instead of
   // making a new one. That then means they can safely use the return value
   // in hooks deps without fear of it triggering extra renders.
 
-  const gqlFetch = Object(react__WEBPACK_IMPORTED_MODULE_0__["useMemo"])(() => (operation, options = Object.freeze({})) => {
+  const gqlFetch = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])((operation, options = Object.freeze({})) => {
+    const {
+      fetch,
+      defaultContext
+    } = gqlRouterContext;
     const {
       variables,
       context = {}
-    } = options; // Let's merge the partial context of the fetch with the
-    // default context. We deliberately don't spread because
-    // spreading would overwrite default context values with
-    // undefined if the partial context includes a value explicitly
-    // set to undefined. Instead, we use a map/reduce of keys.
-
-    const mergedContext = Object.keys(context).reduce((acc, key) => {
-      if (context[key] !== undefined) {
-        acc[key] = context[key];
-      }
-
-      return acc;
-    }, { ...defaultContext
-    }); // Invoke the fetch and extract the data.
-
-    return fetch(operation, variables, mergedContext).then(_util_get_gql_data_from_response_js__WEBPACK_IMPORTED_MODULE_2__[/* getGqlDataFromResponse */ "a"], error => {
-      // Return null if the request was aborted.
-      // The only way to detect this reliably, it seems, is to
-      // check the error name and see if it's "AbortError" (this
-      // is also what Apollo does).
-      // Even then, it's reliant on the fetch supporting aborts.
-      if (error.name === "AbortError") {
-        return null;
-      } // Need to make sure we pass other errors along.
-
+    } = options;
+    const finalContext = Object(_util_merge_gql_context_js__WEBPACK_IMPORTED_MODULE_1__[/* mergeGqlContext */ "a"])(defaultContext, context); // Invoke the fetch and extract the data.
 
-      throw error;
-    });
-  }, [fetch, defaultContext]);
+    return fetch(operation, variables, finalContext).then(_util_get_gql_data_from_response_js__WEBPACK_IMPORTED_MODULE_3__[/* getGqlDataFromResponse */ "a"]);
+  }, [gqlRouterContext]);
   return gqlFetch;
 };
 
 /***/ }),
-/* 17 */
+/* 24 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AbortError; });
+/**
+ * Simple implementation to represent aborting.
+ *
+ * Other frameworks may provide this too, so we won't be sharing this with
+ * the outside world. It's just a utility for test and internal use whenever
+ * we need to represent the concept of aborted things.
+ */
+class AbortError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "AbortError";
+  }
+
+}
+
+/***/ }),
+/* 25 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return resultFromCachedResponse; });
+/* harmony import */ var _status_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
+/* harmony import */ var _data_error_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
+
+
+
 /**
  * Turns a cache entry into a stateful result.
  */
 const resultFromCachedResponse = cacheEntry => {
-  // No cache entry means we didn't load one yet.
+  // No cache entry means no result to be hydrated.
   if (cacheEntry == null) {
-    return {
-      status: "loading"
-    };
+    return null;
   }
 
   const {
@@ -1160,31 +1598,81 @@ const resultFromCachedResponse = cacheEntry => {
   } = cacheEntry;
 
   if (error != null) {
-    return {
-      status: "error",
-      error
-    };
+    // Let's hydrate the error. We don't persist everything about the
+    // original error on the server, hence why we only superficially
+    // hydrate it to a GqlHydratedError.
+    return _status_js__WEBPACK_IMPORTED_MODULE_0__[/* Status */ "a"].error(new _data_error_js__WEBPACK_IMPORTED_MODULE_1__[/* DataError */ "a"](error, _data_error_js__WEBPACK_IMPORTED_MODULE_1__[/* DataErrors */ "b"].Hydrated));
   }
 
   if (data != null) {
-    return {
-      status: "success",
-      data
-    };
+    return _status_js__WEBPACK_IMPORTED_MODULE_0__[/* Status */ "a"].success(data);
+  } // We shouldn't get here since we don't actually cache null data.
+
+
+  return _status_js__WEBPACK_IMPORTED_MODULE_0__[/* Status */ "a"].aborted();
+};
+
+/***/ }),
+/* 26 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useGqlRouterContext; });
+/* 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 _util_merge_gql_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(18);
+/* harmony import */ var _util_gql_router_context_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(17);
+/* harmony import */ var _util_gql_error_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3);
+
+
+
+
+
+/**
+ * Construct a GqlRouterContext from the current one and partial context.
+ */
+const useGqlRouterContext = (contextOverrides = {}) => {
+  // This hook only works if the `GqlRouter` has been used to setup context.
+  const gqlRouterContext = Object(react__WEBPACK_IMPORTED_MODULE_0__["useContext"])(_util_gql_router_context_js__WEBPACK_IMPORTED_MODULE_2__[/* GqlRouterContext */ "a"]);
+
+  if (gqlRouterContext == null) {
+    throw new _util_gql_error_js__WEBPACK_IMPORTED_MODULE_3__[/* GqlError */ "a"]("No GqlRouter", _util_gql_error_js__WEBPACK_IMPORTED_MODULE_3__[/* GqlErrors */ "b"].Internal);
   }
 
-  return {
-    status: "aborted"
-  };
+  const {
+    fetch,
+    defaultContext
+  } = gqlRouterContext;
+  const contextRef = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(defaultContext);
+  const mergedContext = Object(_util_merge_gql_context_js__WEBPACK_IMPORTED_MODULE_1__[/* mergeGqlContext */ "a"])(defaultContext, contextOverrides); // Now, we can see if this represents a new context and if so,
+  // update our ref and return the merged value.
+
+  const refKeys = Object.keys(contextRef.current);
+  const mergedKeys = Object.keys(mergedContext);
+  const shouldWeUpdateRef = refKeys.length !== mergedKeys.length || mergedKeys.every(key => contextRef.current[key] !== mergedContext[key]);
+
+  if (shouldWeUpdateRef) {
+    contextRef.current = mergedContext;
+  } // OK, now we're up-to-date, let's memoize our final result.
+
+
+  const finalContext = contextRef.current;
+  const finalRouterContext = Object(react__WEBPACK_IMPORTED_MODULE_0__["useMemo"])(() => ({
+    fetch,
+    defaultContext: finalContext
+  }), [fetch, finalContext]);
+  return finalRouterContext;
 };
 
 /***/ }),
-/* 18 */
+/* 27 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return getGqlDataFromResponse; });
-/* harmony import */ var _gql_error_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var _data_error_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var _gql_error_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
+
 
 /**
  * Validate a GQL operation response and extract the data.
@@ -1199,7 +1687,7 @@ const getGqlDataFromResponse = async response => {
   try {
     result = JSON.parse(bodyText);
   } catch (e) {
-    throw new _gql_error_js__WEBPACK_IMPORTED_MODULE_0__[/* GqlError */ "a"]("Failed to parse response", _gql_error_js__WEBPACK_IMPORTED_MODULE_0__[/* GqlErrors */ "b"].Parse, {
+    throw new _data_error_js__WEBPACK_IMPORTED_MODULE_0__[/* DataError */ "a"]("Failed to parse response", _data_error_js__WEBPACK_IMPORTED_MODULE_0__[/* DataErrors */ "b"].Parse, {
       metadata: {
         statusCode: response.status,
         bodyText
@@ -1210,7 +1698,7 @@ const getGqlDataFromResponse = async response => {
 
 
   if (response.status >= 300) {
-    throw new _gql_error_js__WEBPACK_IMPORTED_MODULE_0__[/* GqlError */ "a"]("Response unsuccessful", _gql_error_js__WEBPACK_IMPORTED_MODULE_0__[/* GqlErrors */ "b"].Network, {
+    throw new _data_error_js__WEBPACK_IMPORTED_MODULE_0__[/* DataError */ "a"]("Response unsuccessful", _data_error_js__WEBPACK_IMPORTED_MODULE_0__[/* DataErrors */ "b"].Network, {
       metadata: {
         statusCode: response.status,
         result
@@ -1224,7 +1712,7 @@ const getGqlDataFromResponse = async response => {
   !Object.prototype.hasOwnProperty.call(result, "data") && // Flow shouldn't be warning about this.
   // $FlowIgnore[method-unbinding]
   !Object.prototype.hasOwnProperty.call(result, "errors")) {
-    throw new _gql_error_js__WEBPACK_IMPORTED_MODULE_0__[/* GqlError */ "a"]("Server response missing", _gql_error_js__WEBPACK_IMPORTED_MODULE_0__[/* GqlErrors */ "b"].BadResponse, {
+    throw new _gql_error_js__WEBPACK_IMPORTED_MODULE_1__[/* GqlError */ "a"]("Server response missing", _gql_error_js__WEBPACK_IMPORTED_MODULE_1__[/* GqlErrors */ "b"].BadResponse, {
       metadata: {
         statusCode: response.status,
         result
@@ -1234,7 +1722,7 @@ const getGqlDataFromResponse = async response => {
 
 
   if (result.errors != null && Array.isArray(result.errors) && result.errors.length > 0) {
-    throw new _gql_error_js__WEBPACK_IMPORTED_MODULE_0__[/* GqlError */ "a"]("GraphQL errors", _gql_error_js__WEBPACK_IMPORTED_MODULE_0__[/* GqlErrors */ "b"].ErrorResult, {
+    throw new _gql_error_js__WEBPACK_IMPORTED_MODULE_1__[/* GqlError */ "a"]("GraphQL errors", _gql_error_js__WEBPACK_IMPORTED_MODULE_1__[/* GqlErrors */ "b"].ErrorResult, {
       metadata: {
         statusCode: response.status,
         result
@@ -1247,7 +1735,7 @@ const getGqlDataFromResponse = async response => {
 };
 
 /***/ }),
-/* 19 */
+/* 28 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1257,45 +1745,85 @@ __webpack_require__.r(__webpack_exports__);
 /* 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__(3);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* 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_ssr_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
-/* harmony import */ var _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
-/* harmony import */ var _components_track_data_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(12);
+/* harmony import */ var _util_ssr_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony import */ var _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
+/* harmony import */ var _components_track_data_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(19);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TrackData", function() { return _components_track_data_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
 
-/* harmony import */ var _components_data_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(13);
+/* harmony import */ var _components_data_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(20);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Data", function() { return _components_data_js__WEBPACK_IMPORTED_MODULE_4__["a"]; });
 
-/* harmony import */ var _components_intercept_data_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(14);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InterceptData", function() { return _components_intercept_data_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });
+/* harmony import */ var _components_intercept_requests_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(21);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InterceptRequests", function() { return _components_intercept_requests_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });
+
+/* harmony import */ var _util_data_error_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(1);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "DataError", function() { return _util_data_error_js__WEBPACK_IMPORTED_MODULE_6__["a"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "DataErrors", function() { return _util_data_error_js__WEBPACK_IMPORTED_MODULE_6__["b"]; });
+
+/* harmony import */ var _hooks_use_server_effect_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(14);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useServerEffect", function() { return _hooks_use_server_effect_js__WEBPACK_IMPORTED_MODULE_7__["a"]; });
+
+/* harmony import */ var _hooks_use_cached_effect_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(15);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useCachedEffect", function() { return _hooks_use_cached_effect_js__WEBPACK_IMPORTED_MODULE_8__["a"]; });
+
+/* harmony import */ var _hooks_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(8);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useSharedCache", function() { return _hooks_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_9__["b"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "clearSharedCache", function() { return _hooks_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_9__["a"]; });
 
-/* harmony import */ var _hooks_use_server_effect_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(8);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useServerEffect", function() { return _hooks_use_server_effect_js__WEBPACK_IMPORTED_MODULE_6__["a"]; });
+/* harmony import */ var _hooks_use_hydratable_effect_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(11);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useHydratableEffect", function() { return _hooks_use_hydratable_effect_js__WEBPACK_IMPORTED_MODULE_10__["b"]; });
 
-/* harmony import */ var _hooks_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(11);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useSharedCache", function() { return _hooks_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_7__["b"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "WhenClientSide", function() { return _hooks_use_hydratable_effect_js__WEBPACK_IMPORTED_MODULE_10__["a"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "clearSharedCache", function() { return _hooks_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_7__["a"]; });
+/* harmony import */ var _util_scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(9);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScopedInMemoryCache", function() { return _util_scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_11__["a"]; });
 
-/* harmony import */ var _util_scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(5);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScopedInMemoryCache", function() { return _util_scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_8__["a"]; });
+/* harmony import */ var _util_serializable_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(12);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SerializableInMemoryCache", function() { return _util_serializable_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_12__["a"]; });
 
-/* harmony import */ var _components_gql_router_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(15);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlRouter", function() { return _components_gql_router_js__WEBPACK_IMPORTED_MODULE_9__["a"]; });
+/* harmony import */ var _util_request_fulfillment_js__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(10);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RequestFulfillment", function() { return _util_request_fulfillment_js__WEBPACK_IMPORTED_MODULE_13__["a"]; });
 
-/* harmony import */ var _hooks_use_gql_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(16);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useGql", function() { return _hooks_use_gql_js__WEBPACK_IMPORTED_MODULE_10__["a"]; });
+/* harmony import */ var _util_status_js__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(4);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Status", function() { return _util_status_js__WEBPACK_IMPORTED_MODULE_14__["a"]; });
 
-/* harmony import */ var _util_gql_error_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(2);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlErrors", function() { return _util_gql_error_js__WEBPACK_IMPORTED_MODULE_11__["b"]; });
+/* harmony import */ var _components_gql_router_js__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(22);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlRouter", function() { return _components_gql_router_js__WEBPACK_IMPORTED_MODULE_15__["a"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlError", function() { return _util_gql_error_js__WEBPACK_IMPORTED_MODULE_11__["a"]; });
+/* harmony import */ var _hooks_use_gql_js__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(23);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useGql", function() { return _hooks_use_gql_js__WEBPACK_IMPORTED_MODULE_16__["a"]; });
 
+/* harmony import */ var _util_gql_error_js__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(3);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlError", function() { return _util_gql_error_js__WEBPACK_IMPORTED_MODULE_17__["a"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlErrors", function() { return _util_gql_error_js__WEBPACK_IMPORTED_MODULE_17__["b"]; });
 
 
+
+
+
+/**
+ * Initialize the hydration cache.
+ *
+ * @param {ResponseCache} source The cache content to use for initializing the
+ * cache.
+ * @throws {Error} If the cache is already initialized.
+ */
 const initializeCache = source => _util_ssr_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* SsrCache */ "a"].Default.initialize(source);
+/**
+ * Fulfill all tracked data requests.
+ *
+ * This is for use with the `TrackData` component during server-side rendering.
+ *
+ * @throws {Error} If executed outside of server-side rendering.
+ * @returns {Promise<void>} A promise that resolves when all tracked requests
+ * have been fulfilled.
+ */
+
 const fulfillAllDataRequests = () => {
   if (!_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide()) {
     return Promise.reject(new Error("Data requests are not tracked when client-side"));
@@ -1303,6 +1831,16 @@ const fulfillAllDataRequests = () => {
 
   return _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_2__[/* RequestTracker */ "a"].Default.fulfillTrackedRequests();
 };
+/**
+ * Indicate if there are unfulfilled tracked requests.
+ *
+ * This is used in conjunction with `TrackData`.
+ *
+ * @throws {Error} If executed outside of server-side rendering.
+ * @returns {boolean} `true` if there are unfulfilled tracked requests;
+ * otherwise, `false`.
+ */
+
 const hasUnfulfilledRequests = () => {
   if (!_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide()) {
     throw new Error("Data requests are not tracked when client-side");
@@ -1310,18 +1848,160 @@ const hasUnfulfilledRequests = () => {
 
   return _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_2__[/* RequestTracker */ "a"].Default.hasUnfulfilledRequests;
 };
+/**
+ * Remove the request identified from the cached hydration responses.
+ *
+ * @param {string} id The request ID of the response to remove from the cache.
+ */
+
 const removeFromCache = id => _util_ssr_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* SsrCache */ "a"].Default.remove(id);
+/**
+ * Remove all cached hydration responses that match the given predicate.
+ *
+ * @param {(id: string) => boolean} [predicate] The predicate to match against
+ * the cached hydration responses. If no predicate is provided, all cached
+ * hydration responses will be removed.
+ */
+
 const removeAllFromCache = predicate => _util_ssr_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* SsrCache */ "a"].Default.removeAll(predicate);
 
 
 
 
 
+
+
+
+
+
+
  // GraphQL
 
 
 
 
 
+/***/ }),
+/* 29 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+
+// Below we want to use `hasOwnProperty` on an object that doesn't have
+// `Object.prototype` in its proto chain, so we must extract it here.
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+
+// Map from an enum object to a reverse map of its values to names
+var reverseMapCache = typeof WeakMap === 'function' ? new WeakMap() : new Map();
+
+// Computes the reverse mapping of the enum object: from value to name.
+// Flow Enum values are unique (enforced by the parser), so this is a
+// one to one mapping.
+function getReverseMap(enumObject) {
+  var reverseMap = reverseMapCache.get(enumObject);
+  if (reverseMap !== undefined) {
+    return reverseMap;
+  }
+  // We aren't using `Object.values` because that gets enumerable
+  // properties, and our properties aren't enumerable.
+  var newReverseMap = new Map();
+  Object.getOwnPropertyNames(enumObject).forEach(function (name) {
+    newReverseMap.set(enumObject[name], name);
+  });
+  reverseMapCache.set(enumObject, newReverseMap);
+  return newReverseMap;
+}
+
+var EnumPrototype = Object.freeze(
+  Object.defineProperties(Object.create(null), {
+    isValid: {
+      value: function (x) {
+        return getReverseMap(this).has(x);
+      },
+    },
+    cast: {
+      value: function (x) {
+        return this.isValid(x) ? x : undefined;
+      },
+    },
+    members: {
+      value: function () {
+        return getReverseMap(this).keys();
+      },
+    },
+    getName: {
+      value: function (value) {
+        return getReverseMap(this).get(value);
+      }
+    }
+  })
+);
+
+// `members` is an object mapping name to value.
+function Enum(members) {
+  var o = Object.create(EnumPrototype);
+  for (var k in members) {
+    if (hasOwnProperty.call(members, k)) {
+      // Create non-enumerable properties.
+      Object.defineProperty(o, k, {value: members[k]});
+    }
+  }
+  return Object.freeze(o);
+}
+
+// Mirrored enum (string enum with no member initializers).
+// Optimized implementation, taking advantage of the fact that
+// keys and values are identical.
+var EnumMirroredPrototype = Object.freeze(
+  Object.defineProperties(Object.create(null), {
+    isValid: {
+      value: function (x) {
+        if (typeof x === 'string') {
+          return hasOwnProperty.call(this, x);
+        }
+        return false;
+      },
+    },
+    cast: {
+      value: EnumPrototype.cast,
+    },
+    members: {
+      value: function () {
+        // We aren't using `Object.values` because that gets enumerable
+        // properties, and our properties aren't enumerable.
+        return Object.getOwnPropertyNames(this).values();
+      },
+    },
+    getName: {
+      value: function (value) {
+        return value;
+      }
+    }
+  })
+);
+
+// `members` is an array of names (which, are also the values).
+Enum.Mirrored = function EnumMirrored(members) {
+  var o = Object.create(EnumMirroredPrototype);
+  for (var i = 0, len = members.length; i < len; ++i) {
+    // Value is same as key. Also, non-enumerable.
+    Object.defineProperty(o, members[i], {value: members[i]});
+  }
+  return Object.freeze(o);
+};
+
+Object.freeze(Enum.Mirrored);
+
+module.exports = Object.freeze(Enum);
+
+
 /***/ })
 /******/ ]);