@khanacademy/wonder-blocks-data 2.3.3 → 3.1.0

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 14);
+/******/ 	return __webpack_require__(__webpack_require__.s = 19);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -95,13 +95,55 @@ module.exports = require("react");
 /* 1 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return GqlErrors; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return GqlError; });
+/* harmony import */ var _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(10);
+/* harmony import */ var _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__);
+
+
+/**
+ * Error kinds for GqlError.
+ */
+const GqlErrors = Object.freeze({ ..._khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__["Errors"],
+  Network: "Network",
+  Parse: "Parse",
+  BadResponse: "BadResponse",
+  ErrorResult: "ErrorResult"
+});
+/**
+ * An error from the GQL API.
+ */
+
+class GqlError extends _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__["KindError"] {
+  constructor(message, kind, {
+    metadata,
+    cause
+  } = {}) {
+    super(message, kind, {
+      metadata,
+      cause,
+      prefix: "Gql"
+    });
+  }
+
+}
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-core");
+
+/***/ }),
+/* 3 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ResponseCache; });
 /* 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 _memory_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7);
-/* harmony import */ var _no_cache_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
-
+/* harmony import */ var _memory_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9);
 
 
 
@@ -126,24 +168,22 @@ class ResponseCache {
     return _default;
   }
 
-  constructor(memoryCache = null, ssrOnlyCache = null) {
+  constructor(hydrationCache = null, ssrOnlyCache = null) {
     this.initialize = source => {
-      if (this._hydrationAndDefaultCache.inUse) {
+      if (this._hydrationCache.inUse) {
         throw new Error("Cannot initialize data response cache more than once");
       }
 
       try {
-        this._hydrationAndDefaultCache = new _memory_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"](source);
+        this._hydrationCache = new _memory_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"](source);
       } catch (e) {
         throw new Error(`An error occurred trying to initialize the data response cache: ${e}`);
       }
     };
 
-    this.cacheData = (handler, options, data) => {
-      return this._setCacheEntry(handler, options, {
-        data
-      });
-    };
+    this.cacheData = (handler, options, data) => this._setCacheEntry(handler, options, {
+      data
+    });
 
     this.cacheError = (handler, options, error) => {
       const errorMessage = typeof error === "string" ? error : error.message;
@@ -153,110 +193,64 @@ class ResponseCache {
     };
 
     this.getEntry = (handler, options) => {
-      // If we're not server-side, and the handler has a custom cache
-      // let's try to use it.
-      if (this._ssrOnlyCache == null && handler.cache != null) {
-        const entry = handler.cache.retrieve(handler, options);
-
-        if (entry != null) {
-          // Custom cache has an entry, so use it.
-          return entry;
-        }
-      } // Get the internal entry for the handler.
-      // This allows us to use our hydrated cache during hydration.
-      // If we just returned null when the custom cache didn't have it,
-      // we would never hydrate properly.
-
-
-      const internalEntry = this._defaultCache(handler).retrieve(handler, options); // If we are not server-side and we hydrated something that the custom
-      // cache didn't have, we need to make sure the custom cache contains
-      // that value.
-
-
-      if (this._ssrOnlyCache == null && handler.cache != null && internalEntry != null) {
-        // Yes, if this throws, we will have a problem. We want that.
-        // Bad cache implementations should be overt.
-        handler.cache.store(handler, options, internalEntry); // We now delete this from our in-memory cache as we don't need it.
+      // Get the cached entry for this value.
+      // If the handler wants WB Data to hydrate (i.e. handler.hydrate is
+      // true), we use our hydration cache. Otherwise, if we're server-side
+      // we use our SSR-only cache. Otherwise, there's no entry to return.
+      const cache = handler.hydrate ? this._hydrationCache : _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide() ? this._ssrOnlyCache : undefined;
+      const internalEntry = cache == null ? void 0 : cache.retrieve(handler, options); // If we are not server-side and we hydrated something, let's clear
+      // that from the hydration cache to save memory.
+
+      if (this._ssrOnlyCache == null && internalEntry != null) {
+        // We now delete this from our hydration cache as we don't need it.
         // This does mean that if another handler of the same type but
-        // without a custom cache won't get the value, but that's not an
-        // expected valid usage of this framework - two handlers with
-        // different caching options shouldn't be using the same type name.
-
-        this._hydrationAndDefaultCache.remove(handler, options);
+        // without some sort of linked cache won't get the value, but
+        // that's not an expected use-case. If two different places use the
+        // same handler and options (i.e. the same request), then the
+        // handler should cater to that to ensure they share the result.
+        this._hydrationCache.remove(handler, options);
       }
 
       return internalEntry;
     };
 
     this.remove = (handler, options) => {
+      var _this$_ssrOnlyCache$r, _this$_ssrOnlyCache;
+
       // NOTE(somewhatabstract): We could invoke removeAll with a predicate
       // to match the key of the entry we're removing, but that's an
       // inefficient way to remove a single item, so let's not do that.
-      // If we're not server-side, and the handler has a custom cache
-      // let's try to use it.
-      const customCache = this._ssrOnlyCache == null ? handler.cache : null;
-      const removedCustom = !!(customCache != null && customCache.remove(handler, options)); // Delete the entry from our internal cache.
-      // Even if we have a custom cache, we want to make sure we still
-      // removed the same value from internal cache since this could be
-      // getting called before hydration for some complex advanced usage
-      // reason.
-
-      return this._defaultCache(handler).remove(handler, options) || removedCustom;
+      // Delete the entry from the appropriate cache.
+      return handler.hydrate ? this._hydrationCache.remove(handler, options) : (_this$_ssrOnlyCache$r = (_this$_ssrOnlyCache = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache.remove(handler, options)) != null ? _this$_ssrOnlyCache$r : false;
     };
 
     this.removeAll = (handler, predicate) => {
-      // If we're not server-side, and the handler has a custom cache
-      // let's try to use it.
-      const customCache = this._ssrOnlyCache == null ? handler.cache : null;
-      const removedCountCustom = (customCache == null ? void 0 : customCache.removeAll(handler, predicate)) || 0; // Apply the predicate to what we have in our internal cached.
-      // Even if we have a custom cache, we want to make sure we still
-      // removed the same value from internal cache since this could be
-      // getting called before hydration for some complex advanced usage
-      // reason.
-
-      const removedCount = this._defaultCache(handler).removeAll(handler, predicate); // We have no idea which keys were removed from which caches,
-      // so we can't dedupe the remove counts based on keys.
-      // That's why we return the total records deleted rather than the
-      // total keys deleted.
-
-
-      return removedCount + removedCountCustom;
+      var _this$_ssrOnlyCache$r2, _this$_ssrOnlyCache2;
+
+      // Apply the predicate to what we have in the appropriate cache.
+      return handler.hydrate ? this._hydrationCache.removeAll(handler, predicate) : (_this$_ssrOnlyCache$r2 = (_this$_ssrOnlyCache2 = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache2.removeAll(handler, predicate)) != null ? _this$_ssrOnlyCache$r2 : 0;
     };
 
     this.cloneHydratableData = () => {
       // We return our hydration cache only.
-      return this._hydrationAndDefaultCache.cloneData();
+      return this._hydrationCache.cloneData();
     };
 
     this._ssrOnlyCache = _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide() ? ssrOnlyCache || new _memory_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"]() : undefined;
-    this._hydrationAndDefaultCache = memoryCache || new _memory_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"]();
-  }
-  /**
-   * Returns the default cache to use for the given handler.
-   */
-
-
-  _defaultCache(handler) {
-    if (handler.hydrate) {
-      return this._hydrationAndDefaultCache;
-    } // If the handler doesn't want to hydrate, we return the SSR-only cache.
-    // If we are client-side, we return our non-caching implementation.
-
-
-    return this._ssrOnlyCache || _no_cache_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].Default;
+    this._hydrationCache = hydrationCache || new _memory_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"]();
   }
 
   _setCacheEntry(handler, options, entry) {
     const frozenEntry = Object.freeze(entry);
 
-    if (this._ssrOnlyCache == null && handler.cache != null) {
-      // We are not server-side, and our handler has its own cache,
-      // so we use that to store values.
-      handler.cache.store(handler, options, frozenEntry);
-    } else {
-      // We are either server-side, or our handler doesn't provide
-      // a caching override.
-      this._defaultCache(handler).store(handler, options, frozenEntry);
+    if (this._ssrOnlyCache != null) {
+      // We are server-side.
+      // We need to store this value.
+      if (handler.hydrate) {
+        this._hydrationCache.store(handler, options, frozenEntry);
+      } else {
+        this._ssrOnlyCache.store(handler, options, frozenEntry);
+      }
     }
 
     return frozenEntry;
@@ -271,13 +265,7 @@ class ResponseCache {
 }
 
 /***/ }),
-/* 2 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-core");
-
-/***/ }),
-/* 3 */
+/* 4 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -285,8 +273,8 @@ module.exports = require("@khanacademy/wonder-blocks-core");
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return RequestTracker; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _response_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
-/* harmony import */ var _request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
+/* harmony import */ var _response_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
+/* harmony import */ var _request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 
 
 
@@ -429,7 +417,7 @@ class RequestTracker {
 }
 
 /***/ }),
-/* 4 */
+/* 5 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -446,54 +434,150 @@ const InterceptContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["create
 /* harmony default export */ __webpack_exports__["a"] = (InterceptContext);
 
 /***/ }),
