@khanacademy/wonder-blocks-data 3.1.2 → 5.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 = 20);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -93,12 +93,18 @@ module.exports = require("react");
 
 /***/ }),
 /* 1 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-stuff-core");
+
+/***/ }),
+/* 2 */
 /***/ (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__(10);
+/* 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__);
 
 
@@ -130,27 +136,28 @@ class GqlError extends _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0
 }
 
 /***/ }),
-/* 2 */
+/* 3 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-core");
 
 /***/ }),
-/* 3 */
+/* 4 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ResponseCache; });
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* 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___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _memory_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9);
-
+/* harmony import */ var _scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
 
 
+const DefaultScope = "default";
 /**
  * The default instance is stored here.
  * It's created below in the Default() static property.
  */
+
 let _default;
 /**
  * Implements the response cache.
@@ -159,10 +166,10 @@ let _default;
  */
 
 
-class ResponseCache {
+class SsrCache {
   static get Default() {
     if (!_default) {
-      _default = new ResponseCache();
+      _default = new SsrCache();
     }
 
     return _default;
@@ -174,31 +181,29 @@ class ResponseCache {
         throw new Error("Cannot initialize data response cache more than once");
       }
 
-      try {
-        this._hydrationCache = new _memory_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"](source);
-      } catch (e) {
-        throw new Error(`An error occurred trying to initialize the data response cache: ${e}`);
-      }
+      this._hydrationCache = new _scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* ScopedInMemoryCache */ "a"]({
+        // $FlowIgnore[incompatible-call]
+        [DefaultScope]: source
+      });
     };
 
-    this.cacheData = (handler, options, data) => this._setCacheEntry(handler, options, {
+    this.cacheData = (id, data, hydrate) => this._setCachedResponse(id, {
       data
-    });
+    }, hydrate);
 
-    this.cacheError = (handler, options, error) => {
+    this.cacheError = (id, error, hydrate) => {
       const errorMessage = typeof error === "string" ? error : error.message;
-      return this._setCacheEntry(handler, options, {
+      return this._setCachedResponse(id, {
         error: errorMessage
-      });
+      }, hydrate);
     };
 
-    this.getEntry = (handler, options) => {
+    this.getEntry = id => {
+      var _this$_ssrOnlyCache$g, _this$_ssrOnlyCache;
+
       // Get the cached entry for this value.
-      // If the handler wants WB Data to hydrate (i.e. handler.hydrate is
-      // true), we use our hydration cache. Otherwise, if we're server-side
-      // we use our SSR-only cache. Otherwise, there's no entry to return.
-      const cache = handler.hydrate ? this._hydrationCache : _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide() ? this._ssrOnlyCache : undefined;
-      const internalEntry = cache == null ? void 0 : cache.retrieve(handler, options); // If we are not server-side and we hydrated something, let's clear
+      // We first look in the ssr cache and then the hydration cache.
+      const internalEntry = (_this$_ssrOnlyCache$g = (_this$_ssrOnlyCache = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache.get(DefaultScope, id)) != null ? _this$_ssrOnlyCache$g : this._hydrationCache.get(DefaultScope, id); // If we are not server-side and we hydrated something, let's clear
       // that from the hydration cache to save memory.
 
       if (this._ssrOnlyCache == null && internalEntry != null) {
@@ -208,48 +213,71 @@ class ResponseCache {
         // that's not an expected use-case. If two different places use the
         // same handler and options (i.e. the same request), then the
         // handler should cater to that to ensure they share the result.
-        this._hydrationCache.remove(handler, options);
-      }
+        this._hydrationCache.purge(DefaultScope, id);
+      } // Getting the typing right between the in-memory cache and this
+      // is hard. Just telling flow it's OK.
+      // $FlowIgnore[incompatible-return]
+
 
       return internalEntry;
     };
 
-    this.remove = (handler, options) => {
-      var _this$_ssrOnlyCache$r, _this$_ssrOnlyCache;
+    this.remove = id => {
+      var _this$_ssrOnlyCache$p, _this$_ssrOnlyCache2;
 
       // NOTE(somewhatabstract): We could invoke removeAll with a predicate
       // to match the key of the entry we're removing, but that's an
       // inefficient way to remove a single item, so let's not do that.
       // Delete the entry from the appropriate cache.
-      return handler.hydrate ? this._hydrationCache.remove(handler, options) : (_this$_ssrOnlyCache$r = (_this$_ssrOnlyCache = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache.remove(handler, options)) != null ? _this$_ssrOnlyCache$r : false;
+      return this._hydrationCache.purge(DefaultScope, id) || ((_this$_ssrOnlyCache$p = (_this$_ssrOnlyCache2 = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache2.purge(DefaultScope, id)) != null ? _this$_ssrOnlyCache$p : false);
     };
 
-    this.removeAll = (handler, predicate) => {
-      var _this$_ssrOnlyCache$r2, _this$_ssrOnlyCache2;
+    this.removeAll = predicate => {
+      var _this$_ssrOnlyCache3;
 
-      // Apply the predicate to what we have in the appropriate cache.
-      return handler.hydrate ? this._hydrationCache.removeAll(handler, predicate) : (_this$_ssrOnlyCache$r2 = (_this$_ssrOnlyCache2 = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache2.removeAll(handler, predicate)) != null ? _this$_ssrOnlyCache$r2 : 0;
+      const realPredicate = predicate ? // We know what we're putting into the cache so let's assume it
+      // conforms.
+      // $FlowIgnore[incompatible-call]
+      (_, key, cachedEntry) => predicate(key, cachedEntry) : undefined; // Apply the predicate to what we have in our caches.
+
+      this._hydrationCache.purgeAll(realPredicate);
+
+      (_this$_ssrOnlyCache3 = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache3.purgeAll(realPredicate);
     };
 
     this.cloneHydratableData = () => {
+      var _cache$DefaultScope;
+
       // We return our hydration cache only.
-      return this._hydrationCache.cloneData();
+      const cache = this._hydrationCache.clone(); // If we're empty, we still want to return an object, so we default
+      // to an empty object.
+      // We only need the default scope out of our scoped in-memory cache.
+      // We know that it conforms to our expectations.
+      // $FlowIgnore[incompatible-return]
+
+
+      return (_cache$DefaultScope = cache[DefaultScope]) != null ? _cache$DefaultScope : {};
     };
 
-    this._ssrOnlyCache = _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide() ? ssrOnlyCache || new _memory_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"]() : undefined;
-    this._hydrationCache = hydrationCache || new _memory_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"]();
+    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"]();
   }
 
-  _setCacheEntry(handler, options, entry) {
+  _setCachedResponse(id, entry, hydrate) {
     const frozenEntry = Object.freeze(entry);
 
-    if (this._ssrOnlyCache != null) {
+    if (_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide()) {
       // We are server-side.
       // We need to store this value.
-      if (handler.hydrate) {
-        this._hydrationCache.store(handler, options, frozenEntry);
+      if (hydrate) {
+        this._hydrationCache.set(DefaultScope, id, frozenEntry);
       } else {
-        this._ssrOnlyCache.store(handler, options, frozenEntry);
+        var _this$_ssrOnlyCache4;
+
+        // Usually, when server-side, this cache will always be present.
+        // We do fake server-side in our doc example though, when it
+        // won't be.
+        (_this$_ssrOnlyCache4 = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache4.set(DefaultScope, id, frozenEntry);
       }
     }
 
@@ -265,7 +293,124 @@ class ResponseCache {
 }
 
 /***/ }),
-/* 4 */
+/* 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, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -273,8 +418,8 @@ class ResponseCache {
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return RequestTracker; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _response_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
-/* harmony import */ var _request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
+/* 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__(10);
 
 
 
@@ -312,48 +457,31 @@ class RequestTracker {
 
 
   constructor(responseCache = undefined) {
-    this._trackedHandlers = {};
     this._trackedRequests = {};
 
-    this.trackDataRequest = (handler, options) => {
-      const key = handler.getKey(options);
-      const type = handler.type;
-      /**
-       * Make sure we have stored the handler for use when fulfilling requests.
-       */
-
-      if (this._trackedHandlers[type] == null) {
-        this._trackedHandlers[type] = handler;
-        this._trackedRequests[type] = {};
-      }
+    this.trackDataRequest = (id, handler, hydrate) => {
       /**
        * If we don't already have this tracked, then let's track it.
        */
-
-
-      if (this._trackedRequests[type][key] == null) {
-        this._trackedRequests[type][key] = options;
+      if (this._trackedRequests[id] == null) {
+        this._trackedRequests[id] = {
+          handler,
+          hydrate
+        };
       }
     };
 
     this.reset = () => {
-      this._trackedHandlers = {};
       this._trackedRequests = {};
     };
 
     this.fulfillTrackedRequests = () => {
       const promises = [];
 
-      for (const handlerType of Object.keys(this._trackedHandlers)) {
-        const handler = this._trackedHandlers[handlerType]; // For each handler, we will perform the request fulfillments!
-
-        const requests = this._trackedRequests[handlerType];
+      for (const requestKey of Object.keys(this._trackedRequests)) {
+        const promise = this._requestFulfillment.fulfill(requestKey, this._trackedRequests[requestKey]);
 
-        for (const requestKey of Object.keys(requests)) {
-          const promise = this._requestFulfillment.fulfill(handler, requests[requestKey]);
-
-          promises.push(promise);
-        }
+        promises.push(promise);
       }
       /**
        * Clear out our tracked info.
@@ -382,7 +510,7 @@ class RequestTracker {
       return Promise.all(promises).then(() => this._responseCache.cloneHydratableData());
     };
 
-    this._responseCache = responseCache || _response_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* ResponseCache */ "a"].Default;
+    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);
   }
   /**
@@ -409,15 +537,15 @@ class RequestTracker {
    * Calling this method marks tracked requests as fulfilled; requests are
    * removed from the list of tracked requests by calling this method.
    *
-   * @returns {Promise<Cache>} A frozen cache of the data that was cached
-   * as a result of fulfilling the tracked requests.
+   * @returns {Promise<ResponseCache>} The promise of the data that was
+   * cached as a result of fulfilling the tracked requests.
    */
 
 
 }
 
 /***/ }),
-/* 5 */
+/* 7 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -426,158 +554,122 @@ class RequestTracker {
 
 
 /**
- * InterceptContext defines a map from handler type to interception methods.
+ * InterceptContext defines a map from request ID to interception methods.
  *
  * INTERNAL USE ONLY
  */
-const InterceptContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createContext"]({});
+const InterceptContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createContext"]([]);
 /* harmony default export */ __webpack_exports__["a"] = (InterceptContext);
 
 /***/ }),
-/* 6 */
+/* 8 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useData; });
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* 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_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
-/* harmony import */ var _components_intercept_context_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5);
-/* harmony import */ var _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(4);
-/* harmony import */ var _util_result_from_cache_entry_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(17);
-/* harmony import */ var _util_response_cache_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3);
+/* 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);
 
 
 
 
 
-
-
-const useData = (handler, options) => {
+/**
+ * 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 = (requestId, 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_response_cache_js__WEBPACK_IMPORTED_MODULE_6__[/* ResponseCache */ "a"].Default.getEntry(handler, options);
-  const [result, setResult] = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(cachedResult); // 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 = Object(react__WEBPACK_IMPORTED_MODULE_1__["useContext"])(_components_intercept_context_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"]);
-  const interceptor = interceptorMap[handler.type]; // If we have an interceptor, we need to replace the handler with one that
-  // uses the interceptor. This helper function generates a new handler.
-  // We need this before we track the request as we want the interceptor
-  // to also work for tracked requests to simplify testing the server-side
-  // request fulfillment.
-
-  const getMaybeInterceptedHandler = () => {
-    if (interceptor == null) {
-      return handler;
-    }
-
-    const fulfillRequestFn = options => {
-      var _interceptor$fulfillR;
-
-      return (_interceptor$fulfillR = interceptor.fulfillRequest(options)) != null ? _interceptor$fulfillR : handler.fulfillRequest(options);
-    };
-
-    return {
-      fulfillRequest: fulfillRequestFn,
-      getKey: options => handler.getKey(options),
-      type: handler.type,
-      hydrate: handler.hydrate
-    };
-  }; // We only track data requests when we are server-side and we don't
+  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"]);
 
-  const maybeTrack = Object(react__WEBPACK_IMPORTED_MODULE_1__["useContext"])(_util_request_tracking_js__WEBPACK_IMPORTED_MODULE_4__[/* TrackerContext */ "b"]);
-
-  if (result == null && _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide()) {
-    maybeTrack == null ? void 0 : maybeTrack(getMaybeInterceptedHandler(), options);
-  } // We need to update our request when the handler changes or the key
-  // to the options change, so we keep track of those.
-  // However, even if we are hydrating from cache, we still need to make the
-  // request at least once, so we do not initialize these references.
-
-
-  const handlerRef = Object(react__WEBPACK_IMPORTED_MODULE_1__["useRef"])();
-  const keyRef = Object(react__WEBPACK_IMPORTED_MODULE_1__["useRef"])();
-  const interceptorRef = Object(react__WEBPACK_IMPORTED_MODULE_1__["useRef"])(); // This effect will ensure that we fulfill the request as desired.
-
-  Object(react__WEBPACK_IMPORTED_MODULE_1__["useEffect"])(() => {
-    // If we are server-side, then just skip the effect. We track requests
-    // during SSR and fulfill them outside of the React render cycle.
-    // NOTE: This shouldn't happen since effects would not run on the server
-    // but let's be defensive - I think it makes the code clearer.
-
-    /* istanbul ignore next */
-    if (_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide()) {
-      return;
-    } // Update our refs to the current handler and key.
+  if (cachedResult == null && _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide()) {
+    maybeTrack == null ? void 0 : maybeTrack(requestId, handler, hydrate);
+  }
 
+  return cachedResult;
+};
 
-    handlerRef.current = handler;
-    keyRef.current = handler.getKey(options);
-    interceptorRef.current = interceptor; // If we're not hydrating a result, we want to make sure we set our
-    // result to null so that we're in the loading state.
+/***/ }),
+/* 9 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-    if (cachedResult == null) {
-      // Mark ourselves as loading.
-      setResult(null);
-    } // We aren't server-side, so let's make the request.
-    // The request handler is in control of whether that request actually
-    // happens or not.
+"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__(7);
 
 
-    let cancel = false;
-    _util_request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__[/* RequestFulfillment */ "a"].Default.fulfill(getMaybeInterceptedHandler(), options).then(updateEntry => {
-      if (cancel) {
-        return;
-      }
 
-      setResult(updateEntry);
-      return;
-    }).catch(e => {
-      if (cancel) {
-        return;
+/**
+ * Allow request handling to be intercepted.
+ *
+ * Hook to take a uniquely identified request handler and return a
+ * method that will support request interception from the InterceptRequest
+ * component.
+ *
+ * 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__["useMemo"](() => () => {
+    // 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;
       }
-      /**
-       * We should never get here as errors in fulfillment are part
-       * of the `then`, but if we do.
-       */
-      // eslint-disable-next-line no-console
 
+      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]
 
-      console.error(`Unexpected error occurred during data fulfillment: ${e}`);
-      setResult({
-        data: null,
-        error: typeof e === "string" ? e : e.message
-      });
-      return;
-    });
-    return () => {
-      cancel = true;
-    }; // - handler.getKey is a proxy for options
-    // - We don't want to trigger on cachedResult changing, we're
-    //   just using that as a flag for render state if the other things
-    //   trigger this effect.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [handler, handler.getKey(options), interceptor]);
-  return Object(_util_result_from_cache_entry_js__WEBPACK_IMPORTED_MODULE_5__[/* resultFromCacheEntry */ "a"])(result);
+    return interceptResponse != null ? interceptResponse : handler();
+  }, [handler, interceptors, requestId]);
+  return interceptedHandler;
 };
 
 /***/ }),
