@khanacademy/wonder-blocks-data 2.3.4 → 3.0.0

package/dist/es/index.js

@@ -1,5 +1,6 @@
 import { Server } from '@khanacademy/wonder-blocks-core';
-import { createContext, Component, createElement } from 'react';
+import * as React from 'react';
+import { useState, useContext, useRef, useEffect } from 'react';
 import _extends from '@babel/runtime/helpers/extends';
 
 function deepClone(source) {
@@ -19,9 +20,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 +28,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 +88,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 +133,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 +146,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 +160,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 +192,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 +313,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 +322,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 +349,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 +365,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 +488,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 +497,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 +518,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 +532,175 @@ 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);
-  }
+const InterceptContext = /*#__PURE__*/React.createContext({});
 
-  componentDidMount() {
-    this._mounted = true;
+/**
+ * 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 {
+      status: "loading"
+    };
   }
 
-  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);
-    }
+  const {
+    data,
+    error
+  } = cacheEntry;
 
-    return this.state.loading !== nextState.loading || this.state.data !== nextState.data || this.state.error !== nextState.error;
-  }
-
-  componentWillUnmount() {
-    this._mounted = false;
+  if (data != null) {
+    return {
+      status: "success",
+      data
+    };
   }
 
-  _propsMatch(otherProps) {
-    const {
-      handler,
-      options
-    } = this.props;
-    const {
-      handler: prevHandler,
-      options: prevOptions
-    } = otherProps;
-    return handler === prevHandler && handler.getKey(options) === prevHandler.getKey(prevOptions);
+  if (error == null) {
+    // We should never get here ever.
+    return {
+      status: "error",
+      error: "Loaded result has invalid state where data and error are missing"
+    };
   }
 
-  _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 {
+    status: "error",
+    error
+  };
+};
 
-        return null;
-      });
+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); // 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 = useContext(TrackerContext);
+
+  if (result == null && Server.isServerSide()) {
+    maybeTrack == null ? void 0 : maybeTrack(handler, options);
+  } // 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]; // 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 = useRef();
+  const keyRef = useRef();
+  const interceptorRef = useRef(); // This effect will ensure that we fulfill the request as desired.
+
+  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);
     }
-    /**
-     * 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 getMaybeInterceptedHandler = () => {
+      if (interceptor == null) {
+        return handler;
+      }
 
-    return {
-      loading: cachedData == null,
-      data: cachedData && cachedData.data,
-      error: cachedData && cachedData.error
-    };
-  }
-
-  _resultFromState() {
-    const {
-      loading,
-      data,
-      error
-    } = this.state;
+      const fulfillRequestFn = options => {
+        var _interceptor$fulfillR;
 
-    if (loading) {
-      return {
-        loading: true
+        return (_interceptor$fulfillR = interceptor.fulfillRequest(options)) != null ? _interceptor$fulfillR : handler.fulfillRequest(options);
       };
-    }
 
-    if (data != null) {
       return {
-        loading: false,
-        data
+        fulfillRequest: fulfillRequestFn,
+        getKey: options => handler.getKey(options),
+        type: handler.type,
+        hydrate: handler.hydrate
       };
-    }
+    }; // 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.
 
-    if (error == null) {
-      // We should never get here ever.
-      throw new Error("Loaded result has invalid state where data and error are missing");
-    }
 
-    return {
-      loading: false,
-      error
-    };
-  }
-
-  _renderContent(result) {
-    const {
-      children
-    } = this.props;
-    return children(result);
-  }
+    let cancel = false;
+    RequestFulfillment.Default.fulfill(getMaybeInterceptedHandler(), options).then(updateEntry => {
+      if (cancel) {
+        return;
+      }
 
-  _renderWithTrackingContext(result) {
-    return /*#__PURE__*/createElement(TrackerContext.Consumer, null, track => {
+      setResult(updateEntry);
+      return;
+    }).catch(e => {
+      if (cancel) {
+        return;
+      }
       /**
-       * If data tracking wasn't enabled, don't do it.
+       * We should never get here as errors in fulfillment are part
+       * of the `then`, but if we do.
        */
-      if (track != null) {
-        track(this.props.handler, this.props.options);
-      }
+      // eslint-disable-next-line no-console
 
-      return this._renderContent(result);
-    });
-  }
-
-  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 (result.loading && Server.isServerSide()) {
-      return this._renderWithTrackingContext(result);
-    }
-
-    return this._renderContent(result);
-  }
-
-}
-
-/**
- * InterceptContext defines a map from handler type to interception methods.
- *
- * INTERNAL USE ONLY
- */
-const InterceptContext = /*#__PURE__*/createContext({});
+      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.
  */
-class Data extends 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 ResponseCache.Default.getEntry;
-    }
-
-    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.
-
-      const interceptedData = getEntry(options, cacheEntry); // 3. Return the appropriate response.
-
-      return interceptedData != null ? interceptedData : cacheEntry;
-    };
-  }
-
-  render() {
-    return /*#__PURE__*/createElement(InterceptContext.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__*/createElement(InternalData // $FlowIgnore[incompatible-type-arg]
-      , {
-        handler: handler,
-        options: this.props.options,
-        getEntry: getEntry
-      }, result => this.props.children(result));
-    });
-  }
-
-}
+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,57 +712,20 @@ class Data extends Component {
  * new instance will replace this interceptor for its children. All methods
  * will be replaced.
  */
-class InterceptData extends Component {
-  render() {
-    return /*#__PURE__*/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
-      });
-
-      const newValue = _extends({}, value, {
-        [handlerType]: interceptor
-      });
-
-      return /*#__PURE__*/createElement(InterceptContext.Provider, {
-        value: newValue
-      }, this.props.children);
-    });
-  }
-
-}
-
-/**
- * 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`.
- *
- * 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.
- */
-class InterceptCache 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], {
-        getEntry: this.props.getEntry
+        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);
     });
@@ -985,4 +751,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, InterceptData, RequestHandler, TrackData, fulfillAllDataRequests, hasUnfulfilledRequests, initializeCache, removeAllFromCache, removeFromCache, useData };