@khanacademy/wonder-blocks-data 6.0.0 → 7.0.1

package/dist/es/index.js

@@ -4,47 +4,14 @@ import _extends from '@babel/runtime/helpers/extends';
 import * as React from 'react';
 import { useContext, useRef, useMemo, useCallback } from 'react';
 
-/**
- * Error kinds for DataError.
- */
 const DataErrors = Object.freeze({
-  /**
-   * The kind of error is not known.
-   */
   Unknown: "Unknown",
-
-  /**
-   * The error is internal to the executing code.
-   */
   Internal: "Internal",
-
-  /**
-   * There was a problem with the provided input.
-   */
   InvalidInput: "InvalidInput",
-
-  /**
-   * A network error occurred.
-   */
   Network: "Network",
-
-  /**
-   * Response could not be parsed.
-   */
   Parse: "Parse",
-
-  /**
-   * An error that occurred during SSR and was hydrated from cache
-   */
   Hydrated: "Hydrated"
 });
-/**
- * An error from the Wonder Blocks Data API.
- *
- * Errors of this type will have names of the format:
- *     `${kind}DataError`
- */
-
 class DataError extends KindError {
   constructor(message, kind, {
     metadata,
@@ -59,27 +26,14 @@ class DataError extends KindError {
 
 }
 
-/**
- * Describe an in-memory cache.
- */
 class ScopedInMemoryCache {
   constructor(initialCache = {}) {
     this._cache = initialCache;
   }
-  /**
-   * Indicate if this cache is being used or not.
-   *
-   * When the cache has entries, returns `true`; otherwise, returns `false`.
-   */
-
 
   get inUse() {
     return Object.keys(this._cache).length > 0;
   }
-  /**
-   * Set a value in the cache.
-   */
-
 
   set(scope, id, value) {
     var _this$_cache$scope;
@@ -99,20 +53,12 @@ class ScopedInMemoryCache {
     this._cache[scope] = (_this$_cache$scope = this._cache[scope]) != null ? _this$_cache$scope : {};
     this._cache[scope][id] = value;
   }
-  /**
-   * Retrieve a value from the cache.
-   */
-
 
   get(scope, id) {
     var _this$_cache$scope$id, _this$_cache$scope2;
 
     return (_this$_cache$scope$id = (_this$_cache$scope2 = this._cache[scope]) == null ? void 0 : _this$_cache$scope2[id]) != null ? _this$_cache$scope$id : null;
   }
-  /**
-   * Purge an item from the cache.
-   */
-
 
   purge(scope, id) {
     var _this$_cache$scope3;
@@ -127,12 +73,6 @@ class ScopedInMemoryCache {
       delete this._cache[scope];
     }
   }
-  /**
-   * Purge a scope of items that match the given predicate.
-   *
-   * If the predicate is omitted, then all items in the scope are purged.
-   */
-
 
   purgeScope(scope, predicate) {
     if (!this._cache[scope]) {
@@ -154,12 +94,6 @@ class ScopedInMemoryCache {
       delete this._cache[scope];
     }
   }
-  /**
-   * Purge all items from the cache that match the given predicate.
-   *
-   * If the predicate is omitted, then all items in the cache are purged.
-   */
-
 
   purgeAll(predicate) {
     if (predicate == null) {
@@ -174,9 +108,6 @@ class ScopedInMemoryCache {
 
 }
 
-/**
- * Describe a serializable in-memory cache.
- */
 class SerializableInMemoryCache extends ScopedInMemoryCache {
   constructor(initialCache = {}) {
     try {
@@ -185,18 +116,10 @@ class SerializableInMemoryCache extends ScopedInMemoryCache {
       throw new DataError(`An error occurred trying to initialize from a response cache snapshot: ${e}`, DataErrors.InvalidInput);
     }
   }
-  /**
-   * Set a value in the cache.
-   */
-
 
   set(scope, id, value) {
     super.set(scope, id, Object.freeze(clone(value)));
   }
-  /**
-   * Clone the cache.
-   */
-
 
   clone() {
     try {
@@ -211,18 +134,8 @@ class SerializableInMemoryCache extends ScopedInMemoryCache {
 }
 
 const DefaultScope$2 = "default";
-/**
- * The default instance is stored here.
- * It's created below in the Default() static property.
- */
 
 let _default$2;
-/**
- * Implements the response cache.
- *
- * INTERNAL USE ONLY
- */
-
 
 class SsrCache {
   static get Default() {
@@ -240,7 +153,6 @@ class SsrCache {
       }
 
       this._hydrationCache = new SerializableInMemoryCache({
-        // $FlowIgnore[incompatible-call]
         [DefaultScope$2]: source
       });
     };
@@ -259,23 +171,11 @@ class SsrCache {
     this.getEntry = id => {
       var _this$_ssrOnlyCache$g, _this$_ssrOnlyCache;
 
-      // Get the cached entry for this value.
-      // We first look in the ssr cache and then the hydration cache.
-      const internalEntry = (_this$_ssrOnlyCache$g = (_this$_ssrOnlyCache = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache.get(DefaultScope$2, id)) != null ? _this$_ssrOnlyCache$g : this._hydrationCache.get(DefaultScope$2, id); // If we are not server-side and we hydrated something, let's clear
-      // that from the hydration cache to save memory.
+      const internalEntry = (_this$_ssrOnlyCache$g = (_this$_ssrOnlyCache = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache.get(DefaultScope$2, id)) != null ? _this$_ssrOnlyCache$g : this._hydrationCache.get(DefaultScope$2, id);
 
       if (this._ssrOnlyCache == null && internalEntry != null) {
-        // We now delete this from our hydration cache as we don't need it.
-        // This does mean that if another handler of the same type but
-        // without some sort of linked cache won't get the value, but
-        // that's not an expected use-case. If two different places use the
-        // same handler and options (i.e. the same request), then the
-        // handler should cater to that to ensure they share the result.
         this._hydrationCache.purge(DefaultScope$2, 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;
     };
@@ -283,20 +183,13 @@ class SsrCache {
     this.remove = id => {
       var _this$_ssrOnlyCache$p, _this$_ssrOnlyCache2;
 
-      // NOTE(somewhatabstract): We could invoke removeAll with a predicate
-      // to match the key of the entry we're removing, but that's an
-      // inefficient way to remove a single item, so let's not do that.
-      // Delete the entry from the appropriate cache.
       return this._hydrationCache.purge(DefaultScope$2, id) || ((_this$_ssrOnlyCache$p = (_this$_ssrOnlyCache2 = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache2.purge(DefaultScope$2, id)) != null ? _this$_ssrOnlyCache$p : false);
     };
 
     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.
+      const realPredicate = predicate ? (_, key, cachedEntry) => predicate(key, cachedEntry) : undefined;
 
       this._hydrationCache.purgeAll(realPredicate);
 
@@ -306,13 +199,7 @@ class SsrCache {
     this.cloneHydratableData = () => {
       var _cache$DefaultScope;
 
-      // We return our hydration cache only.
-      const cache = this._hydrationCache.clone(); // If we're empty, we still want to return an object, so we default
-      // to an empty object.
-      // We only need the default scope out of our scoped in-memory cache.
-      // We know that it conforms to our expectations.
-      // $FlowIgnore[incompatible-return]
-
+      const cache = this._hydrationCache.clone();
 
       return (_cache$DefaultScope = cache[DefaultScope$2]) != null ? _cache$DefaultScope : {};
     };
@@ -325,36 +212,21 @@ class SsrCache {
     const frozenEntry = Object.freeze(entry);
 
     if (Server.isServerSide()) {
-      // We are server-side.
-      // We need to store this value.
       if (hydrate) {
         this._hydrationCache.set(DefaultScope$2, id, frozenEntry);
       } else {
         var _this$_ssrOnlyCache4;
 
-        // Usually, when server-side, this cache will always be present.
-        // We do fake server-side in our doc example though, when it
-        // won't be.
         (_this$_ssrOnlyCache4 = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache4.set(DefaultScope$2, id, frozenEntry);
       }
     }
 
     return frozenEntry;
   }
-  /**
-   * Initialize the cache from a given cache state.
-   *
-   * This can only be called if the cache is not already in use.
-   */
-
 
 }
 
 let _default$1;
-/**
- * This fulfills a request, making sure that in-flight requests are shared.
- */
-
 
 class RequestFulfillment {
   constructor() {
@@ -364,18 +236,11 @@ class RequestFulfillment {
       handler,
       hydrate: _hydrate = true
     }) => {
-      /**
-       * If we have an inflight request, we'll provide that.
-       */
       const inflight = this._requests[id];
 
       if (inflight) {
         return inflight;
       }
-      /**
-       * We don't have an inflight request, so let's set one up.
-       */
-
 
       const request = handler().then(data => ({
         status: "success",
@@ -385,13 +250,7 @@ class RequestFulfillment {
           metadata: {
             unexpectedError: error
           }
-        }) : error; // Return aborted result if the request was aborted.
-        // The only way to detect this reliably, it seems, is to
-        // check the error name and see if it's "AbortError" (this
-        // is also what Apollo does).
-        // Even then, it's reliant on the handler supporting aborts.
-        // TODO(somewhatabstract, FEI-4276): Add first class abort
-        // support to the handler API.
+        }) : error;
 
         if (actualError.name === "AbortError") {
           return {
@@ -405,8 +264,7 @@ class RequestFulfillment {
         };
       }).finally(() => {
         delete this._requests[id];
-      }); // Store the request in our cache.
-
+      });
       this._requests[id] = request;
       return request;
     };
@@ -422,24 +280,9 @@ class RequestFulfillment {
 
 }
 
-/**
- * Used to inject our tracking function into the render framework.
- *
- * INTERNAL USE ONLY
- */
 const TrackerContext = new React.createContext(null);
-/**
- * The default instance is stored here.
- * It's created below in the Default() static property.
- */
 
 let _default;
-/**
- * Implements request tracking and fulfillment.
- *
- * INTERNAL USE ONLY
- */
-
 
 class RequestTracker {
   static get Default() {
@@ -449,18 +292,11 @@ class RequestTracker {
 
     return _default;
   }
-  /**
-   * These are the caches for tracked requests, their handlers, and responses.
-   */
-
 
   constructor(responseCache = undefined) {
     this._trackedRequests = {};
 
     this.trackDataRequest = (id, handler, hydrate) => {
-      /**
-       * If we don't already have this tracked, then let's track it.
-       */
       if (this._trackedRequests[id] == null) {
         this._trackedRequests[id] = {
           handler,
@@ -487,144 +323,54 @@ class RequestTracker {
           promises.push(this._requestFulfillment.fulfill(requestKey, _extends({}, options)).then(result => {
             switch (result.status) {
               case "success":
-                /**
-                 * Let's cache the data!
-                 *
-                 * NOTE: This only caches when we're
-                 * server side.
-                 */
                 cacheData(requestKey, result.data, options.hydrate);
                 break;
 
               case "error":
-                /**
-                 * Let's cache the error!
-                 *
-                 * NOTE: This only caches when we're
-                 * server side.
-                 */
                 cacheError(requestKey, result.error, options.hydrate);
                 break;
-            } // For status === "loading":
-            // Could never get here unless we wrote
-            // the code wrong. Rather than bloat
-            // code with useless error, just ignore.
-            // For status === "aborted":
-            // We won't cache this.
-            // We don't hydrate aborted requests,
-            // so the client would just see them
-            // as unfulfilled data.
-
+            }
 
             return;
           }));
         } catch (e) {
-          // This captures if there are problems in the code that
-          // begins the requests.
           promises.push(Promise.resolve(cacheError(requestKey, e, options.hydrate)));
         }
       }
-      /**
-       * Clear out our tracked info.
-       *
-       * We call this now for a simpler API.
-       *
-       * If we reset the tracked calls after all promises resolve, any
-       * request tracking done while promises are in flight would be lost.
-       *
-       * If we don't reset at all, then we have to expose the `reset` call
-       * for consumers to use, or they'll only ever be able to accumulate
-       * more and more tracked requests, having to fulfill them all every
-       * time.
-       *
-       * Calling it here means we can have multiple "track -> request"
-       * cycles in a row and in an easy to reason about manner.
-       */
-
 
       this.reset();
-      /**
-       * Let's wait for everything to fulfill, and then clone the cached data.
-       */
-
       return Promise.all(promises).then(() => this._responseCache.cloneHydratableData());
     };
 
     this._responseCache = responseCache || SsrCache.Default;
     this._requestFulfillment = new RequestFulfillment();
   }
-  /**
-   * Track a request.
-   *
-   * This method caches a request and its handler for use during server-side
-   * rendering to allow us to fulfill requests before producing a final render.
-   */
 
-
-  /**
-   * Indicates if we have requests waiting to be fulfilled.
-   */
   get hasUnfulfilledRequests() {
     return Object.keys(this._trackedRequests).length > 0;
   }
-  /**
-   * Initiate fulfillment of all tracked requests.
-   *
-   * This loops over the requests that were tracked using TrackData, and asks
-   * the respective handlers to fulfill those requests in the order they were
-   * tracked.
-   *
-   * Calling this method marks tracked requests as fulfilled; requests are
-   * removed from the list of tracked requests by calling this method.
-   *
-   * @returns {Promise<ResponseCache>} The promise of the data that was
-   * cached as a result of fulfilling the tracked requests.
-   */
-
 
 }
 
-/**
- * Component to enable data request tracking when server-side rendering.
- */
 class TrackData extends React.Component {
   render() {
     if (!Server.isServerSide()) {
       throw new Error("This component is not for use during client-side rendering");
     }
 
-    return /*#__PURE__*/React.createElement(TrackerContext.Provider, {
+    return React.createElement(TrackerContext.Provider, {
       value: RequestTracker.Default.trackDataRequest
     }, this.props.children);
   }
 
 }
 
-/**
- * Simple implementation to represent aborting.
- *
- * Other frameworks may provide this too, so we won't be sharing this with
- * the outside world. It's just a utility for test and internal use whenever
- * we need to represent the concept of aborted things.
- */
-class AbortError extends Error {
-  constructor(message) {
-    super(message);
-    this.name = "AbortError";
-  }
-
-}
-
 const loadingStatus = Object.freeze({
   status: "loading"
 });
 const abortedStatus = Object.freeze({
   status: "aborted"
 });
-/**
- * Create Result<TData> instances with specific statuses.
- */
-
 const Status = Object.freeze({
   loading: () => loadingStatus,
   aborted: () => abortedStatus,
@@ -638,11 +384,7 @@ const Status = Object.freeze({
   })
 });
 
-/**
- * Turns a cache entry into a stateful result.
- */
 const resultFromCachedResponse = cacheEntry => {
-  // No cache entry means no result to be hydrated.
   if (cacheEntry == null) {
     return null;
   }
@@ -653,334 +395,145 @@ const resultFromCachedResponse = cacheEntry => {
   } = cacheEntry;
 
   if (error != null) {
-    // Let's hydrate the error. We don't persist everything about the
-    // original error on the server, hence why we only superficially
-    // hydrate it to a GqlHydratedError.
     return Status.error(new DataError(error, DataErrors.Hydrated));
   }
 
   if (data != null) {
     return Status.success(data);
-  } // We shouldn't get here since we don't actually cache null data.
-
+  }
 
   return Status.aborted();
 };
 
-/**
- * InterceptContext defines a map from request ID to interception methods.
- *
- * INTERNAL USE ONLY
- */
-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 InterceptContext = React.createContext([]);
 
+const useRequestInterception = (requestId, handler) => {
+  const interceptors = React.useContext(InterceptContext);
   const interceptedHandler = React.useCallback(() => {
-    // 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]
-
+    }, null);
     return interceptResponse != null ? interceptResponse : handler();
   }, [handler, interceptors, requestId]);
   return interceptedHandler;
 };
 
-/**
- * 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) => {
-  // Plug in to the request interception framework for code that wants
-  // to use that.
-  const interceptedHandler = useRequestInterception(requestId, handler); // If we're server-side or hydrating, we'll have a cached entry to use.
-  // So we get that and use it to initialize our state.
-  // This works in both hydration and SSR because the very first call to
-  // this will have cached data in those cases as it will be present on the
-  // initial render - and subsequent renders on the client it will be null.
-
-  const cachedResult = 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 useServerEffect = (requestId, handler, options = {}) => {
+  const {
+    hydrate = true,
+    skip = false
+  } = options;
+  const interceptedHandler = useRequestInterception(requestId, handler);
+  const cachedResult = SsrCache.Default.getEntry(requestId);
   const maybeTrack = useContext(TrackerContext);
 
-  if (cachedResult == null && Server.isServerSide()) {
+  if (!skip && cachedResult == null && Server.isServerSide()) {
     maybeTrack == null ? void 0 : maybeTrack(requestId, interceptedHandler, hydrate);
-  } // A null result means there was no result to hydrate.
-
+  }
 
   return cachedResult == null ? null : resultFromCachedResponse(cachedResult);
 };
 
-/**
- * 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 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.
- */
-
 const useSharedCache = (id, scope, initialValue) => {
-  // Verify arguments.
   if (!id || typeof id !== "string") {
     throw new DataError("id must be a non-empty string", DataErrors.InvalidInput);
   }
 
   if (!scope || typeof scope !== "string") {
     throw new DataError("scope must be a non-empty string", DataErrors.InvalidInput);
-  } // Memoize our APIs.
-  // This one allows callers to set or replace the cached value.
-
-
-  const cacheValue = React.useCallback(value => value == null ? cache.purge(scope, id) : cache.set(scope, id, value), [id, scope]); // We don't memo-ize the current value, just in case the cache was updated
-  // since our last run through. Also, our cache does not know what type it
-  // stores, so we have to cast it to the type we're exporting. This is a
-  // dev time courtesy, rather than a runtime thing.
-  // $FlowIgnore[incompatible-type]
+  }
 
-  let currentValue = cache.get(scope, id); // If we have an initial value, we need to add it to the cache
-  // and use it as our current value.
+  const cacheValue = React.useCallback(value => value == null ? cache.purge(scope, id) : cache.set(scope, id, value), [id, scope]);
+  let currentValue = cache.get(scope, id);
 
   if (currentValue == null && initialValue !== undefined) {
-    // Get the initial value.
     const value = typeof initialValue === "function" ? initialValue() : initialValue;
 
     if (value != null) {
-      // Update the cache.
-      cacheValue(value); // Make sure we return this value as our current value.
-
+      cacheValue(value);
       currentValue = value;
     }
-  } // Now we have everything, let's return it.
-
+  }
 
   return [currentValue, cacheValue];
 };
 
 const DefaultScope$1 = "useCachedEffect";
-/**
- * Hook to execute and cache an async operation on the client.
- *
- * This hook executes the given handler on the client if there is no
- * cached result to use.
- *
- * Results are cached so they can be shared between equivalent invocations.
- * In-flight requests are also shared, so that concurrent calls will
- * behave as one might exect. Cache updates invoked by one hook instance
- * do not trigger renders in components that use the same requestID; however,
- * that should not matter since concurrent requests will share the same
- * in-flight request, and subsequent renders will grab from the cache.
- *
- * Once the request has been tried once and a non-loading response has been
- * cached, the request will not executed made again.
- */
-
 const useCachedEffect = (requestId, handler, options = {}) => {
   const {
     skip: hardSkip = false,
     retainResultOnChange = false,
     onResultChanged,
     scope = DefaultScope$1
-  } = options; // Plug in to the request interception framework for code that wants
-  // to use that.
-
-  const interceptedHandler = useRequestInterception(requestId, handler); // Instead of using state, which would be local to just this hook instance,
-  // we use a shared in-memory cache.
-
-  const [mostRecentResult, setMostRecentResult] = useSharedCache(requestId, // The key of the cached item
-  scope // The scope of the cached items
-  // No default value. We don't want the loading status there; to ensure
-  // that all calls when the request is in-flight will update once that
-  // request is done, we want the cache to be empty until that point.
-  ); // Build a function that will update the cache and either invoke the
-  // callback provided in options, or force an update.
-
+  } = options;
+  const interceptedHandler = useRequestInterception(requestId, handler);
+  const [mostRecentResult, setMostRecentResult] = useSharedCache(requestId, scope);
   const forceUpdate = useForceUpdate();
   const setCacheAndNotify = React.useCallback(value => {
-    setMostRecentResult(value); // If our caller provided a cacheUpdated callback, we use that.
-    // Otherwise, we toggle our little state update.
+    setMostRecentResult(value);
 
     if (onResultChanged != null) {
       onResultChanged(value);
     } else {
       forceUpdate();
     }
-  }, [setMostRecentResult, onResultChanged, forceUpdate]); // We need to trigger a re-render when the request ID changes as that
-  // indicates its a different request. We don't default the current id as
-  // this is a proxy for the first render, where we will make the request
-  // if we don't already have a cached value.
-
+  }, [setMostRecentResult, onResultChanged, forceUpdate]);
   const requestIdRef = React.useRef();
-  const previousRequestId = requestIdRef.current; // Calculate our soft skip state.
-  // Soft skip changes are things that should skip the effect if something
-  // else triggers the effect to run, but should not itself trigger the effect
-  // (which would cancel a previous invocation).
-
+  const previousRequestId = requestIdRef.current;
   const softSkip = React.useMemo(() => {
     if (requestId === previousRequestId) {
-      // If the requestId is unchanged, it means we already rendered at
-      // least once and so we already made the request at least once. So
-      // we can bail out right here.
       return true;
-    } // If we already have a cached value, we're going to skip.
-
+    }
 
     if (mostRecentResult != null) {
       return true;
     }
 
     return false;
-  }, [requestId, previousRequestId, mostRecentResult]); // So now we make sure the client-side request happens per our various
-  // options.
-
+  }, [requestId, previousRequestId, mostRecentResult]);
   React.useEffect(() => {
-    let cancel = false; // We don't do anything if we've been told to hard skip (a hard skip
-    // means we should cancel the previous request and is therefore a
-    // dependency on that), or we have determined we have already done
-    // enough and can soft skip (a soft skip doesn't trigger the request
-    // to re-run; we don't want to cancel the in progress effect if we're
-    // soft skipping.
+    let cancel = false;
 
     if (hardSkip || softSkip) {
       return;
-    } // If we got here, we're going to perform the request.
-    // Let's make sure our ref is set to the most recent requestId.
-
-
-    requestIdRef.current = requestId; // OK, we've done all our checks and things. It's time to make the
-    // request. We use our request fulfillment here so that in-flight
-    // requests are shared.
-    // NOTE: Our request fulfillment handles the error cases here.
-    // Catching shouldn't serve a purpose.
-    // eslint-disable-next-line promise/catch-or-return
+    }
 
+    requestIdRef.current = requestId;
     RequestFulfillment.Default.fulfill(requestId, {
       handler: interceptedHandler
     }).then(result => {
       if (cancel) {
-        // We don't modify our result if an earlier effect was
-        // cancelled as it means that this hook no longer cares about
-        // that old request.
         return;
       }
 
       setCacheAndNotify(result);
-      return; // Shut up eslint always-return rule.
+      return;
     });
     return () => {
-      // TODO(somewhatabstract, FEI-4276): Eventually, we will want to be
-      // able abort in-flight requests, but for now, we don't have that.
-      // (Of course, we will only want to abort them if no one is waiting
-      // on them)
-      // For now, we just block cancelled requests from changing our
-      // cache.
       cancel = true;
-    }; // We only want to run this effect if the requestId, or skip values
-    // change. These are the only two things that should affect the
-    // cancellation of a pending request. We do not update if the handler
-    // changes, in order to simplify the API - otherwise, callers would
-    // not be able to use inline functions with this hook.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hardSkip, requestId]); // We track the last result we returned in order to support the
-  // "retainResultOnChange" option.
-
+    };
+  }, [hardSkip, requestId]);
   const lastResultAgnosticOfIdRef = React.useRef(Status.loading());
-  const loadingResult = retainResultOnChange ? lastResultAgnosticOfIdRef.current : Status.loading(); // Loading is a transient state, so we only use it here; it's not something
-  // we cache.
-
+  const loadingResult = retainResultOnChange ? lastResultAgnosticOfIdRef.current : Status.loading();
   const result = React.useMemo(() => mostRecentResult != null ? mostRecentResult : loadingResult, [mostRecentResult, loadingResult]);
   lastResultAgnosticOfIdRef.current = result;
   return result;
 };
 
-/**
- * Policies to define how a hydratable effect should behave client-side.
- */
 const WhenClientSide = require("flow-enums-runtime").Mirrored(["DoNotHydrate", "ExecuteWhenNoResult", "ExecuteWhenNoSuccessResult", "AlwaysExecute"]);
 const DefaultScope = "useHydratableEffect";
-/**
- * Hook to execute an async operation on server and client.
- *
- * This hook executes the given handler on the server and on the client,
- * and, depending on the given options, can hydrate the server-side result.
- *
- * Results are cached on the client so they can be shared between equivalent
- * invocations. Cache changes from one hook instance do not trigger renders
- * in components that use the same requestID.
- */
-
 const useHydratableEffect = (requestId, handler, options = {}) => {
   const {
     clientBehavior = WhenClientSide.ExecuteWhenNoSuccessResult,
@@ -988,68 +541,38 @@ const useHydratableEffect = (requestId, handler, options = {}) => {
     retainResultOnChange = false,
     onResultChanged,
     scope = DefaultScope
-  } = options; // Now we instruct the server to perform the operation.
-  // When client-side, this will look up any response for hydration; it does
-  // not invoke the handler.
-
-  const serverResult = useServerEffect(requestId, // If we're skipped (unlikely in server worlds, but maybe),
-  // just give an aborted response.
-  skip ? () => Promise.reject(new AbortError("skipped")) : handler, // Only hydrate if our behavior isn't telling us not to.
-  clientBehavior !== WhenClientSide.DoNotHydrate);
+  } = options;
+  const serverResult = useServerEffect(requestId, handler, {
+    hydrate: clientBehavior !== WhenClientSide.DoNotHydrate,
+    skip
+  });
   const getDefaultCacheValue = React.useCallback(() => {
-    // If we don't have a requestId, it's our first render, the one
-    // where we hydrated. So defer to our clientBehavior value.
     switch (clientBehavior) {
       case WhenClientSide.DoNotHydrate:
       case WhenClientSide.AlwaysExecute:
-        // Either we weren't hydrating at all, or we don't care
-        // if we hydrated something or not, either way, we're
-        // doing a request.
         return null;
 
       case WhenClientSide.ExecuteWhenNoResult:
-        // We only execute if we didn't hydrate something.
-        // So, returning the hydration result as default for our
-        // cache, will then prevent the cached effect running.
         return serverResult;
 
       case WhenClientSide.ExecuteWhenNoSuccessResult:
-        // We only execute if we didn't hydrate a success result.
         if ((serverResult == null ? void 0 : serverResult.status) === "success") {
-          // So, returning the hydration result as default for our
-          // cache, will then prevent the cached effect running.
           return serverResult;
         }
 
         return null;
-    } // There is no reason for this to change after the first render.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, []); // Instead of using state, which would be local to just this hook instance,
-  // we use a shared in-memory cache.
-
-  useSharedCache(requestId, // The key of the cached item
-  scope, // The scope of the cached items
-  getDefaultCacheValue); // When we're client-side, we ultimately want the result from this call.
-
+    }
+  }, [serverResult]);
+  useSharedCache(requestId, scope, getDefaultCacheValue);
   const clientResult = useCachedEffect(requestId, handler, {
     skip,
     onResultChanged,
     retainResultOnChange,
     scope
-  }); // OK, now which result do we return.
-  // Well, we return the serverResult on our very first call and then
-  // the clientResult thereafter. The great thing is that after the very
-  // first call, the serverResult is going to be `null` anyway.
-
+  });
   return serverResult != null ? serverResult : clientResult;
 };
 
-/**
- * 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,
@@ -1064,87 +587,39 @@ const Data = ({
   return children(result);
 };
 
-/**
- * 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 from outside the children of this
- * component.
- *
- * 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.
- */
 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, {
+  const updatedInterceptors = React.useMemo(() => [].concat(interceptors, [interceptor]), [interceptors, interceptor]);
+  return React.createElement(InterceptContext.Provider, {
     value: updatedInterceptors
   }, children);
 };
 
-const GqlRouterContext = /*#__PURE__*/React.createContext(null);
+const GqlRouterContext = React.createContext(null);
 
-/**
- * Configure GraphQL routing for GraphQL hooks and components.
- *
- * These can be nested. Components and hooks relying on the GraphQL routing
- * will use the configuration from their closest ancestral GqlRouter.
- */
 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, {
+  return React.createElement(GqlRouterContext.Provider, {
     value: configuration
   }, children);
 };
 
-/**
- * Construct a complete GqlContext from current defaults and a partial context.
- *
- * Values in the partial context that are `undefined` will be ignored.
- * Values in the partial context that are `null` will be deleted.
- */
 const mergeGqlContext = (defaultContext, overrides) => {
-  // Let's merge the partial context default context. We deliberately
-  // don't spread because spreading would overwrite default context
-  // values with undefined or null if the partial context includes a value
-  // explicitly set to undefined or null.
   return Object.keys(overrides).reduce((acc, key) => {
-    // Undefined values are ignored.
     if (overrides[key] !== undefined) {
       if (overrides[key] === null) {
-        // Null indicates we delete this context value.
         delete acc[key];
       } else {
-        // Otherwise, we set it.
         acc[key] = overrides[key];
       }
     }
@@ -1153,32 +628,11 @@ const mergeGqlContext = (defaultContext, overrides) => {
   }, _extends({}, defaultContext));
 };
 
-/**
- * Error kinds for GqlError.
- */
 const GqlErrors = Object.freeze({
-  /**
-   * An internal framework error.
-   */
   Internal: "Internal",
-
-  /**
-   * Response does not have the correct structure for a GraphQL response.
-   */
   BadResponse: "BadResponse",
-
-  /**
-   * A valid GraphQL result with errors field in the payload.
-   */
   ErrorResult: "ErrorResult"
 });
-/**
- * An error from the GQL API.
- *
- * Errors of this type will have names of the format:
- *     `${kind}GqlError`
- */
-
 class GqlError extends KindError {
   constructor(message, kind, {
     metadata,
@@ -1193,11 +647,7 @@ class GqlError extends KindError {
 
 }
 
-/**
- * Construct a GqlRouterContext from the current one and partial context.
- */
 const useGqlRouterContext = (contextOverrides = {}) => {
-  // This hook only works if the `GqlRouter` has been used to setup context.
   const gqlRouterContext = useContext(GqlRouterContext);
 
   if (gqlRouterContext == null) {
@@ -1209,17 +659,14 @@ const useGqlRouterContext = (contextOverrides = {}) => {
     defaultContext
   } = gqlRouterContext;
   const contextRef = useRef(defaultContext);
-  const mergedContext = mergeGqlContext(defaultContext, contextOverrides); // Now, we can see if this represents a new context and if so,
-  // update our ref and return the merged value.
-
+  const mergedContext = mergeGqlContext(defaultContext, contextOverrides);
   const refKeys = Object.keys(contextRef.current);
   const mergedKeys = Object.keys(mergedContext);
   const shouldWeUpdateRef = refKeys.length !== mergedKeys.length || mergedKeys.every(key => contextRef.current[key] !== mergedContext[key]);
 
   if (shouldWeUpdateRef) {
     contextRef.current = mergedContext;
-  } // OK, now we're up-to-date, let's memoize our final result.
-
+  }
 
   const finalContext = contextRef.current;
   const finalRouterContext = useMemo(() => ({
@@ -1229,13 +676,7 @@ const useGqlRouterContext = (contextOverrides = {}) => {
   return finalRouterContext;
 };
 
-/**
- * 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;
 
@@ -1249,8 +690,7 @@ const getGqlDataFromResponse = async response => {
       },
       cause: e
     });
-  } // Check for a bad status code.
-
+  }
 
   if (response.status >= 300) {
     throw new DataError("Response unsuccessful", DataErrors.Network, {
@@ -1259,22 +699,16 @@ const getGqlDataFromResponse = async response => {
         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")) {
+  if (!Object.prototype.hasOwnProperty.call(result, "data") && !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, {
@@ -1283,30 +717,13 @@ const getGqlDataFromResponse = async response => {
         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.
- *
- * 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 = (context = {}) => {
-  // This hook only works if the `GqlRouter` has been used to setup context.
-  const gqlRouterContext = useGqlRouterContext(context); // 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 gqlRouterContext = useGqlRouterContext(context);
   const gqlFetch = useCallback((operation, options = Object.freeze({})) => {
     const {
       fetch,
@@ -1316,31 +733,13 @@ const useGql = (context = {}) => {
       variables,
       context = {}
     } = options;
-    const finalContext = mergeGqlContext(defaultContext, context); // Invoke the fetch and extract the data.
-
+    const finalContext = mergeGqlContext(defaultContext, context);
     return fetch(operation, variables, finalContext).then(getGqlDataFromResponse);
   }, [gqlRouterContext]);
   return gqlFetch;
 };
 
-/**
- * Initialize the hydration cache.
- *
- * @param {ResponseCache} source The cache content to use for initializing the
- * cache.
- * @throws {Error} If the cache is already initialized.
- */
 const initializeCache = source => SsrCache.Default.initialize(source);
-/**
- * Fulfill all tracked data requests.
- *
- * This is for use with the `TrackData` component during server-side rendering.
- *
- * @throws {Error} If executed outside of server-side rendering.
- * @returns {Promise<void>} A promise that resolves when all tracked requests
- * have been fulfilled.
- */
-
 const fulfillAllDataRequests = () => {
   if (!Server.isServerSide()) {
     return Promise.reject(new Error("Data requests are not tracked when client-side"));
@@ -1348,16 +747,6 @@ const fulfillAllDataRequests = () => {
 
   return RequestTracker.Default.fulfillTrackedRequests();
 };
-/**
- * Indicate if there are unfulfilled tracked requests.
- *
- * This is used in conjunction with `TrackData`.
- *
- * @throws {Error} If executed outside of server-side rendering.
- * @returns {boolean} `true` if there are unfulfilled tracked requests;
- * otherwise, `false`.
- */
-
 const hasUnfulfilledRequests = () => {
   if (!Server.isServerSide()) {
     throw new Error("Data requests are not tracked when client-side");
@@ -1365,21 +754,7 @@ const hasUnfulfilledRequests = () => {
 
   return RequestTracker.Default.hasUnfulfilledRequests;
 };
-/**
- * Remove the request identified from the cached hydration responses.
- *
- * @param {string} id The request ID of the response to remove from the cache.
- */
-
 const removeFromCache = id => SsrCache.Default.remove(id);
-/**
- * Remove all cached hydration responses that match the given predicate.
- *
- * @param {(id: string) => boolean} [predicate] The predicate to match against
- * the cached hydration responses. If no predicate is provided, all cached
- * hydration responses will be removed.
- */
-
 const removeAllFromCache = predicate => SsrCache.Default.removeAll(predicate);
 
 export { Data, DataError, DataErrors, GqlError, GqlErrors, GqlRouter, InterceptRequests, RequestFulfillment, ScopedInMemoryCache, SerializableInMemoryCache, Status, TrackData, WhenClientSide, clearSharedCache, fulfillAllDataRequests, hasUnfulfilledRequests, initializeCache, removeAllFromCache, removeFromCache, useCachedEffect, useGql, useHydratableEffect, useServerEffect, useSharedCache };