-/* 7 */
+/* 10 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return RequestFulfillment; });
-/* harmony import */ var _response_cache_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
+/* harmony import */ var _ssr_cache_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
 
 
 let _default;
@@ -594,23 +686,14 @@ class RequestFulfillment {
   constructor(responseCache = undefined) {
     this._requests = {};
 
-    this._getHandlerSubcache = handler => {
-      if (!this._requests[handler.type]) {
-        this._requests[handler.type] = {};
-      }
-
-      return this._requests[handler.type];
-    };
-
-    this.fulfill = (handler, options) => {
-      const handlerRequests = this._getHandlerSubcache(handler);
-
-      const key = handler.getKey(options);
+    this.fulfill = (id, {
+      handler,
+      hydrate = true
+    }) => {
       /**
        * If we have an inflight request, we'll provide that.
        */
-
-      const inflight = handlerRequests[key];
+      const inflight = this._requests[id];
 
       if (inflight) {
         return inflight;
@@ -626,43 +709,56 @@ class RequestFulfillment {
       } = this._responseCache;
 
       try {
-        const request = handler.fulfillRequest(options).then(data => {
-          delete handlerRequests[key];
+        const request = handler().then(data => {
+          delete this._requests[id];
+
+          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(handler, options, data);
+
+          return cacheData(id, data, hydrate);
         }).catch(error => {
-          delete handlerRequests[key];
+          delete this._requests[id];
           /**
            * Let's cache the error!
            *
            * NOTE: This only caches when we're server side.
            */
 
-          return cacheError(handler, options, error);
+          return cacheError(id, error, hydrate);
         });
-        handlerRequests[key] = request;
+        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(handler, options, e));
+        return Promise.resolve(cacheError(id, e, hydrate));
       }
     };
 
-    this._responseCache = responseCache || _response_cache_js__WEBPACK_IMPORTED_MODULE_0__[/* ResponseCache */ "a"].Default;
+    this._responseCache = responseCache || _ssr_cache_js__WEBPACK_IMPORTED_MODULE_0__[/* SsrCache */ "a"].Default;
   }
+  /**
+   * 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.
+   */
+
 
 }
 
 /***/ }),
-/* 8 */
+/* 11 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -673,211 +769,107 @@ class RequestFulfillment {
 const GqlRouterContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createContext"](null);
 
 /***/ }),