-/* 5 */
+/* 6 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return NoCache; });
-let defaultInstance = null;
-/**
- * This is a cache implementation to use when no caching is wanted.
- *
- * Use this with your request handler if you want to support server-side
- * rendering of your data requests, but want to ensure data is never cached
- * on the client-side.
- *
- * This is better than having `shouldRefreshCache` always return `true` in the
- * handler as this ensures that cache space and memory are never used for the
- * requested data after hydration has finished.
- */
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useData; });
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _util_request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
+/* harmony import */ var _components_intercept_context_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5);
+/* harmony import */ var _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(4);
+/* harmony import */ var _util_result_from_cache_entry_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(17);
+/* harmony import */ var _util_response_cache_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3);
 
-class NoCache {
-  constructor() {
-    this.store = (handler, options, entry) => {
-      /* empty */
-    };
 
-    this.retrieve = (handler, options) => null;
 
-    this.remove = (handler, options) => false;
 
-    this.removeAll = (handler, predicate) => 0;
-  }
 
-  static get Default() {
-    if (defaultInstance == null) {
-      defaultInstance = new NoCache();
+
+
+const useData = (handler, options) => {
+  // If we're server-side or hydrating, we'll have a cached entry to use.
+  // So we get that and use it to initialize our state.
+  // This works in both hydration and SSR because the very first call to
+  // this will have cached data in those cases as it will be present on the
+  // initial render - and subsequent renders on the client it will be null.
+  const cachedResult = _util_response_cache_js__WEBPACK_IMPORTED_MODULE_6__[/* ResponseCache */ "a"].Default.getEntry(handler, options);
+  const [result, setResult] = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(cachedResult); // Lookup to see if there's an interceptor for the handler.
+  // If we have one, we need to replace the handler with one that
+  // uses the interceptor.
+
+  const interceptorMap = Object(react__WEBPACK_IMPORTED_MODULE_1__["useContext"])(_components_intercept_context_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"]);
+  const interceptor = interceptorMap[handler.type]; // If we have an interceptor, we need to replace the handler with one that
+  // uses the interceptor. This helper function generates a new handler.
+  // We need this before we track the request as we want the interceptor
+  // to also work for tracked requests to simplify testing the server-side
+  // request fulfillment.
+
+  const getMaybeInterceptedHandler = () => {
+    if (interceptor == null) {
+      return handler;
     }
 
-    return defaultInstance;
-  }
+    const fulfillRequestFn = options => {
+      var _interceptor$fulfillR;
 
-}
+      return (_interceptor$fulfillR = interceptor.fulfillRequest(options)) != null ? _interceptor$fulfillR : handler.fulfillRequest(options);
+    };
+
+    return {
+      fulfillRequest: fulfillRequestFn,
+      getKey: options => handler.getKey(options),
+      type: handler.type,
+      hydrate: handler.hydrate
+    };
+  }; // We only track data requests when we are server-side and we don't
+  // already have a result, as given by the cachedData (which is also the
+  // initial value for the result state).
+
+
+  const maybeTrack = Object(react__WEBPACK_IMPORTED_MODULE_1__["useContext"])(_util_request_tracking_js__WEBPACK_IMPORTED_MODULE_4__[/* TrackerContext */ "b"]);
+
+  if (result == null && _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide()) {
+    maybeTrack == null ? void 0 : maybeTrack(getMaybeInterceptedHandler(), options);
+  } // We need to update our request when the handler changes or the key
+  // to the options change, so we keep track of those.
+  // However, even if we are hydrating from cache, we still need to make the
+  // request at least once, so we do not initialize these references.
+
+
+  const handlerRef = Object(react__WEBPACK_IMPORTED_MODULE_1__["useRef"])();
+  const keyRef = Object(react__WEBPACK_IMPORTED_MODULE_1__["useRef"])();
+  const interceptorRef = Object(react__WEBPACK_IMPORTED_MODULE_1__["useRef"])(); // This effect will ensure that we fulfill the request as desired.
+
+  Object(react__WEBPACK_IMPORTED_MODULE_1__["useEffect"])(() => {
+    // If we are server-side, then just skip the effect. We track requests
+    // during SSR and fulfill them outside of the React render cycle.
+    // NOTE: This shouldn't happen since effects would not run on the server
+    // but let's be defensive - I think it makes the code clearer.
+
+    /* istanbul ignore next */
+    if (_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide()) {
+      return;
+    } // Update our refs to the current handler and key.
+
+
+    handlerRef.current = handler;
+    keyRef.current = handler.getKey(options);
+    interceptorRef.current = interceptor; // If we're not hydrating a result, we want to make sure we set our
+    // result to null so that we're in the loading state.
+
+    if (cachedResult == null) {
+      // Mark ourselves as loading.
+      setResult(null);
+    } // We aren't server-side, so let's make the request.
+    // The request handler is in control of whether that request actually
+    // happens or not.
+
+
+    let cancel = false;
+    _util_request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__[/* RequestFulfillment */ "a"].Default.fulfill(getMaybeInterceptedHandler(), options).then(updateEntry => {
+      if (cancel) {
+        return;
+      }
+
+      setResult(updateEntry);
+      return;
+    }).catch(e => {
+      if (cancel) {
+        return;
+      }
+      /**
+       * We should never get here as errors in fulfillment are part
+       * of the `then`, but if we do.
+       */
+      // eslint-disable-next-line no-console
+
+
+      console.error(`Unexpected error occurred during data fulfillment: ${e}`);
+      setResult({
+        data: null,
+        error: typeof e === "string" ? e : e.message
+      });
+      return;
+    });
+    return () => {
+      cancel = true;
+    }; // - handler.getKey is a proxy for options
+    // - We don't want to trigger on cachedResult changing, we're
+    //   just using that as a flag for render state if the other things
+    //   trigger this effect.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [handler, handler.getKey(options), interceptor]);
+  return Object(_util_result_from_cache_entry_js__WEBPACK_IMPORTED_MODULE_5__[/* resultFromCacheEntry */ "a"])(result);
+};
 
 /***/ }),
-/* 6 */
+/* 7 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return RequestFulfillment; });
-/* harmony import */ var _response_cache_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var _response_cache_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
 
 
 let _default;
@@ -546,6 +630,8 @@ class RequestFulfillment {
           delete handlerRequests[key];
           /**
            * Let's cache the data!
+           *
+           * NOTE: This only caches when we're server side.
            */
 
           return cacheData(handler, options, data);
@@ -553,6 +639,8 @@ class RequestFulfillment {
           delete handlerRequests[key];
           /**
            * Let's cache the error!
+           *
+           * NOTE: This only caches when we're server side.
            */
 
           return cacheError(handler, options, error);
@@ -574,7 +662,18 @@ class RequestFulfillment {
 }
 
 /***/ }),
-/* 7 */
+/* 8 */
+/***/ (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);
+
+/***/ }),
+/* 9 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -596,9 +695,7 @@ function deepClone(source) {
  *
  * Special case cache implementation for the memory cache.
  *
- * This is only used within our framework. Handlers don't need to
- * provide this as a custom cache as the framework will default to this in the
- * absence of a custom cache. We use this for SSR too (see ./response-cache.js).
+ * This is only used within our framework for SSR (see ./response-cache.js).
  */
 
 
