@khanacademy/wonder-blocks-data 2.3.3 → 3.1.0

package/dist/es/index.js

@@ -1,6 +1,8 @@
 import { Server } from '@khanacademy/wonder-blocks-core';
-import { createContext, Component, createElement } from 'react';
+import * as React from 'react';
+import { useState, useContext, useRef, useEffect, useMemo } from 'react';
 import _extends from '@babel/runtime/helpers/extends';
+import { Errors, KindError } from '@khanacademy/wonder-stuff-core';
 
 function deepClone(source) {
   /**
@@ -19,9 +21,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).
  */
 
 
@@ -29,7 +29,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.
 
@@ -89,16 +89,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;
@@ -128,6 +134,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;
@@ -135,47 +147,11 @@ class MemoryCache {
 
 }
 
-let defaultInstance = null;
-/**
- * This is a cache implementation to use when no caching is wanted.
- *
- * Use this with your request handler if you want to support server-side
- * rendering of your data requests, but want to ensure data is never cached
- * on the client-side.
- *
- * This is better than having `shouldRefreshCache` always return `true` in the
- * handler as this ensures that cache space and memory are never used for the
- * requested data after hydration has finished.
- */
-
-class NoCache {
-  constructor() {
-    this.store = (handler, options, entry) => {
-      /* empty */
-    };
-
-    this.retrieve = (handler, options) => null;
-
-    this.remove = (handler, options) => false;
-
-    this.removeAll = (handler, predicate) => 0;
-  }
-
-  static get Default() {
-    if (defaultInstance == null) {
-      defaultInstance = new NoCache();
-    }
-
-    return defaultInstance;
-  }
-
-}
-
 /**
  * The default instance is stored here.
  * It's created below in the Default() static property.
  */
-let _default;
+let _default$2;
 /**
  * Implements the response cache.
  *
@@ -185,31 +161,29 @@ let _default;
 
 class ResponseCache {
   static get Default() {
-    if (!_default) {
-      _default = new ResponseCache();
+    if (!_default$2) {
+      _default$2 = new ResponseCache();
     }
 
-    return _default;
+    return _default$2;
   }
 
-  constructor(memoryCache = null, ssrOnlyCache = null) {
+  constructor(hydrationCache = null, ssrOnlyCache = null) {
     this.initialize = source => {
-      if (this._hydrationAndDefaultCache.inUse) {
+      if (this._hydrationCache.inUse) {
         throw new Error("Cannot initialize data response cache more than once");
       }
 
       try {
-        this._hydrationAndDefaultCache = new MemoryCache(source);
+        this._hydrationCache = new MemoryCache(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;
@@ -219,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 : 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 = Server.isServerSide() ? ssrOnlyCache || new MemoryCache() : undefined;
-    this._hydrationAndDefaultCache = memoryCache || new MemoryCache();
-  }
-  /**
-   * Returns the default cache to use for the given handler.
-   */
-
-
-  _defaultCache(handler) {
-    if (handler.hydrate) {
-      return this._hydrationAndDefaultCache;
-    } // If the handler doesn't want to hydrate, we return the SSR-only cache.
-    // If we are client-side, we return our non-caching implementation.
-
-
-    return this._ssrOnlyCache || NoCache.Default;
+    this._hydrationCache = hydrationCache || new MemoryCache();
   }
 
   _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;
@@ -386,6 +314,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);
@@ -393,6 +323,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);
@@ -418,13 +350,13 @@ class RequestFulfillment {
  *
  * INTERNAL USE ONLY
  */
-const TrackerContext = new createContext(null);
+const TrackerContext = new React.createContext(null);
 /**
  * The default instance is stored here.
  * It's created below in the Default() static property.
  */
 
-let _default$2;
+let _default;
 /**
  * Implements request tracking and fulfillment.
  *
@@ -434,11 +366,11 @@ let _default$2;
 
 class RequestTracker {
   static get Default() {
-    if (!_default$2) {
-      _default$2 = new RequestTracker();
+    if (!_default) {
+      _default = new RequestTracker();
     }
 
-    return _default$2;
+    return _default;
   }
   /**
    * These are the caches for tracked requests, their handlers, and responses.
@@ -557,9 +489,8 @@ class RequestTracker {
  * 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;
   }
 
@@ -567,26 +498,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);
@@ -604,13 +519,13 @@ class RequestHandler {
 /**
  * Component to enable data request tracking when server-side rendering.
  */
-class TrackData extends Component {
+class TrackData extends React.Component {
   render() {
     if (!Server.isServerSide()) {
       throw new Error("This component is not for use during client-side rendering");
     }
 
-    return /*#__PURE__*/createElement(TrackerContext.Provider, {
+    return /*#__PURE__*/React.createElement(TrackerContext.Provider, {
       value: RequestTracker.Default.trackDataRequest
     }, this.props.children);
   }
@@ -618,286 +533,180 @@ class TrackData extends Component {
 }
 
 /**
- * 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.
+ * InterceptContext defines a map from handler type to interception methods.
  *
  * INTERNAL USE ONLY
  */
-class InternalData extends 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;
-  }
-
-  componentWillUnmount() {
-    this._mounted = false;
-  }
-
-  _propsMatch(otherProps) {
-    const {
-      handler,
-      options
-    } = this.props;
-    const {
-      handler: prevHandler,
-      options: prevOptions
-    } = otherProps;
-    return handler === prevHandler && handler.getKey(options) === prevHandler.getKey(prevOptions);
-  }
-
-  _buildStateAndfulfillNeeds(propsAtFulfillment) {
-    const {
-      getEntry,
-      handler,
-      options
-    } = propsAtFulfillment;
-    const cachedData = getEntry(handler, options);
-
-    if (!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.
-       */
-      RequestFulfillment.Default.fulfill(handler, options).then(cacheEntry => {
-        /**
-         * We get here, we should have updated the cache.
-         * However, we need to update the component, but we
-         * should only do that if the props are the same as they
-         * were when this was called.
-         */
-        if (this._mounted && this._propsMatch(propsAtFulfillment)) {
-          this.setState({
-            loading: false,
-            data: cacheEntry.data,
-            error: cacheEntry.error
-          });
-        }
-
-        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.
-     */
-
+const InterceptContext = /*#__PURE__*/React.createContext({});
 
+/**
+ * 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);
-  }
-
-  _renderWithTrackingContext(result) {
-    return /*#__PURE__*/createElement(TrackerContext.Consumer, null, track => {
-      /**
-       * If data tracking wasn't enabled, don't do it.
-       */
-      if (track != null) {
-        track(this.props.handler, this.props.options);
-      }
-
-      return this._renderContent(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"
+    };
   }
 
-  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.
-
+  return {
+    status: "error",
+    error
+  };
+};
 
-    if (result.loading && Server.isServerSide()) {
-      return this._renderWithTrackingContext(result);
+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 = ResponseCache.Default.getEntry(handler, options);
+  const [result, setResult] = 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 = useContext(InterceptContext);
+  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 this._renderContent(result);
-  }
+    const fulfillRequestFn = options => {
+      var _interceptor$fulfillR;
 
-}
-
-/**
- * InterceptContext defines a map from handler type to interception methods.
- *
- * INTERNAL USE ONLY
- */
-const InterceptContext = /*#__PURE__*/createContext({});
-
-/**
- * This component is the main component of Wonder Blocks Data. With this, data
- * requirements can be placed in a React application in a manner that will
- * support server-side rendering and efficient caching.
- */
-class Data extends Component {
-  _getHandlerFromInterceptor(interceptor) {
-    const {
-      handler
-    } = this.props;
-
-    if (!interceptor) {
-      return handler;
-    }
+      return (_interceptor$fulfillR = interceptor.fulfillRequest(options)) != null ? _interceptor$fulfillR : handler.fulfillRequest(options);
+    };
 
-    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
     };
-  }
+  }; // 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).
 
-  _getCacheLookupFnFromInterceptor(interceptor) {
-    const getEntry = interceptor && interceptor.getEntry;
 
-    if (!getEntry) {
-      return ResponseCache.Default.getEntry;
-    }
+  const maybeTrack = useContext(TrackerContext);
 
-    return (handler, options) => {
-      // 1. Lookup the current cache value.
-      const cacheEntry = ResponseCache.Default.getEntry(handler, options); // 2. See if our interceptor wants to override it.
+  if (result == null && 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 interceptedData = getEntry(options, cacheEntry); // 3. Return the appropriate response.
 
-      return interceptedData != null ? interceptedData : cacheEntry;
-    };
-  }
+  const handlerRef = useRef();
+  const keyRef = useRef();
+  const interceptorRef = useRef(); // This effect will ensure that we fulfill the request as desired.
 
-  render() {
-    return /*#__PURE__*/createElement(InterceptContext.Consumer, null, value => {
-      const handlerType = this.props.handler.type;
-      const interceptor = value[handlerType];
+  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 (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.
 
-      const handler = this._getHandlerFromInterceptor(interceptor);
 
-      const getEntry = this._getCacheLookupFnFromInterceptor(interceptor);
+    let cancel = false;
+    RequestFulfillment.Default.fulfill(getMaybeInterceptedHandler(), options).then(updateEntry => {
+      if (cancel) {
+        return;
+      }
+
+      setResult(updateEntry);
+      return;
+    }).catch(e => {
+      if (cancel) {
+        return;
+      }
       /**
-       * 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.
+       * We should never get here as errors in fulfillment are part
+       * of the `then`, but if we do.
        */
+      // eslint-disable-next-line no-console
 
 
-      return /*#__PURE__*/createElement(InternalData // $FlowIgnore[incompatible-type-arg]
-      , {
-        handler: handler,
-        options: this.props.options,
-        getEntry: getEntry
-      }, result => this.props.children(result));
+      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 resultFromCacheEntry(result);
+};
 
-}
+/**
+ * This component is the main component of Wonder Blocks Data. With this, data
+ * requirements can be placed in a React application in a manner that will
+ * support server-side rendering and efficient caching.
+ */
+const Data = props => {
+  const data = useData(props.handler, props.options);
+  return props.children(data);
+};
 
 /**
  * This component provides a mechanism to intercept the data requests for the
  * type of a given handler and provide alternative results. This is mostly
  * useful for testing.
  *
- * 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
@@ -909,21 +718,20 @@ class Data extends Component {
  * new instance will replace this interceptor for its children. All methods
  * will be replaced.
  */
-class InterceptData extends Component {
+class InterceptData extends React.Component {
   render() {
-    return /*#__PURE__*/createElement(InterceptContext.Consumer, null, value => {
+    return /*#__PURE__*/React.createElement(InterceptContext.Consumer, null, value => {
       const handlerType = this.props.handler.type;
 
       const interceptor = _extends({}, value[handlerType], {
-        fulfillRequest: this.props.fulfillRequest || null,
-        shouldRefreshCache: this.props.shouldRefreshCache || null
+        fulfillRequest: this.props.fulfillRequest
       });
 
       const newValue = _extends({}, value, {
         [handlerType]: interceptor
       });
 
-      return /*#__PURE__*/createElement(InterceptContext.Provider, {
+      return /*#__PURE__*/React.createElement(InterceptContext.Provider, {
         value: newValue
       }, this.props.children);
     });
@@ -931,42 +739,170 @@ class InterceptData extends Component {
 
 }
 
+const GqlRouterContext = /*#__PURE__*/React.createContext(null);
+
 /**
- * This component provides a mechanism to intercept cache lookups for the
- * type of a given handler and provide alternative values. This is mostly
- * useful for testing.
- *
- * This does not modify the cache in any way. If you want to intercept
- * requests and cache based on the intercept, then use `InterceptData`.
+ * Configure GraphQL routing for GraphQL hooks and components.
  *
- * 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 Component {
-  render() {
-    return /*#__PURE__*/createElement(InterceptContext.Consumer, null, value => {
-      const handlerType = this.props.handler.type;
-
-      const interceptor = _extends({}, value[handlerType], {
-        getEntry: this.props.getEntry
-      });
+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.useMemo(() => ({
+    fetch: thisFetch,
+    defaultContext: thisDefaultContext
+  }), [thisDefaultContext, thisFetch]);
+  return /*#__PURE__*/React.createElement(GqlRouterContext.Provider, {
+    value: configuration
+  }, children);
+};
 
-      const newValue = _extends({}, value, {
-        [handlerType]: interceptor
-      });
+/**
+ * Error kinds for GqlError.
+ */
+const GqlErrors = Object.freeze(_extends({}, Errors, {
+  Network: "Network",
+  Parse: "Parse",
+  BadResponse: "BadResponse",
+  ErrorResult: "ErrorResult"
+}));
+/**
+ * An error from the GQL API.
+ */
 
-      return /*#__PURE__*/createElement(InterceptContext.Provider, {
-        value: newValue
-      }, this.props.children);
+class GqlError extends KindError {
+  constructor(message, kind, {
+    metadata,
+    cause
+  } = {}) {
+    super(message, kind, {
+      metadata,
+      cause,
+      prefix: "Gql"
     });
   }
 
 }
 
+/**
+ * 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 GqlError("Failed to parse response", GqlErrors.Parse, {
+      metadata: {
+        statusCode: response.status,
+        bodyText
+      },
+      cause: e
+    });
+  } // Check for a bad status code.
+
+
+  if (response.status >= 300) {
+    throw new GqlError("Response unsuccessful", GqlErrors.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 GqlError("Server response missing", GqlErrors.BadResponse, {
+      metadata: {
+        statusCode: response.status,
+        result
+      }
+    });
+  } // If the response payload has errors, throw an error.
+
+
+  if (result.errors != null && Array.isArray(result.errors) && result.errors.length > 0) {
+    throw new GqlError("GraphQL errors", GqlErrors.ErrorResult, {
+      metadata: {
+        statusCode: response.status,
+        result
+      }
+    });
+  } // We got here, so return the data.
+
+
+  return result.data;
+};
+
+/**
+ * Hook to obtain a gqlFetch function for performing GraphQL requests.
+ *
+ * The fetch function will resolve null if the request was aborted, otherwise
+ * it will resolve the data returned by the GraphQL server.
+ */
+const useGql = () => {
+  // This hook only works if the `GqlRouter` has been used to setup context.
+  const gqlRouterContext = useContext(GqlRouterContext);
+
+  if (gqlRouterContext == null) {
+    throw new GqlError("No GqlRouter", GqlErrors.Internal);
+  }
+
+  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.
+
+  const gqlFetch = useMemo(() => (operation, options = Object.freeze({})) => {
+    const {
+      variables,
+      context
+    } = options; // Invoke the fetch and extract the data.
+
+    return fetch(operation, variables, _extends({}, defaultContext, context)).then(getGqlDataFromResponse, 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;
+      }
+    });
+  }, [fetch, defaultContext]);
+  return gqlFetch;
+};
+
 const initializeCache = source => ResponseCache.Default.initialize(source);
 const fulfillAllDataRequests = () => {
   if (!Server.isServerSide()) {
@@ -985,4 +921,4 @@ const hasUnfulfilledRequests = () => {
 const removeFromCache = (handler, options) => ResponseCache.Default.remove(handler, options);
 const removeAllFromCache = (handler, predicate) => ResponseCache.Default.removeAll(handler, predicate);
 
-export { Data, InterceptCache, InterceptData, NoCache, RequestHandler, TrackData, fulfillAllDataRequests, hasUnfulfilledRequests, initializeCache, removeAllFromCache, removeFromCache };
+export { Data, GqlError, GqlErrors, GqlRouter, InterceptData, RequestHandler, TrackData, fulfillAllDataRequests, hasUnfulfilledRequests, initializeCache, removeAllFromCache, removeFromCache, useData, useGql };