-/* 9 */
+/* 12 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return MemoryCache; });
-function deepClone(source) {
-  /**
-   * We want to deep clone the source cache to dodge mutations by external
-   * references. So we serialize the source cache to JSON and parse it
-   * back into a new object.
-   *
-   * NOTE: This doesn't work for get/set property accessors.
-   */
-  const serializedInitCache = JSON.stringify(source);
-  const cloneInitCache = JSON.parse(serializedInitCache);
-  return Object.freeze(cloneInitCache);
-}
-/**
- * INTERNAL USE ONLY
- *
- * Special case cache implementation for the memory cache.
- *
- * This is only used within our framework for SSR (see ./response-cache.js).
- */
-
-
-class MemoryCache {
-  constructor(source = null) {
-    this.store = (handler, options, entry) => {
-      const requestType = handler.type;
-      const frozenEntry = Object.freeze(entry); // Ensure we have a cache location for this handler type.
-
-      this._cache[requestType] = this._cache[requestType] || {}; // Cache the data.
-
-      const key = handler.getKey(options);
-      this._cache[requestType][key] = frozenEntry;
-    };
-
-    this.retrieve = (handler, options) => {
-      const requestType = handler.type; // Get the internal subcache for the handler.
-
-      const handlerCache = this._cache[requestType];
-
-      if (!handlerCache) {
-        return null;
-      } // Get the response.
-
-
-      const key = handler.getKey(options);
-      const internalEntry = handlerCache[key];
-
-      if (internalEntry == null) {
-        return null;
-      }
-
-      return internalEntry;
-    };
-
-    this.remove = (handler, options) => {
-      const requestType = handler.type; // NOTE(somewhatabstract): We could invoke removeAll with a predicate
-      // to match the key of the entry we're removing, but that's an
-      // inefficient way to remove a single item, so let's not do that.
-      // Get the internal subcache for the handler.
-
-      const handlerCache = this._cache[requestType];
-
-      if (!handlerCache) {
-        return false;
-      } // Get the entry.
-
-
-      const key = handler.getKey(options);
-      const internalEntry = handlerCache[key];
-
-      if (internalEntry == null) {
-        return false;
-      } // Delete the entry.
-
-
-      delete handlerCache[key];
-      return true;
-    };
-
-    this.removeAll = (handler, predicate) => {
-      const requestType = handler.type; // Get the internal subcache for the handler.
-
-      const handlerCache = this._cache[requestType];
-
-      if (!handlerCache) {
-        return 0;
-      }
-
-      let removedCount = 0;
+/* 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);
 
-      if (typeof predicate === "function") {
-        // Apply the predicate to what we have cached.
-        for (const [key, entry] of Object.entries(handlerCache)) {
-          if (predicate(key, entry)) {
-            removedCount++;
-            delete handlerCache[key];
-          }
-        }
-      } else {
-        // We're removing everything so delete the entire subcache.
-        removedCount = Object.keys(handlerCache).length;
-        delete this._cache[requestType];
-      }
 
-      return removedCount;
-    };
 
-    this.cloneData = () => {
-      try {
-        return deepClone(this._cache);
-      } catch (e) {
-        throw new Error(`An error occurred while trying to clone the cache: ${e}`);
-      }
-    };
 
-    this._cache = {};
+/**
+ * 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.
+ */
 
-    if (source != null) {
-      try {
-        /**
-         * Object.assign only performs a shallow clone.
-         * So we deep clone it and then assign the clone values to our
-         * internal cache.
-         */
-        const cloneInitCache = deepClone(source);
-        Object.assign(this._cache, cloneInitCache);
-      } catch (e) {
-        throw new Error(`An error occurred trying to initialize from a response cache snapshot: ${e}`);
-      }
-    }
+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();
   }
-  /**
-   * Indicate if this cache is being used or now.
-   *
-   * When the cache has entries, returns `true`; otherwise, returns `false`.
-   */
-
+};
+/**
+ * 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).
+ *
+ * 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.
+ */
 
-  get inUse() {
-    return Object.keys(this._cache).length > 0;
+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.
 
-/***/ }),
-/* 10 */
-/***/ (function(module, exports) {
 
-module.exports = require("@khanacademy/wonder-stuff-core");
+  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]
 
-/***/ }),
-/* 11 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
+  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.
 
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return RequestHandler; });
-/**
- * Base implementation for creating a request handler.
- *
- * Provides a base implementation of the `IRequestHandler` base class for
- * use with the Wonder Blocks Data framework.
- */
-class RequestHandler {
-  constructor(type, hydrate = true) {
-    this._type = type;
-    this._hydrate = !!hydrate;
-  }
+  if (currentValue == null && initialValue !== undefined) {
+    // Get the initial value.
+    const value = typeof initialValue === "function" ? initialValue() : initialValue; // Update the cache.
 
-  get type() {
-    return this._type;
-  }
-
-  get hydrate() {
-    return this._hydrate;
-  }
+    cacheValue(value); // Make sure we return this value as our current value.
 
-  getKey(options) {
-    try {
-      return options === undefined ? "undefined" : JSON.stringify(options);
-    } catch (e) {
-      throw new Error(`Failed to auto-generate key: ${e}`);
-    }
-  }
+    currentValue = value;
+  } // Now we have everything, let's return it.
 
-  fulfillRequest(options) {
-    throw new Error("Not implemented");
-  }
 
-}
+  return [currentValue, cacheValue];
+};
 
 /***/ }),
