@khanacademy/wonder-blocks-data 6.0.1 → 8.0.0

package/dist/index.js

@@ -82,23 +82,17 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 28);
+/******/ 	return __webpack_require__(__webpack_require__.s = 35);
 /******/ })
 /************************************************************************/
 /******/ ([
 /* 0 */
-/***/ (function(module, exports) {
-
-module.exports = require("react");
-
-/***/ }),
-/* 1 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "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__ = __webpack_require__(7);
 /* harmony import */ var _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__);
 
 
@@ -126,6 +120,12 @@ const DataErrors = Object.freeze({
    */
   Network: "Network",
 
+  /**
+   * There was a problem due to the state of the system not matching the
+   * requested operation or input.
+   */
+  NotAllowed: "NotAllowed",
+
   /**
    * Response could not be parsed.
    */
@@ -157,20 +157,50 @@ class DataError extends _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_
 
 }
 
+/***/ }),
+/* 1 */
+/***/ (function(module, exports) {
+
+module.exports = require("react");
+
 /***/ }),
 /* 2 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return FetchPolicy; });
+// TODO(somewhatabstract, FEI-4172): Update eslint-plugin-flowtype when
+// they've fixed https://github.com/gajus/eslint-plugin-flowtype/issues/502
+
+/* eslint-disable no-undef */
+
+/**
+ * Defines the various fetch policies that can be applied to requests.
+ */
+const FetchPolicy = __webpack_require__(22).Mirrored(["CacheBeforeNetwork", "CacheAndNetwork", "CacheOnly", "NetworkOnly"]);
+/* eslint-enable no-undef */
+
+/**
+ * Define what can be cached.
+ *
+ * We disallow functions and undefined as undefined represents a cache miss
+ * and functions are not allowed.
+ */
+
+/***/ }),
+/* 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__, "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__(6);
+/* harmony import */ var _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(7);
 /* harmony import */ var _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__);
 
 
@@ -215,7 +245,100 @@ class GqlError extends _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0
 }
 
 /***/ }),
-/* 4 */
+/* 5 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return purgeSharedCache; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return useSharedCache; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* 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__(0);
+/* harmony import */ var _util_scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(11);
+
+
+
+
+/**
+ * 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"]();
+/**
+ * Purge the in-memory cache or a single scope within it.
+ */
+
+const purgeSharedCache = (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.
+ *
+ * @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 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);
+  }
+
+  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;
+
+    if (value != null) {
+      // Update the cache.
+      cacheValue(value); // Make sure we return this value as our current value.
+
+      currentValue = value;
+    }
+  } // Now we have everything, let's return it.
+
+
+  return [currentValue, cacheValue];
+};
+
+/***/ }),
+/* 6 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -244,17 +367,32 @@ const Status = Object.freeze({
 });
 
 /***/ }),
