@khanacademy/wonder-blocks-data 4.0.0 → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-data
 
+## 5.0.0
+
+### Major Changes
+
+-   5b5f85ac: Replace `InterceptData` with `InterceptRequests` and introduce new `useRequestInterception` hook
+
 ## 4.0.0
 
 ### Major Changes

package/dist/es/index.js

@@ -472,13 +472,6 @@ class TrackData extends React.Component {
 
 }
 
-/**
- * InterceptContext defines a map from request ID to interception methods.
- *
- * INTERNAL USE ONLY
- */
-const InterceptContext = /*#__PURE__*/React.createContext({});
-
 /**
  * Hook to perform an asynchronous action during server-side rendering.
  *
@@ -494,25 +487,71 @@ const InterceptContext = /*#__PURE__*/React.createContext({});
  *
  * The asynchronous action is never invoked on the client-side.
  */
-const useServerEffect = (id, handler, hydrate = true) => {
+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(id); // We only track data requests when we are server-side and we don't
+  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(id, handler, hydrate);
+    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([]);
+
+/**
+ * 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.
  */
@@ -561,27 +600,8 @@ const Data = ({
   showOldDataWhileLoading,
   alwaysRequestOnHydration
 }) => {
-  // 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 = React.useContext(InterceptContext); // If we have an interceptor, we need to replace the handler with one
-  // that uses the interceptor. This helper function generates a new
-  // handler.
-
-  const maybeInterceptedHandler = React.useMemo(() => {
-    const interceptor = interceptorMap[requestId];
-
-    if (interceptor == null) {
-      return handler;
-    }
-
-    return () => {
-      var _interceptor;
-
-      return (_interceptor = interceptor()) != null ? _interceptor : handler();
-    };
-  }, [handler, interceptorMap, requestId]);
-  const hydrateResult = useServerEffect(requestId, maybeInterceptedHandler, hydrate);
+  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.
@@ -617,7 +637,7 @@ const Data = ({
 
     let cancel = false;
     RequestFulfillment.Default.fulfill(requestId, {
-      handler: maybeInterceptedHandler
+      handler: interceptedHandler
     }).then(result => {
       if (cancel) {
         return;
@@ -669,22 +689,21 @@ const Data = ({
  * 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 id, 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.
  */
-const InterceptData = ({
-  requestId,
-  handler,
+const InterceptRequests = ({
+  interceptor,
   children
 }) => {
-  const interceptMap = React.useContext(InterceptContext);
-  const updatedInterceptMap = React.useMemo(() => _extends({}, interceptMap, {
-    [requestId]: handler
-  }), [interceptMap, requestId, handler]);
+  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: updatedInterceptMap
+    value: updatedInterceptors
   }, children);
 };
 
@@ -964,4 +983,4 @@ const hasUnfulfilledRequests = () => {
 const removeFromCache = id => SsrCache.Default.remove(id);
 const removeAllFromCache = predicate => SsrCache.Default.removeAll(predicate);
 
-export { Data, GqlError, GqlErrors, GqlRouter, InterceptData, ScopedInMemoryCache, TrackData, clearSharedCache, fulfillAllDataRequests, hasUnfulfilledRequests, initializeCache, removeAllFromCache, removeFromCache, useGql, useServerEffect, useSharedCache };
+export { Data, GqlError, GqlErrors, GqlRouter, InterceptRequests, ScopedInMemoryCache, TrackData, clearSharedCache, fulfillAllDataRequests, hasUnfulfilledRequests, initializeCache, removeAllFromCache, removeFromCache, useGql, useRequestInterception, useServerEffect, useSharedCache };

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 19);
+/******/ 	return __webpack_require__(__webpack_require__.s = 20);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -419,7 +419,7 @@ class ScopedInMemoryCache {
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _ssr_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
-/* harmony import */ var _request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9);
+/* harmony import */ var _request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(10);
 
 
 
@@ -558,7 +558,7 @@ class RequestTracker {
  *
  * INTERNAL USE ONLY
  */
-const InterceptContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createContext"]({});
+const InterceptContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createContext"]([]);
 /* harmony default export */ __webpack_exports__["a"] = (InterceptContext);
 
 /***/ }),
@@ -593,20 +593,20 @@ const InterceptContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["create
  *
  * The asynchronous action is never invoked on the client-side.
  */
-const useServerEffect = (id, handler, hydrate = true) => {
+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 = _util_ssr_cache_js__WEBPACK_IMPORTED_MODULE_3__[/* SsrCache */ "a"].Default.getEntry(id); // We only track data requests when we are server-side and we don't
+  const cachedResult = _util_ssr_cache_js__WEBPACK_IMPORTED_MODULE_3__[/* SsrCache */ "a"].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 = Object(react__WEBPACK_IMPORTED_MODULE_1__["useContext"])(_util_request_tracking_js__WEBPACK_IMPORTED_MODULE_2__[/* TrackerContext */ "b"]);
 
   if (cachedResult == null && _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide()) {
-    maybeTrack == null ? void 0 : maybeTrack(id, handler, hydrate);
+    maybeTrack == null ? void 0 : maybeTrack(requestId, handler, hydrate);
   }
 
   return cachedResult;
@@ -616,6 +616,57 @@ const useServerEffect = (id, handler, hydrate = true) => {
 /* 9 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useRequestInterception; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _components_intercept_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7);
+
+
+
+/**
+ * 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__WEBPACK_IMPORTED_MODULE_0__["useContext"](_components_intercept_context_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"]); // 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__WEBPACK_IMPORTED_MODULE_0__["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;
+};
+
+/***/ }),
+/* 10 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return RequestFulfillment; });
 /* harmony import */ var _ssr_cache_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
@@ -707,7 +758,7 @@ class RequestFulfillment {
 }
 
 /***/ }),
-/* 10 */
+/* 11 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -718,7 +769,7 @@ class RequestFulfillment {
 const GqlRouterContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createContext"](null);
 
 /***/ }),
-/* 11 */
+/* 12 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -809,7 +860,7 @@ const useSharedCache = (id, scope, initialValue) => {
 };
 
 /***/ }),
-/* 12 */
+/* 13 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -840,7 +891,7 @@ class TrackData extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 }
 
 /***/ }),
-/* 13 */
+/* 14 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -848,10 +899,10 @@ class TrackData extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _util_request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9);
-/* harmony import */ var _intercept_context_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(7);
-/* harmony import */ var _hooks_use_server_effect_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8);
-/* harmony import */ var _util_result_from_cache_response_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(17);
+/* harmony import */ var _util_request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(10);
+/* harmony import */ var _hooks_use_server_effect_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(8);
+/* harmony import */ var _hooks_use_request_interception_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9);
+/* harmony import */ var _util_result_from_cache_response_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(18);
 
 
 