@@ -606,7 +703,7 @@ class MemoryCache {
   constructor(source = null) {
     this.store = (handler, options, entry) => {
       const requestType = handler.type;
-      const frozenEntry = Object.isFrozen(entry) ? entry : Object.freeze(entry); // Ensure we have a cache location for this handler type.
+      const frozenEntry = Object.freeze(entry); // Ensure we have a cache location for this handler type.
 
       this._cache[requestType] = this._cache[requestType] || {}; // Cache the data.
 
@@ -666,16 +763,22 @@ class MemoryCache {
 
       if (!handlerCache) {
         return 0;
-      } // Apply the predicate to what we have cached.
-
+      }
 
       let removedCount = 0;
 
-      for (const [key, entry] of Object.entries(handlerCache)) {
-        if (typeof predicate !== "function" || predicate(key, entry)) {
-          removedCount++;
-          delete handlerCache[key];
+      if (typeof predicate === "function") {
+        // Apply the predicate to what we have cached.
+        for (const [key, entry] of Object.entries(handlerCache)) {
+          if (predicate(key, entry)) {
+            removedCount++;
+            delete handlerCache[key];
+          }
         }
+      } else {
+        // We're removing everything so delete the entire subcache.
+        removedCount = Object.keys(handlerCache).length;
+        delete this._cache[requestType];
       }
 
       return removedCount;
@@ -705,6 +808,12 @@ class MemoryCache {
       }
     }
   }
+  /**
+   * Indicate if this cache is being used or now.
+   *
+   * When the cache has entries, returns `true`; otherwise, returns `false`.
+   */
+
 
   get inUse() {
     return Object.keys(this._cache).length > 0;
@@ -713,7 +822,13 @@ class MemoryCache {
 }
 
 /***/ }),
-/* 8 */
+/* 10 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-stuff-core");
+
+/***/ }),
+/* 11 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -725,9 +840,8 @@ class MemoryCache {
  * use with the Wonder Blocks Data framework.
  */
 class RequestHandler {
-  constructor(type, cache, hydrate = true) {
+  constructor(type, hydrate = true) {
     this._type = type;
-    this._cache = cache || null;
     this._hydrate = !!hydrate;
   }
 
@@ -735,26 +849,10 @@ class RequestHandler {
     return this._type;
   }
 
-  get cache() {
-    return this._cache;
-  }
-
   get hydrate() {
     return this._hydrate;
   }
 
-  shouldRefreshCache(options, cachedEntry) {
-    /**
-     * By default, the cache needs a refresh if the current entry is an
-     * error.
-     *
-     * This means that an error will cause a re-request on render.
-     * Useful if the server rendered an error, as it means the client
-     * will update after rehydration.
-     */
-    return cachedEntry == null || cachedEntry.error != null;
-  }
-
   getKey(options) {
     try {
       return options === undefined ? "undefined" : JSON.stringify(options);
@@ -770,7 +868,7 @@ class RequestHandler {
 }
 
 /***/ }),
-/* 9 */
+/* 12 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -779,7 +877,7 @@ class RequestHandler {
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
+/* harmony import */ var _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
 
 
 
@@ -801,18 +899,13 @@ class TrackData extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 }
 
 /***/ }),