-/* 5 */
+/* 7 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-stuff-core");
+
+/***/ }),
+/* 8 */
 /***/ (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__(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 _serializable_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(12);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return TrackerContext; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return RequestTracker; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* 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__(9);
+/* harmony import */ var _request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(10);
 
 
-const DefaultScope = "default";
+
+
+/**
+ * Used to inject our tracking function into the render framework.
+ *
+ * INTERNAL USE ONLY
+ */
+const TrackerContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createContext"](null);
 /**
  * The default instance is stored here.
  * It's created below in the Default() static property.
@@ -262,252 +400,86 @@ const DefaultScope = "default";
 
 let _default;
 /**
- * Implements the response cache.
+ * Implements request tracking and fulfillment.
  *
  * INTERNAL USE ONLY
  */
 
 
-class SsrCache {
+class RequestTracker {
   static get Default() {
     if (!_default) {
-      _default = new SsrCache();
+      _default = new RequestTracker();
     }
 
     return _default;
   }
+  /**
+   * These are the caches for tracked requests, their handlers, and responses.
+   */
 
-  constructor(hydrationCache = null, ssrOnlyCache = null) {
-    this.initialize = source => {
-      if (this._hydrationCache.inUse) {
-        throw new Error("Cannot initialize data response cache more than once");
-      }
-
-      this._hydrationCache = new _serializable_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* SerializableInMemoryCache */ "a"]({
-        // $FlowIgnore[incompatible-call]
-        [DefaultScope]: source
-      });
-    };
-
-    this.cacheData = (id, data, hydrate) => this._setCachedResponse(id, {
-      data
-    }, hydrate);
-
-    this.cacheError = (id, error, hydrate) => {
-      const errorMessage = typeof error === "string" ? error : error.message;
-      return this._setCachedResponse(id, {
-        error: errorMessage
-      }, hydrate);
-    };
-
-    this.getEntry = id => {
-      var _this$_ssrOnlyCache$g, _this$_ssrOnlyCache;
-
-      // Get the cached entry for this value.
-      // 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) {
-        // We now delete this from our hydration cache as we don't need it.
-        // This does mean that if another handler of the same type but
-        // without some sort of linked cache won't get the value, but
-        // that's not an expected use-case. If two different places use the
-        // same handler and options (i.e. the same request), then the
-        // handler should cater to that to ensure they share the result.
-        this._hydrationCache.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]
 
+  constructor(responseCache = undefined) {
+    this._trackedRequests = {};
 
-      return internalEntry;
+    this.trackDataRequest = (id, handler, hydrate) => {
+      /**
+       * If we don't already have this tracked, then let's track it.
+       */
+      if (this._trackedRequests[id] == null) {
+        this._trackedRequests[id] = {
+          handler,
+          hydrate
+        };
+      }
     };
 
-    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 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.reset = () => {
+      this._trackedRequests = {};
     };
 
-    this.removeAll = predicate => {
-      var _this$_ssrOnlyCache3;
+    this.fulfillTrackedRequests = () => {
+      const promises = [];
+      const {
+        cacheData,
+        cacheError
+      } = this._responseCache;
 
-      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.
+      for (const requestKey of Object.keys(this._trackedRequests)) {
+        const options = this._trackedRequests[requestKey];
 
-      this._hydrationCache.purgeAll(realPredicate);
+        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;
 
-      (_this$_ssrOnlyCache3 = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache3.purgeAll(realPredicate);
-    };
-
-    this.cloneHydratableData = () => {
-      var _cache$DefaultScope;
-
-      // We return our hydration cache only.
-      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 _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) {
-    const frozenEntry = Object.freeze(entry);
-
-    if (_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide()) {
-      // We are server-side.
-      // We need to store this value.
-      if (hydrate) {
-        this._hydrationCache.set(DefaultScope, id, frozenEntry);
-      } else {
-        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);
-      }
-    }
-
-    return frozenEntry;
-  }
-  /**
-   * Initialize the cache from a given cache state.
-   *
-   * This can only be called if the cache is not already in use.
-   */
-
-
-}
-
-/***/ }),
-/* 6 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-stuff-core");
-
-/***/ }),
-/* 7 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return TrackerContext; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return RequestTracker; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _ssr_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
-/* harmony import */ var _request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(10);
-
-
-
-
-/**
- * Used to inject our tracking function into the render framework.
- *
- * INTERNAL USE ONLY
- */
-const TrackerContext = new react__WEBPACK_IMPORTED_MODULE_0__["createContext"](null);
-/**
- * The default instance is stored here.
- * It's created below in the Default() static property.
- */
-
-let _default;
-/**
- * Implements request tracking and fulfillment.
- *
- * INTERNAL USE ONLY
- */
-
-
-class RequestTracker {
-  static get Default() {
-    if (!_default) {
-      _default = new RequestTracker();
-    }
-
-    return _default;
-  }
-  /**
-   * These are the caches for tracked requests, their handlers, and responses.
-   */
-
-
-  constructor(responseCache = undefined) {
-    this._trackedRequests = {};
-
-    this.trackDataRequest = (id, handler, hydrate) => {
-      /**
-       * If we don't already have this tracked, then let's track it.
-       */
-      if (this._trackedRequests[id] == null) {
-        this._trackedRequests[id] = {
-          handler,
-          hydrate
-        };
-      }
-    };
-
-    this.reset = () => {
-      this._trackedRequests = {};
-    };
-
-    this.fulfillTrackedRequests = () => {
-      const promises = [];
-      const {
-        cacheData,
-        cacheError
-      } = this._responseCache;
-
-      for (const requestKey of Object.keys(this._trackedRequests)) {
-        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.
+              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;
@@ -579,105 +551,247 @@ class RequestTracker {
 }
 
 /***/ }),
-/* 8 */
+/* 9 */
 /***/ (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);
-
-
+/* 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 _serializable_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(13);
 
 
+const DefaultScope = "default";
 /**
- * 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.
+ * The default instance is stored here.
+ * It's created below in the Default() static property.
  */
 
-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();
-  }
-};
+let _default;
 /**
- * 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.
+ * Implements the response cache.
  *
- * 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.
+ * INTERNAL USE ONLY
  */
 
-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);
-  }
-
-  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.
 
+class SsrCache {
+  static get Default() {
+    if (!_default) {
+      _default = new SsrCache();
+    }
 
-  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]
+    return _default;
+  }
 
-  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.
+  constructor(hydrationCache = null, ssrOnlyCache = null) {
+    this.initialize = source => {
+      if (this._hydrationCache.inUse) {
+        throw new Error("Cannot initialize data response cache more than once");
+      }
 
-  if (currentValue == null && initialValue !== undefined) {
-    // Get the initial value.
-    const value = typeof initialValue === "function" ? initialValue() : initialValue;
+      this._hydrationCache = new _serializable_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* SerializableInMemoryCache */ "a"]({
+        // $FlowIgnore[incompatible-call]
+        [DefaultScope]: source
+      });
+    };
 
-    if (value != null) {
-      // Update the cache.
-      cacheValue(value); // Make sure we return this value as our current value.
+    this.cacheData = (id, data, hydrate) => this._setCachedResponse(id, {
+      data
+    }, hydrate);
 
-      currentValue = value;
-    }
-  } // Now we have everything, let's return it.
+    this.cacheError = (id, error, hydrate) => {
+      const errorMessage = typeof error === "string" ? error : error.message;
+      return this._setCachedResponse(id, {
+        error: errorMessage
+      }, hydrate);
+    };
 
+    this.getEntry = id => {
+      var _this$_ssrOnlyCache$g, _this$_ssrOnlyCache;
 
-  return [currentValue, cacheValue];
-};
+      // Get the cached entry for this value.
+      // 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) {
+        // We now delete this from our hydration cache as we don't need it.
+        // This does mean that if another handler of the same type but
+        // without some sort of linked cache won't get the value, but
+        // that's not an expected use-case. If two different places use the
+        // same handler and options (i.e. the same request), then the
+        // handler should cater to that to ensure they share the result.
+        this._hydrationCache.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.purgeData = predicate => {
+      var _this$_ssrOnlyCache2;
+
+      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$_ssrOnlyCache2 = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache2.purgeAll(realPredicate);
+    };
+
+    this.cloneHydratableData = () => {
+      var _cache$DefaultScope;
+
+      // We return our hydration cache only.
+      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 _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) {
+    const frozenEntry = Object.freeze(entry);
+
+    if (_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide()) {
+      // We are server-side.
+      // We need to store this value.
+      if (hydrate) {
+        this._hydrationCache.set(DefaultScope, id, frozenEntry);
+      } else {
+        var _this$_ssrOnlyCache3;
+
+        // 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$_ssrOnlyCache3 = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache3.set(DefaultScope, id, frozenEntry);
+      }
+    }
+
+    return frozenEntry;
+  }
+  /**
+   * Initialize the cache from a given cache state.
+   *
+   * This can only be called if the cache is not already in use.
+   */
+
+
+}
 
 /***/ }),
