@khanacademy/wonder-blocks-data 3.0.0 → 3.0.1

package/CHANGELOG.md

@@ -1,7 +1,14 @@
 # @khanacademy/wonder-blocks-data
 
+## 3.0.1
+
+### Patch Changes
+
+-   d281dac8: Ensure server-side request fulfillments can be intercepted
+
 ## 3.0.0
+
 ### Major Changes
 
-- b252d9c8: Remove client-side caching
-- b252d9c8: Introduce useData hook
+-   b252d9c8: Remove client-side caching
+-   b252d9c8: Introduce useData hook

package/dist/es/index.js

@@ -582,25 +582,49 @@ const useData = (handler, options) => {
   // this will have cached data in those cases as it will be present on the
   // initial render - and subsequent renders on the client it will be null.
   const cachedResult = ResponseCache.Default.getEntry(handler, options);
-  const [result, setResult] = useState(cachedResult); // We only track data requests when we are server-side and we don't
+  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(handler, options);
-  } // Lookup to see if there's an interceptor for the handler.
-  // If we have one, we need to replace the handler with one that
-  // uses the interceptor.
-
-
-  const interceptorMap = useContext(InterceptContext);
-  const interceptor = interceptorMap[handler.type]; // We need to update our request when the handler changes or the key
+    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.
@@ -625,26 +649,7 @@ const useData = (handler, options) => {
     if (cachedResult == null) {
       // Mark ourselves as loading.
       setResult(null);
-    }
-
-    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 aren't server-side, so let's make the request.
+    } // 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.
 

package/dist/index.js

@@ -424,25 +424,49 @@ const useData = (handler, options) => {
   // 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_response_cache_js__WEBPACK_IMPORTED_MODULE_6__[/* ResponseCache */ "a"].Default.getEntry(handler, options);
-  const [result, setResult] = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(cachedResult); // We only track data requests when we are server-side and we don't
+  const [result, setResult] = Object(react__WEBPACK_IMPORTED_MODULE_1__["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 = Object(react__WEBPACK_IMPORTED_MODULE_1__["useContext"])(_components_intercept_context_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"]);
+  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 = Object(react__WEBPACK_IMPORTED_MODULE_1__["useContext"])(_util_request_tracking_js__WEBPACK_IMPORTED_MODULE_4__[/* TrackerContext */ "b"]);
 
   if (result == null && _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide()) {
-    maybeTrack == null ? void 0 : maybeTrack(handler, options);
-  } // Lookup to see if there's an interceptor for the handler.
-  // If we have one, we need to replace the handler with one that
-  // uses the interceptor.
-
-
-  const interceptorMap = Object(react__WEBPACK_IMPORTED_MODULE_1__["useContext"])(_components_intercept_context_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"]);
-  const interceptor = interceptorMap[handler.type]; // We need to update our request when the handler changes or the key
+    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 = Object(react__WEBPACK_IMPORTED_MODULE_1__["useRef"])();
   const keyRef = Object(react__WEBPACK_IMPORTED_MODULE_1__["useRef"])();
   const interceptorRef = Object(react__WEBPACK_IMPORTED_MODULE_1__["useRef"])(); // This effect will ensure that we fulfill the request as desired.
@@ -467,26 +491,7 @@ const useData = (handler, options) => {
     if (cachedResult == null) {
       // Mark ourselves as loading.
       setResult(null);
-    }
-
-    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 aren't server-side, so let's make the request.
+    } // 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.
 

package/package.json

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

package/src/hooks/__tests__/use-data.test.js

@@ -155,6 +155,42 @@ describe("#useData", () => {
                 error: "ERROR",
             });
         });
+
+        it("should track the intercepted request", async () => {
+            // Arrange
+            const intercepted = Promise.resolve("INTERCEPTED");
+            const notIntercepted = Promise.resolve("NOT INTERCEPTED");
+            const fakeHandler: IRequestHandler<string, string> = {
+                fulfillRequest: jest.fn().mockReturnValue(notIntercepted),
+                getKey: (o) => o,
+                type: "MY_HANDLER",
+                hydrate: true,
+            };
+            const trackDataRequestSpy = jest.spyOn(
+                RequestTracker.Default,
+                "trackDataRequest",
+            );
+            const wrapper = ({children}) => (
+                <TrackData>
+                    <InterceptData
+                        fulfillRequest={() => intercepted}
+                        handler={fakeHandler}
+                    >
+                        {children}
+                    </InterceptData>
+                </TrackData>
+            );
+
+            // Act
+            serverRenderHook(() => useData(fakeHandler, "options"), {
+                wrapper,
+            });
+            const trackedHandler = trackDataRequestSpy.mock.calls[0][0];
+            const result = await trackedHandler.fulfillRequest();
+
+            // Assert
+            expect(result).toBe("INTERCEPTED");
+        });
     });
 
     describe("when client-side", () => {
@@ -668,122 +704,122 @@ describe("#useData", () => {
                 data: "DATA",
             });
         });