-/* 12 */
+/* 13 */
 /***/ (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__(2);
+/* 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_tracking_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
+/* harmony import */ var _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
 
 
 
@@ -899,13 +891,22 @@ class TrackData extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 }
 
 /***/ }),
-/* 13 */
+/* 14 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _hooks_use_data_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
+/* 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__(10);
+/* harmony import */ var _hooks_use_server_effect_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(8);
+/* harmony import */ var _hooks_use_request_interception_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9);
+/* harmony import */ var _util_result_from_cache_response_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(18);
+
+
+
+
 
 
 
@@ -914,68 +915,145 @@ class TrackData extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
  * requirements can be placed in a React application in a manner that will
  * support server-side rendering and efficient caching.
  */
-const Data = props => {
-  const data = Object(_hooks_use_data_js__WEBPACK_IMPORTED_MODULE_1__[/* useData */ "a"])(props.handler, props.options);
-  return props.children(data);
+const Data = ({
+  requestId,
+  handler,
+  children,
+  hydrate,
+  showOldDataWhileLoading,
+  alwaysRequestOnHydration
+}) => {
+  const interceptedHandler = Object(_hooks_use_request_interception_js__WEBPACK_IMPORTED_MODULE_4__[/* useRequestInterception */ "a"])(requestId, handler);
+  const hydrateResult = Object(_hooks_use_server_effect_js__WEBPACK_IMPORTED_MODULE_3__[/* useServerEffect */ "a"])(requestId, interceptedHandler, 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: interceptedHandler
+    }).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));
 };
 
 /* harmony default export */ __webpack_exports__["a"] = (Data);
 
 /***/ }),
