@khanacademy/wonder-blocks-data 3.1.2 → 5.0.0

package/dist/es/index.js

@@ -1,141 +1,101 @@
 import { Server } from '@khanacademy/wonder-blocks-core';
+import { KindError, Errors, clone } from '@khanacademy/wonder-stuff-core';
 import * as React from 'react';
-import { useState, useContext, useRef, useEffect, useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 import _extends from '@babel/runtime/helpers/extends';
-import { Errors, KindError } from '@khanacademy/wonder-stuff-core';
 
-function deepClone(source) {
-  /**
-   * We want to deep clone the source cache to dodge mutations by external
-   * references. So we serialize the source cache to JSON and parse it
-   * back into a new object.
-   *
-   * NOTE: This doesn't work for get/set property accessors.
-   */
-  const serializedInitCache = JSON.stringify(source);
-  const cloneInitCache = JSON.parse(serializedInitCache);
-  return Object.freeze(cloneInitCache);
-}
 /**
- * INTERNAL USE ONLY
- *
- * Special case cache implementation for the memory cache.
- *
- * This is only used within our framework for SSR (see ./response-cache.js).
+ * Describe an in-memory cache.
  */
+class ScopedInMemoryCache {
+  constructor(initialCache = Object.freeze({})) {
+    this.set = (scope, id, value) => {
+      var _this$_cache$scope;
 
+      if (!id || typeof id !== "string") {
+        throw new KindError("id must be non-empty string", Errors.InvalidInput);
+      }
 
-class MemoryCache {
-  constructor(source = null) {
-    this.store = (handler, options, entry) => {
-      const requestType = handler.type;
-      const frozenEntry = Object.freeze(entry); // Ensure we have a cache location for this handler type.
+      if (!scope || typeof scope !== "string") {
+        throw new KindError("scope must be non-empty string", Errors.InvalidInput);
+      }
 
-      this._cache[requestType] = this._cache[requestType] || {}; // Cache the data.
+      if (typeof value === "function") {
+        throw new KindError("value must be a non-function value", Errors.InvalidInput);
+      }
 
-      const key = handler.getKey(options);
-      this._cache[requestType][key] = frozenEntry;
+      this._cache[scope] = (_this$_cache$scope = this._cache[scope]) != null ? _this$_cache$scope : {};
+      this._cache[scope][id] = Object.freeze(clone(value));
     };
 
-    this.retrieve = (handler, options) => {
-      const requestType = handler.type; // Get the internal subcache for the handler.
+    this.get = (scope, id) => {
+      var _this$_cache$scope$id, _this$_cache$scope2;
 
-      const handlerCache = this._cache[requestType];
+      return (_this$_cache$scope$id = (_this$_cache$scope2 = this._cache[scope]) == null ? void 0 : _this$_cache$scope2[id]) != null ? _this$_cache$scope$id : null;
+    };
 
-      if (!handlerCache) {
-        return null;
-      } // Get the response.
+    this.purge = (scope, id) => {
+      var _this$_cache$scope3;
 
+      if (!((_this$_cache$scope3 = this._cache[scope]) != null && _this$_cache$scope3[id])) {
+        return;
+      }
 
-      const key = handler.getKey(options);
-      const internalEntry = handlerCache[key];
+      delete this._cache[scope][id];
 
-      if (internalEntry == null) {
-        return null;
+      if (Object.keys(this._cache[scope]).length === 0) {
+        delete this._cache[scope];
       }
-
-      return internalEntry;
     };
 
-    this.remove = (handler, options) => {
-      const requestType = handler.type; // NOTE(somewhatabstract): We could invoke removeAll with a predicate
-      // to match the key of the entry we're removing, but that's an
-      // inefficient way to remove a single item, so let's not do that.
-      // Get the internal subcache for the handler.
-
-      const handlerCache = this._cache[requestType];
-
-      if (!handlerCache) {
-        return false;
-      } // Get the entry.
-
-
-      const key = handler.getKey(options);
-      const internalEntry = handlerCache[key];
+    this.purgeScope = (scope, predicate) => {
+      if (!this._cache[scope]) {
+        return;
+      }
 
-      if (internalEntry == null) {
-        return false;
-      } // Delete the entry.
+      if (predicate == null) {
+        delete this._cache[scope];
+        return;
+      }
 
+      for (const key of Object.keys(this._cache[scope])) {
+        if (predicate(key, this._cache[scope][key])) {
+          delete this._cache[scope][key];
+        }
+      }
 
-      delete handlerCache[key];
-      return true;
+      if (Object.keys(this._cache[scope]).length === 0) {
+        delete this._cache[scope];
+      }
     };
 
-    this.removeAll = (handler, predicate) => {
-      const requestType = handler.type; // Get the internal subcache for the handler.
-
-      const handlerCache = this._cache[requestType];
-
-      if (!handlerCache) {
-        return 0;
+    this.purgeAll = predicate => {
+      if (predicate == null) {
+        this._cache = {};
+        return;
       }
 
-      let removedCount = 0;
-
-      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];
+      for (const scope of Object.keys(this._cache)) {
+        this.purgeScope(scope, (id, value) => predicate(scope, id, value));
       }
-
-      return removedCount;
     };
 
-    this.cloneData = () => {
+    this.clone = () => {
       try {
-        return deepClone(this._cache);
+        return clone(this._cache);
       } catch (e) {
         throw new Error(`An error occurred while trying to clone the cache: ${e}`);
       }
     };
 
-    this._cache = {};
-
-    if (source != null) {
-      try {
-        /**
-         * Object.assign only performs a shallow clone.
-         * So we deep clone it and then assign the clone values to our
-         * internal cache.
-         */
-        const cloneInitCache = deepClone(source);
-        Object.assign(this._cache, cloneInitCache);
-      } catch (e) {
-        throw new Error(`An error occurred trying to initialize from a response cache snapshot: ${e}`);
-      }
+    try {
+      this._cache = clone(initialCache);
+    } catch (e) {
+      throw new KindError(`An error occurred trying to initialize from a response cache snapshot: ${e}`, Errors.InvalidInput);
     }
   }
   /**
-   * Indicate if this cache is being used or now.
+   * Indicate if this cache is being used or not.
    *
    * When the cache has entries, returns `true`; otherwise, returns `false`.
    */
@@ -144,13 +104,19 @@ class MemoryCache {
   get inUse() {
     return Object.keys(this._cache).length > 0;
   }
+  /**
+   * Set a value in the cache.
+   */
+
 
 }
 
+const DefaultScope = "default";
 /**
  * The default instance is stored here.
  * It's created below in the Default() static property.
  */
+
 let _default$2;
 /**
  * Implements the response cache.
@@ -159,10 +125,10 @@ let _default$2;
  */
 
 
-class ResponseCache {
+class SsrCache {
   static get Default() {
     if (!_default$2) {
-      _default$2 = new ResponseCache();
+      _default$2 = new SsrCache();
     }
 
     return _default$2;
@@ -174,31 +140,29 @@ class ResponseCache {
         throw new Error("Cannot initialize data response cache more than once");
       }
 
-      try {
-        this._hydrationCache = new MemoryCache(source);
-      } catch (e) {
-        throw new Error(`An error occurred trying to initialize the data response cache: ${e}`);
-      }
+      this._hydrationCache = new ScopedInMemoryCache({
+        // $FlowIgnore[incompatible-call]
+        [DefaultScope]: source
+      });
     };
 
-    this.cacheData = (handler, options, data) => this._setCacheEntry(handler, options, {
+    this.cacheData = (id, data, hydrate) => this._setCachedResponse(id, {
       data
-    });
+    }, hydrate);
 
-    this.cacheError = (handler, options, error) => {
+    this.cacheError = (id, error, hydrate) => {
       const errorMessage = typeof error === "string" ? error : error.message;
-      return this._setCacheEntry(handler, options, {
+      return this._setCachedResponse(id, {
         error: errorMessage
-      });
+      }, hydrate);
     };
 
-    this.getEntry = (handler, options) => {
+    this.getEntry = id => {
+      var _this$_ssrOnlyCache$g, _this$_ssrOnlyCache;
+
       // Get the cached entry for this value.
-      // If the handler wants WB Data to hydrate (i.e. handler.hydrate is
-      // true), we use our hydration cache. Otherwise, if we're server-side
-      // we use our SSR-only cache. Otherwise, there's no entry to return.
-      const cache = handler.hydrate ? this._hydrationCache : Server.isServerSide() ? this._ssrOnlyCache : undefined;
-      const internalEntry = cache == null ? void 0 : cache.retrieve(handler, options); // If we are not server-side and we hydrated something, let's clear
+      // We first look in the ssr cache and then the hydration cache.
+      const internalEntry = (_this$_ssrOnlyCache$g = (_this$_ssrOnlyCache = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache.get(DefaultScope, id)) != null ? _this$_ssrOnlyCache$g : this._hydrationCache.get(DefaultScope, id); // If we are not server-side and we hydrated something, let's clear
       // that from the hydration cache to save memory.
 
       if (this._ssrOnlyCache == null && internalEntry != null) {
@@ -208,48 +172,71 @@ class ResponseCache {
         // that's not an expected use-case. If two different places use the
         // same handler and options (i.e. the same request), then the
         // handler should cater to that to ensure they share the result.
-        this._hydrationCache.remove(handler, options);
-      }
+        this._hydrationCache.purge(DefaultScope, id);
+      } // Getting the typing right between the in-memory cache and this
+      // is hard. Just telling flow it's OK.
+      // $FlowIgnore[incompatible-return]
+
 
       return internalEntry;
     };
 
-    this.remove = (handler, options) => {
-      var _this$_ssrOnlyCache$r, _this$_ssrOnlyCache;
+    this.remove = id => {
+      var _this$_ssrOnlyCache$p, _this$_ssrOnlyCache2;
 
       // NOTE(somewhatabstract): We could invoke removeAll with a predicate
       // to match the key of the entry we're removing, but that's an
       // inefficient way to remove a single item, so let's not do that.
       // Delete the entry from the appropriate cache.
-      return handler.hydrate ? this._hydrationCache.remove(handler, options) : (_this$_ssrOnlyCache$r = (_this$_ssrOnlyCache = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache.remove(handler, options)) != null ? _this$_ssrOnlyCache$r : false;
+      return this._hydrationCache.purge(DefaultScope, id) || ((_this$_ssrOnlyCache$p = (_this$_ssrOnlyCache2 = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache2.purge(DefaultScope, id)) != null ? _this$_ssrOnlyCache$p : false);
     };
 
-    this.removeAll = (handler, predicate) => {
-      var _this$_ssrOnlyCache$r2, _this$_ssrOnlyCache2;
+    this.removeAll = predicate => {
+      var _this$_ssrOnlyCache3;
+
+      const realPredicate = predicate ? // We know what we're putting into the cache so let's assume it
+      // conforms.
+      // $FlowIgnore[incompatible-call]
+      (_, key, cachedEntry) => predicate(key, cachedEntry) : undefined; // Apply the predicate to what we have in our caches.
 
-      // 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._hydrationCache.purgeAll(realPredicate);
+
+      (_this$_ssrOnlyCache3 = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache3.purgeAll(realPredicate);
     };
 
     this.cloneHydratableData = () => {
+      var _cache$DefaultScope;
+
       // We return our hydration cache only.
-      return this._hydrationCache.cloneData();
+      const cache = this._hydrationCache.clone(); // If we're empty, we still want to return an object, so we default
+      // to an empty object.
+      // We only need the default scope out of our scoped in-memory cache.
+      // We know that it conforms to our expectations.
+      // $FlowIgnore[incompatible-return]
+
+
+      return (_cache$DefaultScope = cache[DefaultScope]) != null ? _cache$DefaultScope : {};
     };
 
-    this._ssrOnlyCache = Server.isServerSide() ? ssrOnlyCache || new MemoryCache() : undefined;
-    this._hydrationCache = hydrationCache || new MemoryCache();
+    this._ssrOnlyCache = Server.isServerSide() ? ssrOnlyCache || new ScopedInMemoryCache() : undefined;
+    this._hydrationCache = hydrationCache || new ScopedInMemoryCache();
   }
 
-  _setCacheEntry(handler, options, entry) {
+  _setCachedResponse(id, entry, hydrate) {
     const frozenEntry = Object.freeze(entry);
 
-    if (this._ssrOnlyCache != null) {
+    if (Server.isServerSide()) {
       // We are server-side.
       // We need to store this value.
-      if (handler.hydrate) {
-        this._hydrationCache.store(handler, options, frozenEntry);
+      if (hydrate) {
+        this._hydrationCache.set(DefaultScope, id, frozenEntry);
       } else {
-        this._ssrOnlyCache.store(handler, options, frozenEntry);
+        var _this$_ssrOnlyCache4;
+
+        // Usually, when server-side, this cache will always be present.
+        // We do fake server-side in our doc example though, when it
+        // won't be.
+        (_this$_ssrOnlyCache4 = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache4.set(DefaultScope, id, frozenEntry);
       }
     }
 
@@ -278,23 +265,14 @@ class RequestFulfillment {
   constructor(responseCache = undefined) {
     this._requests = {};
 
-    this._getHandlerSubcache = handler => {
-      if (!this._requests[handler.type]) {
-        this._requests[handler.type] = {};
-      }
-
-      return this._requests[handler.type];
-    };
-
-    this.fulfill = (handler, options) => {
-      const handlerRequests = this._getHandlerSubcache(handler);
-
-      const key = handler.getKey(options);
+    this.fulfill = (id, {
+      handler,
+      hydrate: _hydrate = true
+    }) => {
       /**
        * If we have an inflight request, we'll provide that.
        */
-
-      const inflight = handlerRequests[key];
+      const inflight = this._requests[id];
 
       if (inflight) {
         return inflight;
@@ -310,38 +288,51 @@ class RequestFulfillment {
       } = this._responseCache;
 
       try {
-        const request = handler.fulfillRequest(options).then(data => {
-          delete handlerRequests[key];
+        const request = handler().then(data => {
+          delete this._requests[id];
+
+          if (data == null) {
+            // Request aborted. We won't cache this.
+            return null;
+          }
           /**
            * Let's cache the data!
            *
            * NOTE: This only caches when we're server side.
            */
 
-          return cacheData(handler, options, data);
+
+          return cacheData(id, data, _hydrate);
         }).catch(error => {
-          delete handlerRequests[key];
+          delete this._requests[id];
           /**
            * Let's cache the error!
            *
            * NOTE: This only caches when we're server side.
            */
 
-          return cacheError(handler, options, error);
+          return cacheError(id, error, _hydrate);
         });
-        handlerRequests[key] = request;
+        this._requests[id] = request;
         return request;
       } catch (e) {
         /**
          * In this case, we don't cache an inflight request, because there
          * really isn't one.
          */
-        return Promise.resolve(cacheError(handler, options, e));
+        return Promise.resolve(cacheError(id, e, _hydrate));
       }
     };
 
-    this._responseCache = responseCache || ResponseCache.Default;
+    this._responseCache = responseCache || SsrCache.Default;
   }
+  /**
+   * Get a promise of a request for a given handler and options.
+   *
+   * This will return an inflight request if one exists, otherwise it will
+   * make a new request. Inflight requests are deleted once they resolve.
+   */
+
 
 }
 
@@ -378,48 +369,31 @@ class RequestTracker {
 
 
   constructor(responseCache = undefined) {
-    this._trackedHandlers = {};
     this._trackedRequests = {};
 
-    this.trackDataRequest = (handler, options) => {
-      const key = handler.getKey(options);
-      const type = handler.type;
-      /**
-       * Make sure we have stored the handler for use when fulfilling requests.
-       */
-
-      if (this._trackedHandlers[type] == null) {
-        this._trackedHandlers[type] = handler;
-        this._trackedRequests[type] = {};
-      }
+    this.trackDataRequest = (id, handler, hydrate) => {
       /**
        * If we don't already have this tracked, then let's track it.
        */
-
-
-      if (this._trackedRequests[type][key] == null) {
-        this._trackedRequests[type][key] = options;
+      if (this._trackedRequests[id] == null) {
+        this._trackedRequests[id] = {
+          handler,
+          hydrate
+        };
       }
     };
 
     this.reset = () => {
-      this._trackedHandlers = {};
       this._trackedRequests = {};
     };
 
     this.fulfillTrackedRequests = () => {
       const promises = [];
 
-      for (const handlerType of Object.keys(this._trackedHandlers)) {
-        const handler = this._trackedHandlers[handlerType]; // For each handler, we will perform the request fulfillments!
-
-        const requests = this._trackedRequests[handlerType];
-
-        for (const requestKey of Object.keys(requests)) {
-          const promise = this._requestFulfillment.fulfill(handler, requests[requestKey]);
+      for (const requestKey of Object.keys(this._trackedRequests)) {
+        const promise = this._requestFulfillment.fulfill(requestKey, this._trackedRequests[requestKey]);
 
-          promises.push(promise);
-        }
+        promises.push(promise);
       }
       /**
        * Clear out our tracked info.
@@ -448,7 +422,7 @@ class RequestTracker {
       return Promise.all(promises).then(() => this._responseCache.cloneHydratableData());
     };
 
-    this._responseCache = responseCache || ResponseCache.Default;
+    this._responseCache = responseCache || SsrCache.Default;
     this._requestFulfillment = new RequestFulfillment(responseCache);
   }
   /**
@@ -475,47 +449,13 @@ class RequestTracker {
    * Calling this method marks tracked requests as fulfilled; requests are
    * removed from the list of tracked requests by calling this method.
    *
-   * @returns {Promise<Cache>} A frozen cache of the data that was cached
-   * as a result of fulfilling the tracked requests.
+   * @returns {Promise<ResponseCache>} The promise of the data that was
+   * cached as a result of fulfilling the tracked requests.
    */
 
 
 }
 
-/**
- * Base implementation for creating a request handler.
- *
- * Provides a base implementation of the `IRequestHandler` base class for
- * use with the Wonder Blocks Data framework.
- */
-class RequestHandler {
-  constructor(type, hydrate = true) {
-    this._type = type;
-    this._hydrate = !!hydrate;
-  }
-
-  get type() {
-    return this._type;
-  }
-
-  get hydrate() {
-    return this._hydrate;
-  }
-
-  getKey(options) {
-    try {
-      return options === undefined ? "undefined" : JSON.stringify(options);
-    } catch (e) {
-      throw new Error(`Failed to auto-generate key: ${e}`);
-    }
-  }
-
-  fulfillRequest(options) {
-    throw new Error("Not implemented");
-  }
-
-}
-
 /**
  * Component to enable data request tracking when server-side rendering.
  */
@@ -533,16 +473,89 @@ class TrackData extends React.Component {
 }
 
 /**
- * InterceptContext defines a map from handler type to interception methods.
+ * Hook to perform an asynchronous action during server-side rendering.
+ *
+ * This hook registers an asynchronous action to be performed during
+ * server-side rendering. The action is performed only once, and the result
+ * is cached against the given identifier so that subsequent calls return that
+ * cached result allowing components to render more of the component.
+ *
+ * This hook requires the Wonder Blocks Data functionality for resolving
+ * pending requests, as well as support for the hydration cache to be
+ * embedded into a page so that the result can by hydrated (if that is a
+ * requirement).
+ *
+ * The asynchronous action is never invoked on the client-side.
+ */
+const useServerEffect = (requestId, handler, hydrate = true) => {
+  // If we're server-side or hydrating, we'll have a cached entry to use.
+  // So we get that and use it to initialize our state.
+  // This works in both hydration and SSR because the very first call to
+  // this will have cached data in those cases as it will be present on the
+  // initial render - and subsequent renders on the client it will be null.
+  const cachedResult = SsrCache.Default.getEntry(requestId); // We only track data requests when we are server-side and we don't
+  // already have a result, as given by the cachedData (which is also the
+  // initial value for the result state).
+
+  const maybeTrack = useContext(TrackerContext);
+
+  if (cachedResult == null && Server.isServerSide()) {
+    maybeTrack == null ? void 0 : maybeTrack(requestId, handler, hydrate);
+  }
+
+  return cachedResult;
+};
+
+/**
+ * InterceptContext defines a map from request ID to interception methods.
  *
  * INTERNAL USE ONLY
  */
-const InterceptContext = /*#__PURE__*/React.createContext({});
+const InterceptContext = /*#__PURE__*/React.createContext([]);
+
+/**
+ * Allow request handling to be intercepted.
+ *
+ * Hook to take a uniquely identified request handler and return a
+ * method that will support request interception from the InterceptRequest
+ * component.
+ *
+ * If you want request interception to be supported with `useServerEffect` or
+ * any client-side effect that uses the handler, call this first to generate
+ * an intercepted handler, and then invoke `useServerEffect` (or other things)
+ * with that intercepted handler.
+ */
+const useRequestInterception = (requestId, handler) => {
+  // Get the interceptors that have been registered.
+  const interceptors = React.useContext(InterceptContext); // Now, we need to create a new handler that will check if the
+  // request is intercepted before ultimately calling the original handler
+  // if nothing intercepted it.
+  // We memoize this so that it only changes if something related to it
+  // changes.
+
+  const interceptedHandler = React.useMemo(() => () => {
+    // Call the interceptors from closest to furthest.
+    // If one returns a non-null result, then we keep that.
+    const interceptResponse = interceptors.reduceRight((prev, interceptor) => {
+      if (prev != null) {
+        return prev;
+      }
+
+      return interceptor(requestId);
+    }, null); // If nothing intercepted this request, invoke the original handler.
+    // NOTE: We can't guarantee all interceptors return the same type
+    // as our handler, so how can flow know? Let's just suppress that.
+    // $FlowFixMe[incompatible-return]
+
+    return interceptResponse != null ? interceptResponse : handler();
+  }, [handler, interceptors, requestId]);
+  return interceptedHandler;
+};
 
 /**
  * Turns a cache entry into a stateful result.
  */
-const resultFromCacheEntry = cacheEntry => {
+const resultFromCachedResponse = cacheEntry => {
   // No cache entry means we didn't load one yet.
   if (cacheEntry == null) {
     return {
@@ -555,113 +568,82 @@ const resultFromCacheEntry = cacheEntry => {
     error
   } = cacheEntry;
 
-  if (data != null) {
+  if (error != null) {
     return {
-      status: "success",
-      data
+      status: "error",
+      error
     };
   }
 
-  if (error == null) {
-    // We should never get here ever.
+  if (data != null) {
     return {
-      status: "error",
-      error: "Loaded result has invalid state where data and error are missing"
+      status: "success",
+      data
     };
   }
 
   return {
-    status: "error",
-    error
+    status: "aborted"
   };
 };
 
-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;
-    }
-
-    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 = useContext(TrackerContext);
-
-  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 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 */
+/**
+ * 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 = ({
+  requestId,
+  handler,
+  children,
+  hydrate,
+  showOldDataWhileLoading,
+  alwaysRequestOnHydration
+}) => {
+  const interceptedHandler = useRequestInterception(requestId, handler);
+  const hydrateResult = useServerEffect(requestId, interceptedHandler, hydrate);
+  const [currentResult, setResult] = React.useState(hydrateResult); // Here we make sure the request still occurs client-side as needed.
+  // This is for legacy usage that expects this. Eventually we will want
+  // to deprecate.
+
+  React.useEffect(() => {
+    // This is here until I can do a better documentation example for
+    // the TrackData docs.
+    // istanbul ignore next
     if (Server.isServerSide()) {
       return;
-    } // Update our refs to the current handler and key.
+    } // We don't bother with this if we have hydration data and we're not
+    // forcing a request on hydration.
+    // We don't care if these things change after the first render,
+    // so we don't want them in the inputs array.
 
 
-    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
+    if (!alwaysRequestOnHydration && (hydrateResult == null ? void 0 : hydrateResult.data) != null) {
+      return;
+    } // If we're not hydrating a result and we're not going to render
+    // with old data until we're loaded, we want to make sure we set our
     // result to null so that we're in the loading state.
 
-    if (cachedResult == null) {
+
+    if (!showOldDataWhileLoading) {
       // 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.
+    // We don't need to use our built-in request fulfillment here if we
+    // don't want, but it does mean we'll share inflight requests for the
+    // same ID and the result will be in the same format as the
+    // hydrated value.
 
 
     let cancel = false;
-    RequestFulfillment.Default.fulfill(getMaybeInterceptedHandler(), options).then(updateEntry => {
+    RequestFulfillment.Default.fulfill(requestId, {
+      handler: interceptedHandler
+    }).then(result => {
       if (cancel) {
         return;
       }
 
-      setResult(updateEntry);
+      setResult(result);
       return;
     }).catch(e => {
       if (cancel) {
@@ -676,68 +658,129 @@ const useData = (handler, options) => {
 
       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.
+    }; // If the handler changes, we don't care. The ID is what indicates
+    // the request that should be made and folks shouldn't be changing the
+    // handler without changing the ID as well.
+    // In addition, we don't want to include hydrateResult nor
+    // alwaysRequestOnHydration as them changinng after the first pass
+    // is irrelevant.
+    // Finally, we don't want to include showOldDataWhileLoading as that
+    // changing on its own is also not relevant. It only matters if the
+    // request itself changes. All of which is to say that we only
+    // run this effect for the ID changing.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [handler, handler.getKey(options), interceptor]);
-  return resultFromCacheEntry(result);
+  }, [requestId]);
+  return children(resultFromCachedResponse(currentResult));
 };
 
 /**
- * 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.
+ * This component provides a mechanism to intercept data requests.
+ * This is for use in testing.
  *
  * This component is not recommended for use in production code as it
  * can prevent predictable functioning of the Wonder Blocks Data framework.
  * One possible side-effect is that inflight requests from the interceptor could
- * be picked up by `Data` component requests of the same handler type from
- * outside the children of this component.
+ * be picked up by `Data` component requests from outside the children of this
+ * component.
  *
- * These components do not chain. If a different `InterceptData` instance is
- * rendered within this one that intercepts the same handler type, then that
- * new instance will replace this interceptor for its children. All methods
- * will be replaced.
+ * Interceptions within the same component tree are chained such that the
+ * interceptor closest to the intercepted request is called first, and the
+ * furthest interceptor is called last.
  */
-class InterceptData extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement(InterceptContext.Consumer, null, value => {
-      const handlerType = this.props.handler.type;
+const InterceptRequests = ({
+  interceptor,
+  children
+}) => {
+  const interceptors = React.useContext(InterceptContext);
+  const updatedInterceptors = React.useMemo( // We could build this in reverse order so that our hook that does
+  // the interception didn't have to use reduceRight, but I think it
+  // is easier to think about if we do this in component tree order.
+  () => [].concat(interceptors, [interceptor]), [interceptors, interceptor]);
+  return /*#__PURE__*/React.createElement(InterceptContext.Provider, {
+    value: updatedInterceptors
+  }, children);
+};
 
-      const interceptor = _extends({}, value[handlerType], {
-        fulfillRequest: this.props.fulfillRequest
-      });
+/**
+ * This is the cache.
+ * It's incredibly complex.
+ * Very in-memory. So cache. Such complex. Wow.
+ */
+const cache = new ScopedInMemoryCache();
+/**
+ * Clear the in-memory cache or a single scope within it.
+ */
 
-      const newValue = _extends({}, value, {
-        [handlerType]: interceptor
-      });
+const clearSharedCache = (scope = "") => {
+  // If we have a valid scope (empty string is falsy), then clear that scope.
+  if (scope && typeof scope === "string") {
+    cache.purgeScope(scope);
+  } else {
+    // Just reset the object. This should be sufficient.
+    cache.purgeAll();
+  }
+};
+/**
+ * Hook to retrieve data from and store data in an in-memory cache.
+ *
+ * @returns {[?ReadOnlyCacheValue, CacheValueFn]}
+ * Returns an array containing the current cache entry (or undefined), a
+ * function to set the cache entry (passing null or undefined to this function
+ * will delete the entry).
+ *
+ * To clear a single scope within the cache or the entire cache,
+ * the `clearScopedCache` export is available.
+ *
+ * NOTE: Unlike useState or useReducer, we don't automatically update folks
+ * if the value they reference changes. We might add it later (if we need to),
+ * but the likelihood here is that things won't be changing in this cache in a
+ * way where we would need that. If we do (and likely only in specific
+ * circumstances), we should consider adding a simple boolean useState that can
+ * be toggled to cause a rerender whenever the referenced cached data changes
+ * so that callers can re-render on cache changes. However, we should make
+ * sure this toggling is optional - or we could use a callback argument, to
+ * achieve this on an as-needed basis.
+ */
 
-      return /*#__PURE__*/React.createElement(InterceptContext.Provider, {
-        value: newValue
-      }, this.props.children);
-    });
+const useSharedCache = (id, scope, initialValue) => {
+  // Verify arguments.
+  if (!id || typeof id !== "string") {
+    throw new KindError("id must be a non-empty string", Errors.InvalidInput);
   }
 
-}
+  if (!scope || typeof scope !== "string") {
+    throw new KindError("scope must be a non-empty string", Errors.InvalidInput);
+  } // Memoize our APIs.
+  // This one allows callers to set or replace the cached value.
+
+
+  const cacheValue = React.useMemo(() => value => value == null ? cache.purge(scope, id) : cache.set(scope, id, value), [id, scope]); // We don't memo-ize the current value, just in case the cache was updated
+  // since our last run through. Also, our cache does not know what type it
+  // stores, so we have to cast it to the type we're exporting. This is a
+  // dev time courtesy, rather than a runtime thing.
+  // $FlowIgnore[incompatible-type]
+
+  let currentValue = cache.get(scope, id); // If we have an initial value, we need to add it to the cache
+  // and use it as our current value.
+
+  if (currentValue == null && initialValue !== undefined) {
+    // Get the initial value.
+    const value = typeof initialValue === "function" ? initialValue() : initialValue; // Update the cache.
+
+    cacheValue(value); // Make sure we return this value as our current value.
+
+    currentValue = value;
+  } // Now we have everything, let's return it.
+
+
+  return [currentValue, cacheValue];
+};
 
 const GqlRouterContext = /*#__PURE__*/React.createContext(null);
 
@@ -865,6 +908,10 @@ const getGqlDataFromResponse = async response => {
  *
  * The fetch function will resolve null if the request was aborted, otherwise
  * it will resolve the data returned by the GraphQL server.
+ *
+ * Context is merged with the default context provided to the GqlRouter.
+ * Values in the partial context given to the returned fetch function will
+ * only be included if they have a value other than undefined.
  */
 const useGql = () => {
   // This hook only works if the `GqlRouter` has been used to setup context.
@@ -886,10 +933,22 @@ const useGql = () => {
   const gqlFetch = useMemo(() => (operation, options = Object.freeze({})) => {
     const {
       variables,
-      context
-    } = options; // Invoke the fetch and extract the data.
+      context = {}
+    } = options; // Let's merge the partial context of the fetch with the
+    // default context. We deliberately don't spread because
+    // spreading would overwrite default context values with
+    // undefined if the partial context includes a value explicitly
+    // set to undefined. Instead, we use a map/reduce of keys.
+
+    const mergedContext = Object.keys(context).reduce((acc, key) => {
+      if (context[key] !== undefined) {
+        acc[key] = context[key];
+      }
+
+      return acc;
+    }, _extends({}, defaultContext)); // Invoke the fetch and extract the data.
 
-    return fetch(operation, variables, _extends({}, defaultContext, context)).then(getGqlDataFromResponse, error => {
+    return fetch(operation, variables, mergedContext).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
@@ -906,7 +965,7 @@ const useGql = () => {
   return gqlFetch;
 };
 
-const initializeCache = source => ResponseCache.Default.initialize(source);
+const initializeCache = source => SsrCache.Default.initialize(source);
 const fulfillAllDataRequests = () => {
   if (!Server.isServerSide()) {
     return Promise.reject(new Error("Data requests are not tracked when client-side"));
@@ -921,7 +980,7 @@ const hasUnfulfilledRequests = () => {
 
   return RequestTracker.Default.hasUnfulfilledRequests;
 };
-const removeFromCache = (handler, options) => ResponseCache.Default.remove(handler, options);
-const removeAllFromCache = (handler, predicate) => ResponseCache.Default.removeAll(handler, predicate);
+const removeFromCache = id => SsrCache.Default.remove(id);
+const removeAllFromCache = predicate => SsrCache.Default.removeAll(predicate);
 
-export { Data, GqlError, GqlErrors, GqlRouter, InterceptData, RequestHandler, TrackData, fulfillAllDataRequests, hasUnfulfilledRequests, initializeCache, removeAllFromCache, removeFromCache, useData, useGql };
+export { Data, GqlError, GqlErrors, GqlRouter, InterceptRequests, ScopedInMemoryCache, TrackData, clearSharedCache, fulfillAllDataRequests, hasUnfulfilledRequests, initializeCache, removeAllFromCache, removeFromCache, useGql, useRequestInterception, useServerEffect, useSharedCache };