-/* 10 */
+/* 13 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Data; });
 /* 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_response_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
-/* harmony import */ var _internal_data_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(13);
-/* harmony import */ var _intercept_context_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
-
-
+/* harmony import */ var _hooks_use_data_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
 
 
 
@@ -821,93 +914,22 @@ class TrackData extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
  * requirements can be placed in a React application in a manner that will
  * support server-side rendering and efficient caching.
  */
-class Data extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  _getHandlerFromInterceptor(interceptor) {
-    const {
-      handler
-    } = this.props;
-
-    if (!interceptor) {
-      return handler;
-    }
-
-    const {
-      fulfillRequest,
-      shouldRefreshCache
-    } = interceptor;
-    const fulfillRequestFn = fulfillRequest ? options => {
-      const interceptedResult = fulfillRequest(options);
-      return interceptedResult != null ? interceptedResult : handler.fulfillRequest(options);
-    } : options => handler.fulfillRequest(options);
-    const shouldRefreshCacheFn = shouldRefreshCache ? (options, cacheEntry) => {
-      const interceptedResult = shouldRefreshCache(options, cacheEntry);
-      return interceptedResult != null ? interceptedResult : handler.shouldRefreshCache(options, cacheEntry);
-    } : (options, cacheEntry) => handler.shouldRefreshCache(options, cacheEntry);
-    return {
-      fulfillRequest: fulfillRequestFn,
-      shouldRefreshCache: shouldRefreshCacheFn,
-      getKey: options => handler.getKey(options),
-      type: handler.type,
-      cache: handler.cache,
-      hydrate: handler.hydrate
-    };
-  }
-
-  _getCacheLookupFnFromInterceptor(interceptor) {
-    const getEntry = interceptor && interceptor.getEntry;
-
-    if (!getEntry) {
-      return _util_response_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* ResponseCache */ "a"].Default.getEntry;
-    }
-
-    return (handler, options) => {
-      // 1. Lookup the current cache value.
-      const cacheEntry = _util_response_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* ResponseCache */ "a"].Default.getEntry(handler, options); // 2. See if our interceptor wants to override it.
-
-      const interceptedData = getEntry(options, cacheEntry); // 3. Return the appropriate response.
-
-      return interceptedData != null ? interceptedData : cacheEntry;
-    };
-  }
-
-  render() {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_intercept_context_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"].Consumer, null, value => {
-      const handlerType = this.props.handler.type;
-      const interceptor = value[handlerType];
-
-      const handler = this._getHandlerFromInterceptor(interceptor);
-
-      const getEntry = this._getCacheLookupFnFromInterceptor(interceptor);
-      /**
-       * Need to share our types with InternalData so Flow
-       * doesn't need to infer them and find mismatches.
-       * However, just deriving a new component creates issues
-       * where InternalData starts rerendering too often.
-       * Couldn't track down why, so suppressing the error
-       * instead.
-       */
-
-
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_internal_data_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"] // $FlowIgnore[incompatible-type-arg]
-      , {
-        handler: handler,
-        options: this.props.options,
-        getEntry: getEntry
-      }, result => this.props.children(result));
-    });
-  }
+const Data = props => {
+  const data = Object(_hooks_use_data_js__WEBPACK_IMPORTED_MODULE_1__[/* useData */ "a"])(props.handler, props.options);
+  return props.children(data);
+};
 