-    });
 
-    describe("with interceptor", () => {
-        it("should return the result of the interceptor request resolution", async () => {
-            // Arrange
-            const intercepted = Promise.resolve("INTERCEPTED");
-            const notIntercepted = Promise.resolve("NOT INTERCEPTED");
-            const fakeHandler: IRequestHandler<string, string> = {
-                fulfillRequest: jest.fn().mockReturnValue(notIntercepted),
-                getKey: (o) => o,
-                type: "MY_HANDLER",
-                hydrate: true,
-            };
-            const wrapper = ({children}) => (
-                <InterceptData
-                    fulfillRequest={() => intercepted}
-                    handler={fakeHandler}
-                >
-                    {children}
-                </InterceptData>
-            );
+        describe("with interceptor", () => {
+            it("should return the result of the interceptor request resolution", async () => {
+                // Arrange
+                const intercepted = Promise.resolve("INTERCEPTED");
+                const notIntercepted = Promise.resolve("NOT INTERCEPTED");
+                const fakeHandler: IRequestHandler<string, string> = {
+                    fulfillRequest: jest.fn().mockReturnValue(notIntercepted),
+                    getKey: (o) => o,
+                    type: "MY_HANDLER",
+                    hydrate: true,
+                };
+                const wrapper = ({children}) => (
+                    <InterceptData
+                        fulfillRequest={() => intercepted}
+                        handler={fakeHandler}
+                    >
+                        {children}
+                    </InterceptData>
+                );
 
-            // Act
-            const render = clientRenderHook(
-                () => useData(fakeHandler, "options"),
-                {
-                    wrapper,
-                },
-            );
-            await act((): Promise<mixed> =>
-                Promise.all([notIntercepted, intercepted]),
-            );
-            const result = render.result.current;
+                // Act
+                const render = clientRenderHook(
+                    () => useData(fakeHandler, "options"),
+                    {
+                        wrapper,
+                    },
+                );
+                await act((): Promise<mixed> =>
+                    Promise.all([notIntercepted, intercepted]),
+                );
+                const result = render.result.current;
 
-            // Assert
-            expect(result).toEqual({
-                status: "success",
-                data: "INTERCEPTED",
+                // Assert
+                expect(result).toEqual({
+                    status: "success",
+                    data: "INTERCEPTED",
+                });
             });
-        });
-
-        it("should return the result of the interceptor request rejection", async () => {
-            // Arrange
-            const intercepted = Promise.reject("INTERCEPTED");
-            const notIntercepted = Promise.resolve("NOT INTERCEPTED");
-            const fakeHandler: IRequestHandler<string, string> = {
-                fulfillRequest: jest.fn().mockReturnValue(notIntercepted),
-                getKey: (o) => o,
-                type: "MY_HANDLER",
-                hydrate: true,
-            };
-            const wrapper = ({children}) => (
-                <InterceptData
-                    fulfillRequest={() => intercepted}
-                    handler={fakeHandler}
-                >
-                    {children}
-                </InterceptData>
-            );
 
-            // Act
-            const render = clientRenderHook(
-                () => useData(fakeHandler, "options"),
-                {
-                    wrapper,
-                },
-            );
-            await notIntercepted;
-            await act(async (): Promise<mixed> => {
-                try {
-                    await intercepted;
-                } catch (e) {
-                    /* ignore, it's ok */
-                }
-            });
-            const result = render.result.current;
+            it("should return the result of the interceptor request rejection", async () => {
+                // Arrange
+                const intercepted = Promise.reject("INTERCEPTED");
+                const notIntercepted = Promise.resolve("NOT INTERCEPTED");
+                const fakeHandler: IRequestHandler<string, string> = {
+                    fulfillRequest: jest.fn().mockReturnValue(notIntercepted),
+                    getKey: (o) => o,
+                    type: "MY_HANDLER",
+                    hydrate: true,
+                };
+                const wrapper = ({children}) => (
+                    <InterceptData
+                        fulfillRequest={() => intercepted}
+                        handler={fakeHandler}
+                    >
+                        {children}
+                    </InterceptData>
+                );
 
-            // Assert
-            expect(result).toEqual({
-                status: "error",
-                error: "INTERCEPTED",
+                // Act
+                const render = clientRenderHook(
+                    () => useData(fakeHandler, "options"),
+                    {
+                        wrapper,
+                    },
+                );
+                await notIntercepted;
+                await act(async (): Promise<mixed> => {
+                    try {
+                        await intercepted;
+                    } catch (e) {
+                        /* ignore, it's ok */
+                    }
+                });
+                const result = render.result.current;
+
+                // Assert
+                expect(result).toEqual({
+                    status: "error",
+                    error: "INTERCEPTED",
+                });
             });
-        });
 
-        it("should return the result of the handler if the interceptor returns null", async () => {
-            // Arrange
-            const notIntercepted = Promise.resolve("NOT INTERCEPTED");
-            const fakeHandler: IRequestHandler<string, string> = {
-                fulfillRequest: jest.fn().mockReturnValue(notIntercepted),
-                getKey: (o) => o,
-                type: "MY_HANDLER",
-                hydrate: true,
-            };
-            const wrapper = ({children}) => (
-                <InterceptData
-                    fulfillRequest={() => null}
-                    handler={fakeHandler}
-                >
-                    {children}
-                </InterceptData>
-            );
+            it("should return the result of the handler if the interceptor returns null", async () => {
+                // Arrange
+                const notIntercepted = Promise.resolve("NOT INTERCEPTED");
+                const fakeHandler: IRequestHandler<string, string> = {
+                    fulfillRequest: jest.fn().mockReturnValue(notIntercepted),
+                    getKey: (o) => o,
+                    type: "MY_HANDLER",
+                    hydrate: true,
+                };
+                const wrapper = ({children}) => (
+                    <InterceptData
+                        fulfillRequest={() => null}
+                        handler={fakeHandler}
+                    >
+                        {children}
+                    </InterceptData>
+                );
 
-            // Act
-            const render = clientRenderHook(
-                () => useData(fakeHandler, "options"),
-                {
-                    wrapper,
-                },
-            );
-            await act((): Promise<mixed> => notIntercepted);
-            const result = render.result.current;
+                // Act
+                const render = clientRenderHook(
+                    () => useData(fakeHandler, "options"),
+                    {
+                        wrapper,
+                    },
+                );
+                await act((): Promise<mixed> => notIntercepted);
+                const result = render.result.current;
 
-            // Assert
-            expect(result).toEqual({
-                status: "success",
-                data: "NOT INTERCEPTED",
+                // Assert
+                expect(result).toEqual({
+                    status: "success",
+                    data: "NOT INTERCEPTED",
+                });
             });
         });
     });

package/src/hooks/use-data.js

@@ -29,20 +29,41 @@ export const useData = <TOptions, TData: ValidData>(
     );
     const [result, setResult] = useState<?CacheEntry<TData>>(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) =>
+            interceptor.fulfillRequest(options) ??
+            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?.(handler, options);
+        maybeTrack?.(getMaybeInterceptedHandler(), options);
     }
 
-    // Lookup to see if there's an interceptor for the handler.
-    // If we have one, we need to replace the handler with one that
-    // uses the interceptor.
-    const interceptorMap = useContext(InterceptContext);
-    const interceptor = interceptorMap[handler.type];
-
     // We need to update our request when the handler changes or the key
     // to the options change, so we keep track of those.
     // However, even if we are hydrating from cache, we still need to make the
@@ -74,22 +95,6 @@ export const useData = <TOptions, TData: ValidData>(
             setResult(null);
         }
 
-        const getMaybeInterceptedHandler = () => {
-            if (interceptor == null) {
-                return handler;
-            }
-
-            const fulfillRequestFn = (options) =>
-                interceptor.fulfillRequest(options) ??
-                handler.fulfillRequest(options);
-            return {
-                fulfillRequest: fulfillRequestFn,
-                getKey: (options) => handler.getKey(options),
-                type: handler.type,
-                hydrate: handler.hydrate,
-            };
-        };
-
         // We aren't server-side, so let's make the request.
         // The request handler is in control of whether that request actually
         // happens or not.