-/* 9 */
+/* 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__(0);
+
+
+let _default;
+/**
+ * This fulfills a request, making sure that in-flight requests are shared.
+ */
+
+
+class RequestFulfillment {
+  constructor() {
+    this._requests = {};
+
+    this.fulfill = (id, {
+      handler,
+      hydrate = true
+    }) => {
+      /**
+       * If we have an inflight request, we'll provide that.
+       */
+      const inflight = this._requests[id];
+
+      if (inflight) {
+        return inflight;
+      }
+      /**
+       * We don't have an inflight request, so let's set one up.
+       */
+
+
+      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"
+          };
+        }
+
+        return {
+          status: "error",
+          error: actualError
+        };
+      }).finally(() => {
+        delete this._requests[id];
+      }); // Store the request in our cache.
+
+      this._requests[id] = request;
+      return request;
+    };
+
+    this.abort = id => {
+      // TODO(somewhatabstract, FEI-4276): Add first class abort
+      // support to the handler API.
+      // For now, we will just clear the request out of the list.
+      // When abort is implemented, the `finally` in the `fulfill` method
+      // would handle the deletion.
+      delete this._requests[id];
+    };
+
+    this.abortAll = () => {
+      Object.keys(this._requests).forEach(id => this.abort(id));
+    };
+  }
+
+  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 ScopedInMemoryCache; });
-/* harmony import */ var _data_error_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var _data_error_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 
 
 /**
@@ -796,109 +910,32 @@ class ScopedInMemoryCache {
 }
 
 /***/ }),
-/* 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, {
-      handler,
-      hydrate = true
-    }) => {
-      /**
-       * If we have an inflight request, we'll provide that.
-       */
-      const inflight = this._requests[id];
-
-      if (inflight) {
-        return inflight;
-      }
-      /**
-       * We don't have an inflight request, so let's set one up.
-       */
-
-
-      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"
-          };
-        }
-
-        return {
-          status: "error",
-          error: actualError
-        };
-      }).finally(() => {
-        delete this._requests[id];
-      }); // Store the request in our cache.
-
-      this._requests[id] = request;
-      return request;
-    };
-  }
-
-  static get Default() {
-    if (!_default) {
-      _default = new RequestFulfillment();
-    }
-
-    return _default;
-  }
-
-}
-
-/***/ }),
-/* 11 */
+/* 12 */
 /***/ (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__ = __webpack_require__(1);
 /* 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);
+/* harmony import */ var _use_server_effect_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(16);
+/* harmony import */ var _use_shared_cache_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
+/* harmony import */ var _use_cached_effect_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(17);
+/* harmony import */ var _util_types_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
 
 
 
+ // TODO(somewhatabstract, FEI-4174): Update eslint-plugin-import when they
+// have fixed:
+// https://github.com/import-js/eslint-plugin-import/issues/2073
+// eslint-disable-next-line import/named
 
 
 
 /**
  * Policies to define how a hydratable effect should behave client-side.
  */
-const WhenClientSide = __webpack_require__(29).Mirrored(["DoNotHydrate", "ExecuteWhenNoResult", "ExecuteWhenNoSuccessResult", "AlwaysExecute"]);
+const WhenClientSide = __webpack_require__(22).Mirrored(["DoNotHydrate", "ExecuteWhenNoResult", "ExecuteWhenNoSuccessResult", "AlwaysExecute"]);
 const DefaultScope = "useHydratableEffect";
 /**
  * Hook to execute an async operation on server and client.
@@ -922,10 +959,11 @@ const useHydratableEffect = (requestId, handler, options = {}) => {
   // 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 serverResult = Object(_use_server_effect_js__WEBPACK_IMPORTED_MODULE_1__[/* useServerEffect */ "a"])(requestId, handler, {
+    // Only hydrate if our behavior isn't telling us not to.
+    hydrate: clientBehavior !== WhenClientSide.DoNotHydrate,
+    skip
+  });
   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.
@@ -965,15 +1003,17 @@ const useHydratableEffect = (requestId, handler, options = {}) => {
   }, [serverResult]); // 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
+  Object(_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_2__[/* 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, {
+  const [clientResult] = Object(_use_cached_effect_js__WEBPACK_IMPORTED_MODULE_3__[/* useCachedEffect */ "a"])(requestId, handler, {
     skip,
     onResultChanged,
     retainResultOnChange,
-    scope
+    scope,
+    // Be explicit about our fetch policy for clarity.
+    fetchPolicy: _util_types_js__WEBPACK_IMPORTED_MODULE_4__[/* FetchPolicy */ "a"].CacheBeforeNetwork
   }); // 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
@@ -983,15 +1023,15 @@ const useHydratableEffect = (requestId, handler, options = {}) => {
 };
 
 /***/ }),
-/* 12 */
+/* 13 */
 /***/ (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__ = __webpack_require__(7);
 /* 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);
+/* harmony import */ var _data_error_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
+/* harmony import */ var _scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(11);
 
 
 
@@ -1033,11 +1073,11 @@ class SerializableInMemoryCache extends _scoped_in_memory_cache_js__WEBPACK_IMPO
 }
 
 /***/ }),
-/* 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__ = __webpack_require__(1);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 
 
@@ -1050,21 +1090,49 @@ const InterceptContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["create
 /* harmony default export */ __webpack_exports__["a"] = (InterceptContext);
 
 /***/ }),