-}
+/* harmony default export */ __webpack_exports__["a"] = (Data);
 
 /***/ }),
-/* 11 */
+/* 14 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return InterceptData; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _intercept_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
+/* harmony import */ var _intercept_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
 
 
 
@@ -916,9 +938,6 @@ class Data extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
  * type of a given handler and provide alternative results. This is mostly
  * useful for testing.
  *
- * Results from this interceptor will end up in the cache. If you
- * wish to only override the cache, use `InterceptCache` instead.
- *
  * This component is not recommended for use in production code as it
  * can prevent predictable functioning of the Wonder Blocks Data framework.
  * One possible side-effect is that inflight requests from the interceptor could
@@ -935,8 +954,7 @@ class InterceptData extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_intercept_context_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"].Consumer, null, value => {
       const handlerType = this.props.handler.type;
       const interceptor = { ...value[handlerType],
-        fulfillRequest: this.props.fulfillRequest || null,
-        shouldRefreshCache: this.props.shouldRefreshCache || null
+        fulfillRequest: this.props.fulfillRequest
       };
       const newValue = { ...value,
         [handlerType]: interceptor
@@ -950,252 +968,223 @@ class InterceptData extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 }
 
 /***/ }),
-/* 12 */
+/* 15 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return InterceptCache; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return GqlRouter; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _intercept_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
+/* harmony import */ var _util_gql_router_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
 
 
 
 /**
- * This component provides a mechanism to intercept cache lookups for the
- * type of a given handler and provide alternative values. This is mostly
- * useful for testing.
+ * Configure GraphQL routing for GraphQL hooks and components.
  *
- * This does not modify the cache in any way. If you want to intercept
- * requests and cache based on the intercept, then use `InterceptData`.
- *
- * This component is generally not suitable for use in production code as it
- * can prevent predictable functioning of the Wonder Blocks Data framework.
- *
- * These components do not chain. If a different `InterceptCache` instance is
- * rendered within this one that intercepts the same handler type, then that
- * new instance will replace this interceptor for its children.
+ * These can be nested. Components and hooks relying on the GraphQL routing
+ * will use the configuration from their closest ancestral GqlRouter.
  */