-/* 14 */
+/* 15 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return InterceptData; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _intercept_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony import */ var _intercept_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7);
 
 
 
 /**
- * This component provides a mechanism to intercept the data requests for the
- * type of a given handler and provide alternative results. This is mostly
- * useful for testing.
+ * This component provides a mechanism to intercept data requests.
+ * This is for use in testing.
  *
  * This component is not recommended for use in production code as it
  * can prevent predictable functioning of the Wonder Blocks Data framework.
  * One possible side-effect is that inflight requests from the interceptor could
- * be picked up by `Data` component requests of the same handler type from
- * outside the children of this component.
+ * 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 handler type, 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.
  */
-class InterceptData extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  render() {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_intercept_context_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"].Consumer, null, value => {
-      const handlerType = this.props.handler.type;
-      const interceptor = { ...value[handlerType],
-        fulfillRequest: this.props.fulfillRequest
-      };
-      const newValue = { ...value,
-        [handlerType]: interceptor
-      };
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_intercept_context_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"].Provider, {
-        value: newValue
-      }, this.props.children);
-    });
-  }
+const InterceptRequests = ({
+  interceptor,
+  children
+}) => {
+  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: updatedInterceptors
+  }, children);
+};
 
-}
+/* harmony default export */ __webpack_exports__["a"] = (InterceptRequests);
 
 /***/ }),