-/* 14 */
+/* 15 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "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__(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);
-
-
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return initializeHydrationCache; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return purgeHydrationCache; });
+/* harmony import */ var _ssr_cache_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9);
+
+
+/**
+ * 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 initializeHydrationCache = source => _ssr_cache_js__WEBPACK_IMPORTED_MODULE_0__[/* SsrCache */ "a"].Default.initialize(source);
+/**
+ * Purge 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 purged.
+ */
+
+const purgeHydrationCache = predicate => _ssr_cache_js__WEBPACK_IMPORTED_MODULE_0__[/* SsrCache */ "a"].Default.purgeData(predicate);
+
+/***/ }),
+/* 16 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"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__(1);
+/* 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__(8);
+/* harmony import */ var _util_ssr_cache_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9);
+/* harmony import */ var _util_result_from_cache_response_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(32);
+/* harmony import */ var _use_request_interception_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(19);
+
+
 
 
 
@@ -1085,22 +1153,26 @@ const InterceptContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["create
  *
  * The asynchronous action is never invoked on the client-side.
  */
-const useServerEffect = (requestId, handler, hydrate = true) => {
-  // Plug in to the request interception framework for code that wants
+const useServerEffect = (requestId, handler, options = {}) => {
+  const {
+    hydrate = true,
+    skip = false
+  } = 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); // 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 cachedResult = _util_ssr_cache_js__WEBPACK_IMPORTED_MODULE_3__[/* SsrCache */ "a"].Default.getEntry(requestId); // We only track data requests when we are server-side, we are not skipping
+  // the request, 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()) {
+  if (!skip && 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.
 
@@ -1109,24 +1181,32 @@ const useServerEffect = (requestId, handler, hydrate = true) => {
 };
 
 /***/ }),
-/* 15 */
+/* 17 */
 /***/ (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__ = __webpack_require__(1);
 /* 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_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);
+/* harmony import */ var _util_data_error_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(0);
+/* harmony import */ var _util_request_fulfillment_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(10);
+/* harmony import */ var _util_status_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6);
+/* harmony import */ var _use_shared_cache_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5);
+/* harmony import */ var _use_request_interception_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(19);
+/* harmony import */ var _util_types_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(2);
+
+
 
 
 
 
 
+// TODO(somewhatabstract, FEI-4174): Update eslint-plugin-import when they
+// have fixed:
+// https://github.com/import-js/eslint-plugin-import/issues/2073
+// eslint-disable-next-line import/named
 
 const DefaultScope = "useCachedEffect";
 /**
@@ -1147,7 +1227,10 @@ const DefaultScope = "useCachedEffect";
  */
 
 const useCachedEffect = (requestId, handler, options = {}) => {
+  var _ref;
+
   const {
+    fetchPolicy = _util_types_js__WEBPACK_IMPORTED_MODULE_7__[/* FetchPolicy */ "a"].CacheBeforeNetwork,
     skip: hardSkip = false,
     retainResultOnChange = false,
     onResultChanged,
@@ -1155,124 +1238,263 @@ const useCachedEffect = (requestId, handler, options = {}) => {
   } = 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,
+  const interceptedHandler = Object(_use_request_interception_js__WEBPACK_IMPORTED_MODULE_6__[/* 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
+  const [mostRecentResult, setMostRecentResult] = Object(_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_5__[/* 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;
+  );
+  const forceUpdate = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__["useForceUpdate"])(); // For the NetworkOnly fetch policy, we ignore the cached value.
+  // So we need somewhere else to store the network value.
+
+  const networkResultRef = react__WEBPACK_IMPORTED_MODULE_0__["useRef"](); // Set up the function that will do the fetching.
+
+  const currentRequestRef = react__WEBPACK_IMPORTED_MODULE_0__["useRef"]();
+  const fetchRequest = react__WEBPACK_IMPORTED_MODULE_0__["useMemo"](() => {
+    var _currentRequestRef$cu;
+
+    // We aren't using useCallback here because we need to make sure that
+    // if we are rememo-izing, we cancel any inflight request for the old
+    // callback.
+    (_currentRequestRef$cu = currentRequestRef.current) == null ? void 0 : _currentRequestRef$cu.cancel();
+    currentRequestRef.current = null;
+    networkResultRef.current = null;
+
+    const fetchFn = () => {
+      var _currentRequestRef$cu2, _currentRequestRef$cu3;
+
+      if (fetchPolicy === _util_types_js__WEBPACK_IMPORTED_MODULE_7__[/* FetchPolicy */ "a"].CacheOnly) {
+        throw new _util_data_error_js__WEBPACK_IMPORTED_MODULE_2__[/* DataError */ "a"]("Cannot fetch with CacheOnly policy", _util_data_error_js__WEBPACK_IMPORTED_MODULE_2__[/* DataErrors */ "b"].NotAllowed);
+      } // We use our request fulfillment here so that in-flight
+      // requests are shared. In order to ensure that we don't share
+      // in-flight requests for different scopes, we add the scope to the
+      // requestId.
+      // We do this as a courtesy to simplify usage in sandboxed
+      // uses like storybook where we want each story to perform their
+      // own requests from scratch and not share inflight requests across
+      // stories.
+      // Since this only occurs here, nothing else will care about this
+      // change except the request tracking.
+
+
+      const request = _util_request_fulfillment_js__WEBPACK_IMPORTED_MODULE_3__[/* RequestFulfillment */ "a"].Default.fulfill(`${requestId}|${scope}`, {
+        handler: interceptedHandler
+      });
+
+      if (request === ((_currentRequestRef$cu2 = currentRequestRef.current) == null ? void 0 : _currentRequestRef$cu2.request)) {
+        // The request inflight is the same, so do nothing.
+        // NOTE: Perhaps if invoked via a refetch, we will want to
+        // override this behavior and force a new request?
+        return;
+      } // Clear the last network result.
+
+
+      networkResultRef.current = null; // Cancel the previous request.
+
+      (_currentRequestRef$cu3 = currentRequestRef.current) == null ? void 0 : _currentRequestRef$cu3.cancel(); // TODO(somewhatabstract, FEI-4276):
+      // Until our RequestFulfillment API supports cancelling/aborting, we
+      // will have to do it.
+
+      let cancel = false; // NOTE: Our request fulfillment handles the error cases here.
+      // Catching shouldn't serve a purpose.
+      // eslint-disable-next-line promise/catch-or-return
+
+      request.then(result => {
+        currentRequestRef.current = null;
+
+        if (cancel) {
+          // We don't modify our result if the request was cancelled
+          // as it means that this hook no longer cares about that old
+          // request.
+          return;
+        } // Now we need to update the cache and notify or force a rerender.
+
+
+        setMostRecentResult(result);
+        networkResultRef.current = result;
+
+        if (onResultChanged != null) {
+          // If we have a callback, call it to let our caller know we
+          // got a result.
+          onResultChanged(result);
+        } else {
+          // If there's no callback, and this is using cache in some
+          // capacity, just force a rerender.
+          forceUpdate();
+        }
+
+        return; // Shut up eslint always-return rule.
+      });
+      currentRequestRef.current = {
+        requestId,
+        request,
+
+        cancel() {
+          cancel = true;
+          _util_request_fulfillment_js__WEBPACK_IMPORTED_MODULE_3__[/* RequestFulfillment */ "a"].Default.abort(requestId);
+        }
+
+      };
+    }; // Now we can return the new fetch function.
+
+
+    return fetchFn; // We deliberately ignore the handler here because we want folks to use
+    // interceptor functions inline in props for simplicity. This is OK
+    // since changing the handler without changing the requestId doesn't
+    // really make sense - the same requestId should be handled the same as
+    // each other.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [requestId, onResultChanged, forceUpdate, setMostRecentResult, fetchPolicy]); // We need to trigger a re-render when the request ID changes as that
+  // indicates its a different request.
+
+  const requestIdRef = react__WEBPACK_IMPORTED_MODULE_0__["useRef"](requestId); // Calculate if we want to fetch the result or not.
+  // If this is true, we will do a new fetch, cancelling the previous fetch
+  // if there is one inflight.
+
+  const shouldFetch = react__WEBPACK_IMPORTED_MODULE_0__["useMemo"](() => {
+    if (hardSkip) {
+      // We don't fetch if we've been told to hard skip.
+      return false;
     }
 
-    return false;
-  }, [requestId, previousRequestId, mostRecentResult]); // So now we make sure the client-side request happens per our various
-  // options.
+    switch (fetchPolicy) {
+      case _util_types_js__WEBPACK_IMPORTED_MODULE_7__[/* FetchPolicy */ "a"].CacheOnly:
+        // Don't want to do a network request if we're only
+        // interested in the cache.
+        return false;
+
+      case _util_types_js__WEBPACK_IMPORTED_MODULE_7__[/* FetchPolicy */ "a"].CacheBeforeNetwork:
+        // If we don't have a cached value or this is a new requestId,
+        // then we need to fetch.
+        return mostRecentResult == null || requestId !== requestIdRef.current;
 
+      case _util_types_js__WEBPACK_IMPORTED_MODULE_7__[/* FetchPolicy */ "a"].CacheAndNetwork:
+      case _util_types_js__WEBPACK_IMPORTED_MODULE_7__[/* FetchPolicy */ "a"].NetworkOnly:
+        // We don't care about the cache. If we don't have a network
+        // result, then we need to fetch one.
+        return networkResultRef.current == null;
+    }
+  }, [requestId, mostRecentResult, fetchPolicy, hardSkip]); // Let's make sure our ref is set to the most recent requestId.
+
+  requestIdRef.current = requestId;
   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) {
+    if (!shouldFetch) {
       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.
-    });
+    fetchRequest();
     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