-class InterceptCache extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  render() {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_intercept_context_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"].Consumer, null, value => {
-      const handlerType = this.props.handler.type;
-      const interceptor = { ...value[handlerType],
-        getEntry: this.props.getEntry
-      };
-      const newValue = { ...value,
-        [handlerType]: interceptor
-      };
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_intercept_context_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"].Provider, {
-        value: newValue
-      }, this.props.children);
-    });
-  }
-
-}
+const GqlRouter = ({
+  defaultContext: thisDefaultContext,
+  fetch: thisFetch,
+  children
+}) => {
+  // We don't care if we're nested. We always force our callers to define
+  // everything. It makes for a clearer API and requires less error checking
+  // code (assuming our flow types are correct). We also don't default fetch
+  // to anything - our callers can tell us what function to use quite easily.
+  // If code that consumes this wants more nuanced nesting, it can implement
+  // it within its own GqlRouter than then defers to this one.
+  // We want to always use the same object if things haven't changed to avoid
+  // over-rendering consumers of our context, let's memoize the configuration.
+  // By doing this, if a component under children that uses this context
+  // uses React.memo, we won't force it to re-render every time we render
+  // because we'll only change the context value if something has actually
+  // changed.
+  const configuration = react__WEBPACK_IMPORTED_MODULE_0__["useMemo"](() => ({
+    fetch: thisFetch,
+    defaultContext: thisDefaultContext
+  }), [thisDefaultContext, thisFetch]);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_util_gql_router_context_js__WEBPACK_IMPORTED_MODULE_1__[/* GqlRouterContext */ "a"].Provider, {
+    value: configuration
+  }, children);
+};
 
 /***/ }),
-/* 13 */
+/* 16 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return InternalData; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useGql; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _util_request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
-/* harmony import */ var _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3);
+/* harmony import */ var _util_gql_router_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
+/* harmony import */ var _util_get_gql_data_from_response_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(18);
+/* harmony import */ var _util_gql_error_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
 
 
 
 
 
 /**
- * This component is responsible for actually handling the data request.
- * It is wrapped by Data in order to support intercepts and be exported for use.
+ * Hook to obtain a gqlFetch function for performing GraphQL requests.
  *
- * INTERNAL USE ONLY
+ * The fetch function will resolve null if the request was aborted, otherwise
+ * it will resolve the data returned by the GraphQL server.
  */