-/* 15 */
+/* 16 */
 /***/ (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__(8);
+/* harmony import */ var _util_gql_router_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
 
 
 
@@ -1012,16 +1090,16 @@ const GqlRouter = ({
 };
 
 /***/ }),
-/* 16 */
+/* 17 */
 /***/ (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__(8);
-/* 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__(1);
+/* harmony import */ var _util_gql_router_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
+/* harmony import */ var _util_get_gql_data_from_response_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(19);
+/* harmony import */ var _util_gql_error_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
 
 
 
@@ -1032,6 +1110,10 @@ const GqlRouter = ({
  *
  * The fetch function will resolve null if the request was aborted, otherwise
  * it will resolve the data returned by the GraphQL server.
+ *
+ * Context is merged with the default context provided to the 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 = () => {
   // This hook only works if the `GqlRouter` has been used to setup context.
@@ -1053,12 +1135,23 @@ const useGql = () => {
   const gqlFetch = Object(react__WEBPACK_IMPORTED_MODULE_0__["useMemo"])(() => (operation, options = Object.freeze({})) => {
     const {
       variables,
-      context
-    } = options; // Invoke the fetch and extract the data.
+      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 fetch(operation, variables, { ...defaultContext,
-      ...context
-    }).then(_util_get_gql_data_from_response_js__WEBPACK_IMPORTED_MODULE_2__[/* getGqlDataFromResponse */ "a"], error => {
+      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
@@ -1076,15 +1169,15 @@ const useGql = () => {
 };
 
 /***/ }),
-/* 17 */
+/* 18 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return resultFromCacheEntry; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return resultFromCachedResponse; });
 /**
  * Turns a cache entry into a stateful result.
  */
-const resultFromCacheEntry = cacheEntry => {
+const resultFromCachedResponse = cacheEntry => {
   // No cache entry means we didn't load one yet.
   if (cacheEntry == null) {
     return {
@@ -1097,34 +1190,32 @@ const resultFromCacheEntry = cacheEntry => {
     error
   } = cacheEntry;
 
-  if (data != null) {
+  if (error != null) {
     return {
-      status: "success",
-      data
+      status: "error",
+      error
     };
   }
 
-  if (error == null) {
-    // We should never get here ever.
+  if (data != null) {
     return {
-      status: "error",
-      error: "Loaded result has invalid state where data and error are missing"
+      status: "success",
+      data
     };
   }
 
   return {
-    status: "error",
-    error
+    status: "aborted"
   };
 };
 
 /***/ }),
-/* 18 */
+/* 19 */
 /***/ (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__(1);
+/* harmony import */ var _gql_error_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 
 /**
  * Validate a GQL operation response and extract the data.
@@ -1187,7 +1278,7 @@ const getGqlDataFromResponse = async response => {
 };
 
 /***/ }),
-/* 19 */
+/* 20 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1197,40 +1288,48 @@ __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__(2);
+/* 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 _util_response_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
-/* harmony import */ var _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
-/* harmony import */ var _util_request_handler_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(11);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RequestHandler", function() { return _util_request_handler_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
+/* 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__(13);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TrackData", function() { return _components_track_data_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
 
-/* harmony import */ var _components_track_data_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(12);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TrackData", function() { return _components_track_data_js__WEBPACK_IMPORTED_MODULE_4__["a"]; });
+/* harmony import */ var _components_data_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(14);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Data", function() { return _components_data_js__WEBPACK_IMPORTED_MODULE_4__["a"]; });
 
-/* harmony import */ var _components_data_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(13);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Data", function() { return _components_data_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });
+/* harmony import */ var _components_intercept_requests_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(15);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InterceptRequests", function() { return _components_intercept_requests_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });
 
-/* harmony import */ var _components_intercept_data_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(14);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InterceptData", function() { return _components_intercept_data_js__WEBPACK_IMPORTED_MODULE_6__["a"]; });
+/* harmony import */ var _hooks_use_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_data_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(6);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useData", function() { return _hooks_use_data_js__WEBPACK_IMPORTED_MODULE_7__["a"]; });
+/* harmony import */ var _hooks_use_request_interception_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(9);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useRequestInterception", function() { return _hooks_use_request_interception_js__WEBPACK_IMPORTED_MODULE_7__["a"]; });
 
-/* harmony import */ var _components_gql_router_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(15);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlRouter", function() { return _components_gql_router_js__WEBPACK_IMPORTED_MODULE_8__["a"]; });
+/* harmony import */ var _hooks_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(12);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useSharedCache", function() { return _hooks_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_8__["b"]; });
 
-/* harmony import */ var _hooks_use_gql_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(16);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useGql", function() { return _hooks_use_gql_js__WEBPACK_IMPORTED_MODULE_9__["a"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "clearSharedCache", function() { return _hooks_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_8__["a"]; });
 
-/* harmony import */ var _util_gql_error_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(1);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlErrors", function() { return _util_gql_error_js__WEBPACK_IMPORTED_MODULE_10__["b"]; });
+/* harmony import */ var _util_scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(5);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScopedInMemoryCache", function() { return _util_scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_9__["a"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlError", function() { return _util_gql_error_js__WEBPACK_IMPORTED_MODULE_10__["a"]; });
+/* harmony import */ var _components_gql_router_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(16);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlRouter", function() { return _components_gql_router_js__WEBPACK_IMPORTED_MODULE_10__["a"]; });
 
+/* harmony import */ var _hooks_use_gql_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(17);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useGql", function() { return _hooks_use_gql_js__WEBPACK_IMPORTED_MODULE_11__["a"]; });
 
+/* harmony import */ var _util_gql_error_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(2);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlErrors", function() { return _util_gql_error_js__WEBPACK_IMPORTED_MODULE_12__["b"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlError", function() { return _util_gql_error_js__WEBPACK_IMPORTED_MODULE_12__["a"]; });
 
-const initializeCache = source => _util_response_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* ResponseCache */ "a"].Default.initialize(source);
+
+
+
+const initializeCache = source => _util_ssr_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* SsrCache */ "a"].Default.initialize(source);
 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"));
@@ -1245,8 +1344,10 @@ const hasUnfulfilledRequests = () => {
 
   return _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_2__[/* RequestTracker */ "a"].Default.hasUnfulfilledRequests;
 };
-const removeFromCache = (handler, options) => _util_response_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* ResponseCache */ "a"].Default.remove(handler, options);
-const removeAllFromCache = (handler, predicate) => _util_response_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* ResponseCache */ "a"].Default.removeAll(handler, predicate);
+const removeFromCache = id => _util_ssr_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* SsrCache */ "a"].Default.remove(id);
+const removeAllFromCache = predicate => _util_ssr_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* SsrCache */ "a"].Default.removeAll(predicate);
+
+