@@ -872,27 +923,8 @@ const Data = ({
   showOldDataWhileLoading,
   alwaysRequestOnHydration
 }) => {
-  // 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 = react__WEBPACK_IMPORTED_MODULE_0__["useContext"](_intercept_context_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"]); // If we have an interceptor, we need to replace the handler with one
-  // that uses the interceptor. This helper function generates a new
-  // handler.
-
-  const maybeInterceptedHandler = react__WEBPACK_IMPORTED_MODULE_0__["useMemo"](() => {
-    const interceptor = interceptorMap[requestId];
-
-    if (interceptor == null) {
-      return handler;
-    }
-
-    return () => {
-      var _interceptor;
-
-      return (_interceptor = interceptor()) != null ? _interceptor : handler();
-    };
-  }, [handler, interceptorMap, requestId]);
-  const hydrateResult = Object(_hooks_use_server_effect_js__WEBPACK_IMPORTED_MODULE_4__[/* useServerEffect */ "a"])(requestId, maybeInterceptedHandler, hydrate);
+  const interceptedHandler = Object(_hooks_use_request_interception_js__WEBPACK_IMPORTED_MODULE_4__[/* useRequestInterception */ "a"])(requestId, handler);
+  const hydrateResult = Object(_hooks_use_server_effect_js__WEBPACK_IMPORTED_MODULE_3__[/* useServerEffect */ "a"])(requestId, interceptedHandler, hydrate);
   const [currentResult, setResult] = react__WEBPACK_IMPORTED_MODULE_0__["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.
@@ -928,7 +960,7 @@ const Data = ({
 
     let cancel = false;
     _util_request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__[/* RequestFulfillment */ "a"].Default.fulfill(requestId, {
-      handler: maybeInterceptedHandler
+      handler: interceptedHandler
     }).then(result => {
       if (cancel) {
         return;
@@ -973,7 +1005,7 @@ const Data = ({
 /* harmony default export */ __webpack_exports__["a"] = (Data);
 
 /***/ }),
-/* 14 */
+/* 15 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -993,36 +1025,35 @@ const Data = ({
  * 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 id, 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.
  */
-const InterceptData = ({
-  requestId,
-  handler,
+const InterceptRequests = ({
+  interceptor,
   children
 }) => {
-  const interceptMap = react__WEBPACK_IMPORTED_MODULE_0__["useContext"](_intercept_context_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"]);
-  const updatedInterceptMap = react__WEBPACK_IMPORTED_MODULE_0__["useMemo"](() => ({ ...interceptMap,
-    [requestId]: handler
-  }), [interceptMap, requestId, handler]);
+  const interceptors = react__WEBPACK_IMPORTED_MODULE_0__["useContext"](_intercept_context_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"]);
+  const updatedInterceptors = react__WEBPACK_IMPORTED_MODULE_0__["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__WEBPACK_IMPORTED_MODULE_0__["createElement"](_intercept_context_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"].Provider, {
-    value: updatedInterceptMap
+    value: updatedInterceptors
   }, children);
 };
 
-/* harmony default export */ __webpack_exports__["a"] = (InterceptData);
+/* harmony default export */ __webpack_exports__["a"] = (InterceptRequests);
 
 /***/ }),
-/* 15 */
+/* 16 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return GqlRouter; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _util_gql_router_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(10);
+/* harmony import */ var _util_gql_router_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
 
 
 
@@ -1059,15 +1090,15 @@ const GqlRouter = ({
 };
 
 /***/ }),
-/* 16 */
+/* 17 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useGql; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _util_gql_router_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(10);
-/* harmony import */ var _util_get_gql_data_from_response_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(18);
+/* harmony import */ var _util_gql_router_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
+/* harmony import */ var _util_get_gql_data_from_response_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(19);
 /* harmony import */ var _util_gql_error_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
 
 
@@ -1138,7 +1169,7 @@ const useGql = () => {
 };
 
 /***/ }),
-/* 17 */
+/* 18 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1179,7 +1210,7 @@ const resultFromCachedResponse = cacheEntry => {
 };
 
 /***/ }),
-/* 18 */
+/* 19 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1247,7 +1278,7 @@ const getGqlDataFromResponse = async response => {
 };
 
 /***/ }),
-/* 19 */
+/* 20 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1261,36 +1292,39 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _util_ssr_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
 /* harmony import */ var _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
-/* harmony import */ var _components_track_data_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(12);
+/* harmony import */ var _components_track_data_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(13);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TrackData", function() { return _components_track_data_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
 
-/* harmony import */ var _components_data_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(13);
+/* harmony import */ var _components_data_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(14);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Data", function() { return _components_data_js__WEBPACK_IMPORTED_MODULE_4__["a"]; });
 
-/* harmony import */ var _components_intercept_data_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(14);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InterceptData", function() { return _components_intercept_data_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });
+/* harmony import */ var _components_intercept_requests_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(15);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InterceptRequests", function() { return _components_intercept_requests_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });
 
 /* harmony import */ var _hooks_use_server_effect_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(8);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useServerEffect", function() { return _hooks_use_server_effect_js__WEBPACK_IMPORTED_MODULE_6__["a"]; });
 
-/* harmony import */ var _hooks_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(11);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useSharedCache", function() { return _hooks_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_7__["b"]; });
+/* harmony import */ var _hooks_use_request_interception_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(9);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useRequestInterception", function() { return _hooks_use_request_interception_js__WEBPACK_IMPORTED_MODULE_7__["a"]; });
+
+/* harmony import */ var _hooks_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(12);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useSharedCache", function() { return _hooks_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_8__["b"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "clearSharedCache", function() { return _hooks_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_7__["a"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "clearSharedCache", function() { return _hooks_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_8__["a"]; });
 
-/* harmony import */ var _util_scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(5);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScopedInMemoryCache", function() { return _util_scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_8__["a"]; });
+/* harmony import */ var _util_scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(5);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScopedInMemoryCache", function() { return _util_scoped_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_9__["a"]; });
 
-/* harmony import */ var _components_gql_router_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(15);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlRouter", function() { return _components_gql_router_js__WEBPACK_IMPORTED_MODULE_9__["a"]; });
+/* harmony import */ var _components_gql_router_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(16);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlRouter", function() { return _components_gql_router_js__WEBPACK_IMPORTED_MODULE_10__["a"]; });
 
-/* harmony import */ var _hooks_use_gql_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(16);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useGql", function() { return _hooks_use_gql_js__WEBPACK_IMPORTED_MODULE_10__["a"]; });
+/* harmony import */ var _hooks_use_gql_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(17);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useGql", function() { return _hooks_use_gql_js__WEBPACK_IMPORTED_MODULE_11__["a"]; });
 
-/* harmony import */ var _util_gql_error_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(2);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlErrors", function() { return _util_gql_error_js__WEBPACK_IMPORTED_MODULE_11__["b"]; });
+/* harmony import */ var _util_gql_error_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(2);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlErrors", function() { return _util_gql_error_js__WEBPACK_IMPORTED_MODULE_12__["b"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlError", function() { return _util_gql_error_js__WEBPACK_IMPORTED_MODULE_11__["a"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GqlError", function() { return _util_gql_error_js__WEBPACK_IMPORTED_MODULE_12__["a"]; });
 
 
 
@@ -1317,6 +1351,7 @@ const removeAllFromCache = predicate => _util_ssr_cache_js__WEBPACK_IMPORTED_MOD
 
 
 
+
  // GraphQL
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-data",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"

package/src/__tests__/generated-snapshot.test.js

@@ -13,7 +13,7 @@ import {View, Server} from "@khanacademy/wonder-blocks-core";
 import {
     Data,
     initializeCache,
-    InterceptData,
+    InterceptRequests,
     TrackData,
     fulfillAllDataRequests,
 } from "@khanacademy/wonder-blocks-data";
@@ -135,13 +135,13 @@ describe("wonder-blocks-data", () => {
         const myHandler = () =>
             Promise.reject(new Error("You should not see this!"));
 
-        const interceptHandler = () => Promise.resolve("INTERCEPTED DATA!");
+        const interceptor = (requestId) =>
+            requestId === "INTERCEPT_EXAMPLE"
+                ? Promise.resolve("INTERCEPTED DATA!")
+                : null;
 
         const example = (
-            <InterceptData
-                handler={interceptHandler}
-                requestId="INTERCEPT_EXAMPLE"
-            >
+            <InterceptRequests interceptor={interceptor}>
                 <View>
                     <Body>This received intercepted data!</Body>
                     <Data handler={myHandler} requestId="INTERCEPT_EXAMPLE">
@@ -154,7 +154,7 @@ describe("wonder-blocks-data", () => {
                         }}
                     </Data>
                 </View>
-            </InterceptData>
+            </InterceptRequests>
         );
         const tree = renderer.create(example).toJSON();
         expect(tree).toMatchSnapshot();