-class InternalData extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  constructor(props) {
-    super(props);
-    this.state = this._buildStateAndfulfillNeeds(props);
-  }
-
-  componentDidMount() {
-    this._mounted = true;
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    /**
-     * We only bother updating if our state changed.
-     *
-     * And we only update the state if props changed
-     * or we got new data/error.
-     */
-    if (!this._propsMatch(nextProps)) {
-      const newState = this._buildStateAndfulfillNeeds(nextProps);
-
-      this.setState(newState);
-    }
-
-    return this.state.loading !== nextState.loading || this.state.data !== nextState.data || this.state.error !== nextState.error;
-  }
+const useGql = () => {
+  // This hook only works if the `GqlRouter` has been used to setup context.
+  const gqlRouterContext = Object(react__WEBPACK_IMPORTED_MODULE_0__["useContext"])(_util_gql_router_context_js__WEBPACK_IMPORTED_MODULE_1__[/* GqlRouterContext */ "a"]);
 
-  componentWillUnmount() {
-    this._mounted = false;
+  if (gqlRouterContext == null) {
+    throw new _util_gql_error_js__WEBPACK_IMPORTED_MODULE_3__[/* GqlError */ "a"]("No GqlRouter", _util_gql_error_js__WEBPACK_IMPORTED_MODULE_3__[/* GqlErrors */ "b"].Internal);
   }
 
-  _propsMatch(otherProps) {
-    const {
-      handler,
-      options
-    } = this.props;
-    const {
-      handler: prevHandler,
-      options: prevOptions
-    } = otherProps;
-    return handler === prevHandler && handler.getKey(options) === prevHandler.getKey(prevOptions);
-  }
+  const {
+    fetch,
+    defaultContext
+  } = gqlRouterContext; // Let's memoize the gqlFetch function we create based off our context.
+  // That way, even if the context happens to change, if its values don't
+  // we give the same function instance back to our callers instead of
+  // making a new one. That then means they can safely use the return value
+  // in hooks deps without fear of it triggering extra renders.
 
-  _buildStateAndfulfillNeeds(propsAtFulfillment) {
+  const gqlFetch = Object(react__WEBPACK_IMPORTED_MODULE_0__["useMemo"])(() => (operation, options = Object.freeze({})) => {
     const {
-      getEntry,
-      handler,
-      options
-    } = propsAtFulfillment;
-    const cachedData = getEntry(handler, options);
-
-    if (!_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__["Server"].isServerSide() && (cachedData == null || handler.shouldRefreshCache(options, cachedData))) {
-      /**
-       * We're not on the server, the cache missed, or our handler says
-       * we should refresh the cache.
-       *
-       * Therefore, we need to request data.
-       *
-       * We have to do this here from the constructor so that this
-       * data request is tracked when performing server-side rendering.
-       */
-      _util_request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__[/* RequestFulfillment */ "a"].Default.fulfill(handler, options).then(cacheEntry => {
-        /**
-         * We get here, we should have updated the cache.
-         * However, we need to update the component, but we
-         * should only do that if the props are the same as they
-         * were when this was called.
-         */
-        if (this._mounted && this._propsMatch(propsAtFulfillment)) {
-          this.setState({
-            loading: false,
-            data: cacheEntry.data,
-            error: cacheEntry.error
-          });
-        }
-
+      variables,
+      context
+    } = options; // Invoke the fetch and extract the data.
+
+    return fetch(operation, variables, { ...defaultContext,
+      ...context
+    }).then(_util_get_gql_data_from_response_js__WEBPACK_IMPORTED_MODULE_2__[/* getGqlDataFromResponse */ "a"], error => {
+      // Return null if the request was aborted.
+      // The only way to detect this reliably, it seems, is to
+      // check the error name and see if it's "AbortError" (this
+      // is also what Apollo does).
+      // Even then, it's reliant on the fetch supporting aborts.
+      if (error.name === "AbortError") {
         return null;
-      }).catch(e => {
-        /**
-         * We should never get here, but if we do.
-         */
-        // eslint-disable-next-line no-console
-        console.error(`Unexpected error occurred during data fulfillment: ${e}`);
-
-        if (this._mounted && this._propsMatch(propsAtFulfillment)) {
-          this.setState({
-            loading: false,
-            data: null,
-            error: typeof e === "string" ? e : e.message
-          });
-        }
-
-        return null;
-      });
-    }
-    /**
-     * This is the default response for the server and for the initial
-     * client-side render if we have cachedData.
-     *
-     * This ensures we don't make promises we don't want when doing
-     * server-side rendering. Instead, we either have data from the cache
-     * or we don't.
-     */
+      }
+    });
+  }, [fetch, defaultContext]);
+  return gqlFetch;
+};
 
+/***/ }),
+/* 17 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return resultFromCacheEntry; });
+/**
+ * Turns a cache entry into a stateful result.
+ */
+const resultFromCacheEntry = cacheEntry => {
+  // No cache entry means we didn't load one yet.
+  if (cacheEntry == null) {
     return {
-      loading: cachedData == null,
-      data: cachedData && cachedData.data,
-      error: cachedData && cachedData.error
+      status: "loading"
     };
   }
 
-  _resultFromState() {
-    const {
-      loading,
-      data,
-      error
-    } = this.state;
-
-    if (loading) {
-      return {
-        loading: true
-      };
-    }
-
-    if (data != null) {
-      return {
-        loading: false,
-        data
-      };
-    }
-
-    if (error == null) {
-      // We should never get here ever.
-      throw new Error("Loaded result has invalid state where data and error are missing");
-    }
+  const {
+    data,
+    error
+  } = cacheEntry;
 
+  if (data != null) {
     return {
-      loading: false,
-      error
+      status: "success",
+      data
     };
   }
 
-  _renderContent(result) {
-    const {
-      children
-    } = this.props;
-    return children(result);
+  if (error == null) {
+    // We should never get here ever.
+    return {
+      status: "error",
+      error: "Loaded result has invalid state where data and error are missing"
+    };
   }
 
-  _renderWithTrackingContext(result) {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_util_request_tracking_js__WEBPACK_IMPORTED_MODULE_3__[/* TrackerContext */ "b"].Consumer, null, track => {
-      /**
-       * If data tracking wasn't enabled, don't do it.
-       */
-      if (track != null) {
-        track(this.props.handler, this.props.options);
-      }
+  return {
+    status: "error",
+    error
+  };
+};
+
+/***/ }),
+/* 18 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-      return this._renderContent(result);
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return getGqlDataFromResponse; });
+/* harmony import */ var _gql_error_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+
+/**
+ * Validate a GQL operation response and extract the data.
+ */
+
+const getGqlDataFromResponse = async response => {
+  // Get the response as text, that way we can use the text in error
+  // messaging, should our parsing fail.
+  const bodyText = await response.text();
+  let result;
+
+  try {
+    result = JSON.parse(bodyText);
+  } catch (e) {
+    throw new _gql_error_js__WEBPACK_IMPORTED_MODULE_0__[/* GqlError */ "a"]("Failed to parse response", _gql_error_js__WEBPACK_IMPORTED_MODULE_0__[/* GqlErrors */ "b"].Parse, {
+      metadata: {
+        statusCode: response.status,
+        bodyText
+      },
+      cause: e
     });
-  }
+  } // Check for a bad status code.
 
-  render() {
-    const result = this._resultFromState(); // We only track data requests when we are server-side and we don't
-    // already have a result. The existence of a result is indicated by the
-    // loading flag being false.
 
+  if (response.status >= 300) {
+    throw new _gql_error_js__WEBPACK_IMPORTED_MODULE_0__[/* GqlError */ "a"]("Response unsuccessful", _gql_error_js__WEBPACK_IMPORTED_MODULE_0__[/* GqlErrors */ "b"].Network, {
+      metadata: {
+        statusCode: response.status,
+        result
+      }
+    });
+  } // Check that we have a valid result payload.
+
+
+  if ( // Flow shouldn't be warning about this.
+  // $FlowIgnore[method-unbinding]
+  !Object.prototype.hasOwnProperty.call(result, "data") && // Flow shouldn't be warning about this.
+  // $FlowIgnore[method-unbinding]
+  !Object.prototype.hasOwnProperty.call(result, "errors")) {
+    throw new _gql_error_js__WEBPACK_IMPORTED_MODULE_0__[/* GqlError */ "a"]("Server response missing", _gql_error_js__WEBPACK_IMPORTED_MODULE_0__[/* GqlErrors */ "b"].BadResponse, {
+      metadata: {
+        statusCode: response.status,
+        result
+      }
+    });
+  } // If the response payload has errors, throw an error.
 
-    if (result.loading && _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__["Server"].isServerSide()) {
-      return this._renderWithTrackingContext(result);
-    }
 
-    return this._renderContent(result);
-  }
+  if (result.errors != null && Array.isArray(result.errors) && result.errors.length > 0) {
+    throw new _gql_error_js__WEBPACK_IMPORTED_MODULE_0__[/* GqlError */ "a"]("GraphQL errors", _gql_error_js__WEBPACK_IMPORTED_MODULE_0__[/* GqlErrors */ "b"].ErrorResult, {
+      metadata: {
+        statusCode: response.status,
+        result
+      }
+    });
+  } // We got here, so return the data.
 
-}
+
+  return result.data;
+};
 
 /***/ }),