+      var _currentRequestRef$cu4;
+
+      (_currentRequestRef$cu4 = currentRequestRef.current) == null ? void 0 : _currentRequestRef$cu4.cancel();
+      currentRequestRef.current = null;
+    };
+  }, [shouldFetch, fetchRequest]); // 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
+  const lastResultAgnosticOfIdRef = react__WEBPACK_IMPORTED_MODULE_0__["useRef"](_util_status_js__WEBPACK_IMPORTED_MODULE_4__[/* Status */ "a"].loading());
+  const loadingResult = retainResultOnChange ? lastResultAgnosticOfIdRef.current : _util_status_js__WEBPACK_IMPORTED_MODULE_4__[/* 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;
+  const result = (_ref = fetchPolicy === _util_types_js__WEBPACK_IMPORTED_MODULE_7__[/* FetchPolicy */ "a"].NetworkOnly ? networkResultRef.current : mostRecentResult) != null ? _ref : loadingResult;
+  lastResultAgnosticOfIdRef.current = result; // We return the result and a function for triggering a refetch.
+
+  return [result, fetchRequest];
 };
 
 /***/ }),
-/* 16 */
+/* 18 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* unused harmony export DocumentTypes */
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return graphQLDocumentNodeParser; });
+/* harmony import */ var _data_error_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+
+const DocumentTypes = Object.freeze({
+  query: "query",
+  mutation: "mutation"
+});
+const cache = new Map();
+/**
+ * Parse a GraphQL document node to determine some info about it.
+ *
+ * This is based on:
+ * https://github.com/apollographql/react-apollo/blob/3bc993b2ea91704bd6a2667f42d1940656c071ff/src/parser.ts
+ */
+
+function graphQLDocumentNodeParser(document) {
+  var _definition$name;
+
+  const cached = cache.get(document);
+
+  if (cached) {
+    return cached;
+  }
+  /**
+   * Saftey check for proper usage.
+   */
+
+
+  if (!(document != null && document.kind)) {
+    if (true) {
+      throw new _data_error_js__WEBPACK_IMPORTED_MODULE_0__[/* DataError */ "a"]("Bad DocumentNode", _data_error_js__WEBPACK_IMPORTED_MODULE_0__[/* DataErrors */ "b"].InvalidInput);
+    } else {}
+  }
+
+  const fragments = document.definitions.filter(x => x.kind === "FragmentDefinition");
+  const queries = document.definitions.filter(x => // $FlowIgnore[prop-missing]
+  x.kind === "OperationDefinition" && x.operation === "query");
+  const mutations = document.definitions.filter(x => // $FlowIgnore[prop-missing]
+  x.kind === "OperationDefinition" && x.operation === "mutation");
+  const subscriptions = document.definitions.filter(x => // $FlowIgnore[prop-missing]
+  x.kind === "OperationDefinition" && x.operation === "subscription");
+
+  if (fragments.length && !queries.length && !mutations.length) {
+    if (true) {
+      throw new _data_error_js__WEBPACK_IMPORTED_MODULE_0__[/* DataError */ "a"]("Fragment only", _data_error_js__WEBPACK_IMPORTED_MODULE_0__[/* DataErrors */ "b"].InvalidInput);
+    } else {}
+  }
+
+  if (subscriptions.length) {
+    if (true) {
+      throw new _data_error_js__WEBPACK_IMPORTED_MODULE_0__[/* DataError */ "a"]("No subscriptions", _data_error_js__WEBPACK_IMPORTED_MODULE_0__[/* DataErrors */ "b"].InvalidInput);
+    } else {}
+  }
+
+  if (queries.length + mutations.length > 1) {
+    if (true) {
+      throw new _data_error_js__WEBPACK_IMPORTED_MODULE_0__[/* DataError */ "a"]("Too many ops", _data_error_js__WEBPACK_IMPORTED_MODULE_0__[/* DataErrors */ "b"].InvalidInput);
+    } else {}
+  }
+
+  const type = queries.length ? DocumentTypes.query : DocumentTypes.mutation;
+  const definitions = queries.length ? queries : mutations;
+  const definition = definitions[0];
+  const variables = definition.variableDefinitions || []; // fallback to using data if no name
+
+  const name = ((_definition$name = definition.name) == null ? void 0 : _definition$name.kind) === "Name" ? definition.name.value : "data";
+  const payload = {
+    name,
+    type,
+    variables
+  };
+  cache.set(document, payload);
+  return payload;
+}
+
+/***/ }),
+/* 19 */
 /***/ (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__ = __webpack_require__(1);
 /* 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);
+/* harmony import */ var _components_intercept_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14);
 
 
 