-/* 14 */
+/* 19 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1207,25 +1196,33 @@ __webpack_require__.r(__webpack_exports__);
 /* 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_response_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
-/* harmony import */ var _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
-/* harmony import */ var _util_request_handler_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(8);
+/* harmony import */ var _util_response_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
+/* harmony import */ var _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
+/* harmony import */ var _util_request_handler_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(11);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RequestHandler", function() { return _util_request_handler_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
 
-/* harmony import */ var _components_track_data_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9);
+/* harmony import */ var _components_track_data_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(12);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TrackData", function() { return _components_track_data_js__WEBPACK_IMPORTED_MODULE_4__["a"]; });
 
-/* harmony import */ var _components_data_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(10);
+/* harmony import */ var _components_data_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(13);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Data", function() { return _components_data_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });
 
-/* harmony import */ var _components_intercept_data_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(11);
+/* harmony import */ var _components_intercept_data_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(14);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InterceptData", function() { return _components_intercept_data_js__WEBPACK_IMPORTED_MODULE_6__["a"]; });
 
-/* harmony import */ var _components_intercept_cache_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(12);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InterceptCache", function() { return _components_intercept_cache_js__WEBPACK_IMPORTED_MODULE_7__["a"]; });
+/* harmony import */ var _hooks_use_data_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(6);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useData", function() { return _hooks_use_data_js__WEBPACK_IMPORTED_MODULE_7__["a"]; });
+
+/* harmony import */ var _components_gql_router_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(15);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlRouter", function() { return _components_gql_router_js__WEBPACK_IMPORTED_MODULE_8__["a"]; });
+
+/* harmony import */ var _hooks_use_gql_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(16);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useGql", function() { return _hooks_use_gql_js__WEBPACK_IMPORTED_MODULE_9__["a"]; });
+
+/* harmony import */ var _util_gql_error_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(1);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlErrors", function() { return _util_gql_error_js__WEBPACK_IMPORTED_MODULE_10__["b"]; });
 
-/* harmony import */ var _util_no_cache_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(5);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "NoCache", function() { return _util_no_cache_js__WEBPACK_IMPORTED_MODULE_8__["a"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlError", function() { return _util_gql_error_js__WEBPACK_IMPORTED_MODULE_10__["a"]; });
 
 
 
@@ -1247,15 +1244,12 @@ const hasUnfulfilledRequests = () => {
 };
 const removeFromCache = (handler, options) => _util_response_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* ResponseCache */ "a"].Default.remove(handler, options);
 const removeAllFromCache = (handler, predicate) => _util_response_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* ResponseCache */ "a"].Default.removeAll(handler, predicate);
-/**
- * TODO(somewhatabstract): Export each cache type we implement.
- *
- * Is there a base type we export, like we do for RequestHandler?
- */
 
 
 
 
+ // GraphQL
+