@@ -1310,67 +1532,289 @@ const useRequestInterception = (requestId, handler) => {
     // as our handler, so how can flow know? Let's just suppress that.
     // $FlowFixMe[incompatible-return]
 
-    return interceptResponse != null ? interceptResponse : handler();
-  }, [handler, interceptors, requestId]);
-  return interceptedHandler;
+    return interceptResponse != null ? interceptResponse : handler();
+  }, [handler, interceptors, requestId]);
+  return interceptedHandler;
+};
+
+/***/ }),
+/* 20 */
+/***/ (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__(1);
+/* 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);
+
+/***/ }),
+/* 21 */
+/***/ (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 acc;
+  }, { ...defaultContext
+  });
+};
+
+/***/ }),
+/* 22 */
+/***/ (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);
+
+
+/***/ }),
+/* 23 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return fetchTrackedRequests; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return hasTrackedRequestsToBeFetched; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return abortInflightRequests; });
+/* 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 _request_tracking_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
+/* harmony import */ var _request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(10);
+/* harmony import */ var _data_error_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(0);
+
+
+
+
+
+const SSRCheck = () => {
+  if (_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide()) {
+    return null;
+  }
+
+  if (true) {
+    return new _data_error_js__WEBPACK_IMPORTED_MODULE_3__[/* DataError */ "a"]("No CSR tracking", _data_error_js__WEBPACK_IMPORTED_MODULE_3__[/* DataErrors */ "b"].NotAllowed);
+  } else {}
+};
+/**
+ * Fetches 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 fetched.
+ */
+
+
+const fetchTrackedRequests = () => {
+  const ssrCheck = SSRCheck();
+
+  if (ssrCheck != null) {
+    return Promise.reject(ssrCheck);
+  }
+
+  return _request_tracking_js__WEBPACK_IMPORTED_MODULE_1__[/* RequestTracker */ "a"].Default.fulfillTrackedRequests();
+};
+/**
+ * Indicate if there are tracked requests waiting to be fetched.
+ *
+ * This is used in conjunction with `TrackData`.
+ *
+ * @throws {Error} If executed outside of server-side rendering.
+ * @returns {boolean} `true` if there are unfetched tracked requests;
+ * otherwise, `false`.
+ */
+
+const hasTrackedRequestsToBeFetched = () => {
+  const ssrCheck = SSRCheck();
+
+  if (ssrCheck != null) {
+    throw ssrCheck;
+  }
+
+  return _request_tracking_js__WEBPACK_IMPORTED_MODULE_1__[/* RequestTracker */ "a"].Default.hasUnfulfilledRequests;
+};
+/**
+ * Abort all in-flight requests.
+ *
+ * This aborts all requests currently inflight via our default request
+ * fulfillment.
+ */
+
+const abortInflightRequests = () => {
+  _request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__[/* RequestFulfillment */ "a"].Default.abortAll();
 };
 
 /***/ }),
-/* 17 */
+/* 24 */
 /***/ (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);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return purgeCaches; });
+/* harmony import */ var _hooks_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
+/* harmony import */ var _hydration_cache_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(15);
 
-/***/ }),
-/* 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.
+ * Purge all caches managed by Wonder Blocks Data.
  *
- * Values in the partial context that are `undefined` will be ignored.
- * Values in the partial context that are `null` will be deleted.
+ * This is a convenience method that purges the shared cache and the hydration
+ * cache. It is useful for testing purposes to avoid having to reason about
+ * which caches may have been used during a given test run.
  */
-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 acc;
-  }, { ...defaultContext
-  });
+const purgeCaches = () => {
+  Object(_hooks_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_0__[/* purgeSharedCache */ "a"])();
+  Object(_hydration_cache_api_js__WEBPACK_IMPORTED_MODULE_1__[/* purgeHydrationCache */ "b"])();
 };
 
 /***/ }),
-/* 19 */
+/* 25 */
 /***/ (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__ = __webpack_require__(1);
 /* 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__(7);
+/* harmony import */ var _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8);
 
 
 
@@ -1392,13 +1836,13 @@ class TrackData extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 }
 
 /***/ }),
-/* 20 */
+/* 26 */
 /***/ (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__ = __webpack_require__(1);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _hooks_use_hydratable_effect_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
+/* harmony import */ var _hooks_use_hydratable_effect_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(12);
 
 
 
@@ -1424,13 +1868,13 @@ const Data = ({
 /* harmony default export */ __webpack_exports__["a"] = (Data);
 
 /***/ }),
-/* 21 */
+/* 27 */
 /***/ (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__ = __webpack_require__(1);
 /* 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__(13);
+/* harmony import */ var _intercept_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14);
 
 
 
@@ -1465,14 +1909,110 @@ const InterceptRequests = ({
 /* harmony default export */ __webpack_exports__["a"] = (InterceptRequests);
 
 /***/ }),
-/* 22 */
+/* 28 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return getGqlRequestId; });
+const toString = valid => {
+  var _JSON$stringify;
+
+  if (typeof valid === "string") {
+    return valid;
+  }
+
+  return (_JSON$stringify = JSON.stringify(valid)) != null ? _JSON$stringify : "";
+};
+/**
+ * Get an identifier for a given request.
+ */
+
+
+const getGqlRequestId = (operation, variables, context) => {
+  // We add all the bits for this into an array and then join them with
+  // a chosen separator.
+  const parts = []; // First, we push the context values.
+
+  const sortableContext = new URLSearchParams(context); // $FlowIgnore[prop-missing] Flow has incomplete support for URLSearchParams
+
+  sortableContext.sort();
+  parts.push(sortableContext.toString()); // Now we add the operation identifier.
+
+  parts.push(operation.id); // Finally, if we have variables, we add those too.
+
+  if (variables != null) {
+    // We need to turn each variable into a string.
+    const stringifiedVariables = Object.keys(variables).reduce((acc, key) => {
+      acc[key] = toString(variables[key]);
+      return acc;
+    }, {}); // We use the same mechanism as context to sort and arrange the
+    // variables.
+
+    const sortableVariables = new URLSearchParams(stringifiedVariables); // $FlowIgnore[prop-missing] Flow has incomplete support for URLSearchParams
+
+    sortableVariables.sort();
+    parts.push(sortableVariables.toString());
+  }
+
+  return parts.join("|");
+};
+
+/***/ }),
+/* 29 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return toGqlOperation; });
+/* harmony import */ var _graphql_document_node_parser_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(18);
+
+
+/**
+ * Convert a GraphQL DocumentNode to a base Wonder Blocks Data GqlOperation.
+ *
+ * If you want to include the query/mutation body, extend the result of this
+ * method and use the `graphql/language/printer` like:
+ *
+ * ```js
+ * import {print} from "graphql/language/printer";
+ *
+ * const gqlOpWithBody = {
+ *     ...toGqlOperation(documentNode),
+ *     query: print(documentNode),
+ * };
+ * ```
+ *
+ * If you want to enforce inclusion of __typename properties, then you can use
+ * `apollo-utilities` first to modify the document:
+ *
+ * ```js
+ * import {print} from "graphql/language/printer";
+ * import {addTypenameToDocument} from "apollo-utilities";
+ *
+ * const documentWithTypenames = addTypenameToDocument(documentNode);
+ * const gqlOpWithBody = {
+ *     ...toGqlOperation(documentWithTypenames),
+ *     query: print(documentWithTypenames),
+ * };
+ * ```
+ */
+const toGqlOperation = documentNode => {
+  const definition = Object(_graphql_document_node_parser_js__WEBPACK_IMPORTED_MODULE_0__[/* graphQLDocumentNodeParser */ "a"])(documentNode);
+  const wbDataOperation = {
+    id: definition.name,
+    type: definition.type
+  };
+  return wbDataOperation;
+};
+
+/***/ }),
+/* 30 */
 /***/ (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__ = __webpack_require__(1);
 /* 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__(17);
+/* harmony import */ var _util_gql_router_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(20);
 
 
 
@@ -1509,16 +2049,16 @@ const GqlRouter = ({
 };
 
 /***/ }),
-/* 23 */
+/* 31 */
 /***/ (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__ = __webpack_require__(1);
 /* 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 _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);
+/* harmony import */ var _util_merge_gql_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(21);
+/* harmony import */ var _use_gql_router_context_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(33);
+/* harmony import */ var _util_get_gql_data_from_response_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(34);
 
 
 
@@ -1559,34 +2099,13 @@ const useGql = (context = {}) => {
 };
 
 /***/ }),
-/* 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 */
+/* 32 */
 /***/ (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);
+/* harmony import */ var _status_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6);
+/* harmony import */ var _data_error_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
 
 
 
@@ -1620,16 +2139,16 @@ const resultFromCachedResponse = cacheEntry => {
 };
 
 /***/ }),
-/* 26 */
+/* 33 */
 /***/ (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__ = __webpack_require__(1);
 /* 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);
+/* harmony import */ var _util_merge_gql_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(21);
+/* harmony import */ var _util_gql_router_context_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(20);
+/* harmony import */ var _util_gql_error_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
 
 
 
@@ -1672,13 +2191,13 @@ const useGqlRouterContext = (contextOverrides = {}) => {
 };
 
 /***/ }),
-/* 27 */
+/* 34 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return getGqlDataFromResponse; });
-/* 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);
+/* harmony import */ var _data_error_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var _gql_error_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
 
 
 /**
@@ -1742,272 +2261,115 @@ const getGqlDataFromResponse = async response => {
 };
 
 /***/ }),
-/* 28 */
+/* 35 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "initializeCache", function() { return initializeCache; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "fulfillAllDataRequests", function() { return fulfillAllDataRequests; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hasUnfulfilledRequests", function() { return hasUnfulfilledRequests; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "removeFromCache", function() { return removeFromCache; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "removeAllFromCache", function() { return removeAllFromCache; });
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(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__(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__(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_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 _util_types_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FetchPolicy", function() { return _util_types_js__WEBPACK_IMPORTED_MODULE_0__["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 _util_hydration_cache_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(15);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "initializeHydrationCache", function() { return _util_hydration_cache_api_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
 
-/* 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__, "purgeHydrationCache", function() { return _util_hydration_cache_api_js__WEBPACK_IMPORTED_MODULE_1__["b"]; });
 
-/* 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_request_api_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(23);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "fetchTrackedRequests", function() { return _util_request_api_js__WEBPACK_IMPORTED_MODULE_2__["b"]; });
 
-/* 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 reexport (safe) */ __webpack_require__.d(__webpack_exports__, "hasTrackedRequestsToBeFetched", function() { return _util_request_api_js__WEBPACK_IMPORTED_MODULE_2__["c"]; });
 
-/* 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 reexport (safe) */ __webpack_require__.d(__webpack_exports__, "abortInflightRequests", function() { return _util_request_api_js__WEBPACK_IMPORTED_MODULE_2__["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 _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 import */ var _util_purge_caches_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(24);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "purgeCaches", function() { return _util_purge_caches_js__WEBPACK_IMPORTED_MODULE_3__["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 _components_track_data_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(25);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TrackData", function() { return _components_track_data_js__WEBPACK_IMPORTED_MODULE_4__["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 import */ var _components_data_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(26);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Data", function() { return _components_data_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlErrors", function() { return _util_gql_error_js__WEBPACK_IMPORTED_MODULE_17__["b"]; });
+/* harmony import */ var _components_intercept_requests_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(27);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InterceptRequests", function() { return _components_intercept_requests_js__WEBPACK_IMPORTED_MODULE_6__["a"]; });
 
+/* harmony import */ var _util_data_error_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(0);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "DataError", function() { return _util_data_error_js__WEBPACK_IMPORTED_MODULE_7__["a"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "DataErrors", function() { return _util_data_error_js__WEBPACK_IMPORTED_MODULE_7__["b"]; });
 
+/* harmony import */ var _hooks_use_server_effect_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(16);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useServerEffect", function() { return _hooks_use_server_effect_js__WEBPACK_IMPORTED_MODULE_8__["a"]; });
 
+/* harmony import */ var _hooks_use_cached_effect_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(17);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useCachedEffect", function() { return _hooks_use_cached_effect_js__WEBPACK_IMPORTED_MODULE_9__["a"]; });
 
-/**
- * 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.
- */
+/* harmony import */ var _hooks_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(5);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useSharedCache", function() { return _hooks_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_10__["b"]; });
 
-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"));
-  }
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "purgeSharedCache", function() { return _hooks_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_10__["a"]; });
 
-  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`.
- */
+/* harmony import */ var _hooks_use_hydratable_effect_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(12);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useHydratableEffect", function() { return _hooks_use_hydratable_effect_js__WEBPACK_IMPORTED_MODULE_11__["b"]; });
 
-const hasUnfulfilledRequests = () => {
-  if (!_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide()) {
-    throw new Error("Data requests are not tracked when client-side");
-  }
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "WhenClientSide", function() { return _hooks_use_hydratable_effect_js__WEBPACK_IMPORTED_MODULE_11__["a"]; });
 
-  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.
- */
+/* harmony import */ var _util_scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(11);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScopedInMemoryCache", function() { return _util_scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_12__["a"]; });
 
-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.
- */
+/* harmony import */ var _util_serializable_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(13);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SerializableInMemoryCache", function() { return _util_serializable_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_13__["a"]; });
 
-const removeAllFromCache = predicate => _util_ssr_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* SsrCache */ "a"].Default.removeAll(predicate);
+/* harmony import */ var _util_status_js__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(6);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Status", function() { return _util_status_js__WEBPACK_IMPORTED_MODULE_14__["a"]; });
 
+/* harmony import */ var _util_get_gql_request_id_js__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(28);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getGqlRequestId", function() { return _util_get_gql_request_id_js__WEBPACK_IMPORTED_MODULE_15__["a"]; });
 
+/* harmony import */ var _util_graphql_document_node_parser_js__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(18);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "graphQLDocumentNodeParser", function() { return _util_graphql_document_node_parser_js__WEBPACK_IMPORTED_MODULE_16__["a"]; });
 
+/* harmony import */ var _util_to_gql_operation_js__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(29);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "toGqlOperation", function() { return _util_to_gql_operation_js__WEBPACK_IMPORTED_MODULE_17__["a"]; });
 
+/* harmony import */ var _components_gql_router_js__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(30);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlRouter", function() { return _components_gql_router_js__WEBPACK_IMPORTED_MODULE_18__["a"]; });
 
+/* harmony import */ var _hooks_use_gql_js__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(31);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useGql", function() { return _hooks_use_gql_js__WEBPACK_IMPORTED_MODULE_19__["a"]; });
 
+/* harmony import */ var _util_gql_error_js__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(4);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlError", function() { return _util_gql_error_js__WEBPACK_IMPORTED_MODULE_20__["a"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlErrors", function() { return _util_gql_error_js__WEBPACK_IMPORTED_MODULE_20__["b"]; });
 
+// TODO(somewhatabstract, FEI-4174): Update eslint-plugin-import when they
+// have fixed:
+// https://github.com/import-js/eslint-plugin-import/issues/2073
+// eslint-disable-next-line import/named
 
 
 
- // 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;
-}
+ ////////////////////////////////////////////////////////////////////////////////
+// GraphQL
+////////////////////////////////////////////////////////////////////////////////
 
-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);
 
 
 /***/ })