@khanacademy/wonder-blocks-data 6.0.0 → 7.0.1

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 28);
+/******/ 	return __webpack_require__(__webpack_require__.s = 27);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -885,11 +885,9 @@ class RequestFulfillment {
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return useHydratableEffect; });
 /* 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_abort_error_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(24);
-/* harmony import */ var _use_server_effect_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(14);
-/* harmony import */ var _use_shared_cache_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(8);
-/* harmony import */ var _use_cached_effect_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(15);
-
+/* harmony import */ var _use_server_effect_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14);
+/* harmony import */ var _use_shared_cache_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8);
+/* harmony import */ var _use_cached_effect_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(15);
 
 
 
@@ -898,7 +896,7 @@ class RequestFulfillment {
 /**
  * Policies to define how a hydratable effect should behave client-side.
  */
-const WhenClientSide = __webpack_require__(29).Mirrored(["DoNotHydrate", "ExecuteWhenNoResult", "ExecuteWhenNoSuccessResult", "AlwaysExecute"]);
+const WhenClientSide = __webpack_require__(28).Mirrored(["DoNotHydrate", "ExecuteWhenNoResult", "ExecuteWhenNoSuccessResult", "AlwaysExecute"]);
 const DefaultScope = "useHydratableEffect";
 /**
  * Hook to execute an async operation on server and client.
@@ -922,10 +920,11 @@ const useHydratableEffect = (requestId, handler, options = {}) => {
   // When client-side, this will look up any response for hydration; it does
   // not invoke the handler.
 
-  const serverResult = Object(_use_server_effect_js__WEBPACK_IMPORTED_MODULE_2__[/* useServerEffect */ "a"])(requestId, // If we're skipped (unlikely in server worlds, but maybe),
-  // just give an aborted response.
-  skip ? () => Promise.reject(new _util_abort_error_js__WEBPACK_IMPORTED_MODULE_1__[/* AbortError */ "a"]("skipped")) : handler, // Only hydrate if our behavior isn't telling us not to.
-  clientBehavior !== WhenClientSide.DoNotHydrate);
+  const serverResult = Object(_use_server_effect_js__WEBPACK_IMPORTED_MODULE_1__[/* useServerEffect */ "a"])(requestId, handler, {
+    // Only hydrate if our behavior isn't telling us not to.
+    hydrate: clientBehavior !== WhenClientSide.DoNotHydrate,
+    skip
+  });
   const getDefaultCacheValue = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => {
     // If we don't have a requestId, it's our first render, the one
     // where we hydrated. So defer to our clientBehavior value.
@@ -952,17 +951,24 @@ const useHydratableEffect = (requestId, handler, options = {}) => {
         }
 
         return null;
-    } // There is no reason for this to change after the first render.
+    } // There is no reason for this to change after the first render,
+    // you might think, but the function closes around serverResult and if
+    // the requestId changes, it still returns the hydrate result of the
+    // first render of the previous requestId. This then means that the
+    // hydrate result is still the same, and the effect is not re-executed
+    // because the cache gets incorrectly defaulted.
+    // However, we don't want to bother doing anything with this on
+    // client behavior changing since that truly is irrelevant.
     // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, []); // Instead of using state, which would be local to just this hook instance,
+  }, [serverResult]); // Instead of using state, which would be local to just this hook instance,
   // we use a shared in-memory cache.
 
-  Object(_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_3__[/* useSharedCache */ "b"])(requestId, // The key of the cached item
+  Object(_use_shared_cache_js__WEBPACK_IMPORTED_MODULE_2__[/* useSharedCache */ "b"])(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.
 
-  const clientResult = Object(_use_cached_effect_js__WEBPACK_IMPORTED_MODULE_4__[/* useCachedEffect */ "a"])(requestId, handler, {
+  const clientResult = Object(_use_cached_effect_js__WEBPACK_IMPORTED_MODULE_3__[/* useCachedEffect */ "a"])(requestId, handler, {
     skip,
     onResultChanged,
     retainResultOnChange,
@@ -1054,7 +1060,7 @@ const InterceptContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["create
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 /* harmony import */ var _util_ssr_cache_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5);
-/* harmony import */ var _util_result_from_cache_response_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(25);
+/* harmony import */ var _util_result_from_cache_response_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(24);
 /* harmony import */ var _use_request_interception_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(16);
 
 
@@ -1078,22 +1084,26 @@ const InterceptContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["create
  *
  * 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
+const useServerEffect = (requestId, handler, options = {}) => {
+  const {
+    hydrate = true,
+    skip = false
+  } = options; // Plug in to the request interception framework for code that wants
   // to use that.
+
   const interceptedHandler = Object(_use_request_interception_js__WEBPACK_IMPORTED_MODULE_5__[/* useRequestInterception */ "a"])(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 = _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 cachedResult = _util_ssr_cache_js__WEBPACK_IMPORTED_MODULE_3__[/* SsrCache */ "a"].Default.getEntry(requestId); // We only track data requests when we are server-side, we are not skipping
+  // the request, 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()) {
+  if (!skip && cachedResult == null && _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide()) {
     maybeTrack == null ? void 0 : maybeTrack(requestId, interceptedHandler, hydrate);
   } // A null result means there was no result to hydrate.
 
@@ -1510,8 +1520,8 @@ const 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_merge_gql_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(18);
-/* harmony import */ var _use_gql_router_context_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(26);
-/* harmony import */ var _util_get_gql_data_from_response_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(27);
+/* harmony import */ var _use_gql_router_context_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(25);
+/* harmony import */ var _util_get_gql_data_from_response_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(26);
 
 
 
@@ -1555,27 +1565,6 @@ const useGql = (context = {}) => {
 /* 24 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AbortError; });
-/**
- * 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";
-  }
-
-}
-
-/***/ }),
-/* 25 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return resultFromCachedResponse; });
 /* harmony import */ var _status_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
@@ -1613,7 +1602,7 @@ const resultFromCachedResponse = cacheEntry => {
 };
 
 /***/ }),
-/* 26 */
+/* 25 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1665,7 +1654,7 @@ const useGqlRouterContext = (contextOverrides = {}) => {
 };
 
 /***/ }),
-/* 27 */
+/* 26 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1735,7 +1724,7 @@ const getGqlDataFromResponse = async response => {
 };
 
 /***/ }),
-/* 28 */
+/* 27 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1882,7 +1871,7 @@ const removeAllFromCache = predicate => _util_ssr_cache_js__WEBPACK_IMPORTED_MOD
 
 
 /***/ }),
-/* 29 */
+/* 28 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";

package/legacy-docs.md

@@ -1,3 +1,3 @@
 Documentation for Wonder Blocks Data is now in Storybook.
 
-Either run `yarn start:storybook` locally, or visit the the stories for the `master` branch on [Chromatic](https://master--5e1bf4b385e3fb0020b7073c.chromatic.com).
+Either run `yarn start:storybook` locally, or visit the the stories for the `main` branch on [Chromatic](https://main--5e1bf4b385e3fb0020b7073c.chromatic.com).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-data",
-  "version": "6.0.0",
+  "version": "7.0.1",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -14,14 +14,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-core": "^4.3.0"
+    "@khanacademy/wonder-blocks-core": "^4.3.1"
   },
   "peerDependencies": {
     "@khanacademy/wonder-stuff-core": "^0.1.2",
     "react": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.3.0"
+    "wb-dev-build-settings": "^0.4.0"
   },
   "author": "",
   "license": "MIT"

package/src/__docs__/exports.use-server-effect.stories.mdx

@@ -15,12 +15,24 @@ import {Meta} from "@storybook/addon-docs";
 function useServerEffect<TData: ValidCacheData>(
     requestId: string,
     handler: () => Promise<TData>,
-    hydrate: boolean = true,
+    options?: ServerEffectOptions,
 ): ?Result<TData>;
 ```
 
 The `useServerEffect` hook is an integral part of server-side rendering. It has different behavior depending on whether it is running on the server (and in what context) or the client.
 
+```ts
+type ServerEffectOptions = {|
+    skip?: boolean,
+    hydrate?: boolean,
+|};
+```
+
+| Option | Default | Description |
+| ------ | ------- | ----------- |
+| `hydrate` | `true` | When `true`, the result of the effect when fulfilled using Wonder Blocks Data will be stored in the hydration cache for hydrating client-side; otherwise, the result will be stored in the server-side-only cache. |
+| `skip` | `false` | When `true`, the effect will not be tracked for fulfillment; otherwise, the effect will be tracked for fulfillment. |
+
 ## Server-side behavior
 
 First, this hook checks the server-side rendering cache for the request identifier; if it finds a cached value, it will return that.

package/src/hooks/__tests__/use-hydratable-effect.test.js

@@ -107,34 +107,11 @@ describe("#useHydratableEffect", () => {
                 expect(useServerEffectSpy).toHaveBeenCalledWith(
                     "ID",
                     fakeHandler,
-                    hydrate,
+                    {hydrate, skip: false},
                 );
             },
         );
 
-        it("should pass an abort handler to useServerEffect when skip is true", async () => {
-            // Arrange
-            jest.spyOn(
-                UseRequestInterception,
-                "useRequestInterception",
-            ).mockReturnValue(jest.fn());
-            const fakeHandler = jest.fn();
-            const useServerEffectSpy = jest
-                .spyOn(UseServerEffect, "useServerEffect")
-                .mockReturnValue(null);
-
-            // Act
-            serverRenderHook(() =>
-                useHydratableEffect("ID", fakeHandler, {skip: true}),
-            );
-            const underTest = useServerEffectSpy.mock.calls[0][1]();
-
-            // Assert
-            await expect(underTest).rejects.toMatchInlineSnapshot(
-                `[AbortError: skipped]`,
-            );
-        });
-
         it.each`
             scope        | expectedScope
             ${undefined} | ${"useHydratableEffect"}
@@ -247,7 +224,7 @@ describe("#useHydratableEffect", () => {
                 expect(useServerEffectSpy).toHaveBeenCalledWith(
                     "ID",
                     fakeHandler,
-                    hydrate,
+                    {hydrate, skip: false},
                 );
             },
         );
@@ -413,6 +390,26 @@ describe("#useHydratableEffect", () => {
             expect(fakeHandler).toHaveBeenCalledTimes(2);
         });
 
+        it("should default shared cache to hydrate value for new requestId", async () => {
+            // Arrange
+            const fakeHandler = jest.fn().mockResolvedValue("data");
+            jest.spyOn(UseServerEffect, "useServerEffect")
+                .mockReturnValueOnce(Status.success("BADDATA"))
+                .mockReturnValue(null);
+
+            // Act
+            const {rerender, result} = clientRenderHook(
+                ({requestId}) => useHydratableEffect(requestId, fakeHandler),
+                {
+                    initialProps: {requestId: "ID"},
+                },
+            );
+            rerender({requestId: "ID2"});
+
+            // Assert
+            expect(result.current).toStrictEqual(Status.loading());
+        });
+
         it("should update shared cache with result when request is fulfilled", async () => {
             // Arrange
             const setCacheFn = jest.fn();

package/src/hooks/__tests__/use-server-effect.test.js

@@ -109,6 +109,57 @@ describe("#useServerEffect", () => {
             );
         });
 
+        it("should not track the intercepted request if skip is true", () => {
+            // Arrange
+            const fakeHandler = jest.fn();
+            const interceptedHandler = jest.fn();
+            jest.spyOn(
+                UseRequestInterception,
+                "useRequestInterception",
+            ).mockReturnValue(interceptedHandler);
+            const trackDataRequestSpy = jest.spyOn(
+                RequestTracker.Default,
+                "trackDataRequest",
+            );
+
+            // Act
+            serverRenderHook(
+                () => useServerEffect("ID", fakeHandler, {skip: true}),
+                {
+                    wrapper: TrackData,
+                },
+            );
+
+            // Assert
+            expect(trackDataRequestSpy).not.toHaveBeenCalled();
+        });
+
+        it("should not track the intercepted request if there is a cached result", () => {
+            // Arrange
+            const fakeHandler = jest.fn();
+            const interceptedHandler = jest.fn();
+            jest.spyOn(SsrCache.Default, "getEntry").mockReturnValueOnce({
+                data: "DATA",
+                error: null,
+            });
+            jest.spyOn(
+                UseRequestInterception,
+                "useRequestInterception",
+            ).mockReturnValue(interceptedHandler);
+            const trackDataRequestSpy = jest.spyOn(
+                RequestTracker.Default,
+                "trackDataRequest",
+            );
+
+            // Act
+            serverRenderHook(() => useServerEffect("ID", fakeHandler), {
+                wrapper: TrackData,
+            });
+
+            // Assert
+            expect(trackDataRequestSpy).not.toHaveBeenCalled();
+        });
+
         it("should return data cached result", () => {
             // Arrange
             const fakeHandler = jest.fn();

package/src/hooks/use-hydratable-effect.js

@@ -1,8 +1,6 @@
 // @flow
 import * as React from "react";
 
-import {AbortError} from "../util/abort-error.js";
-
 import {useServerEffect} from "./use-server-effect.js";
 import {useSharedCache} from "./use-shared-cache.js";
 import {useCachedEffect} from "./use-cached-effect.js";
@@ -141,16 +139,11 @@ export const useHydratableEffect = <TData: ValidCacheData>(
     // 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,
-
+    const serverResult = useServerEffect(requestId, handler, {
         // Only hydrate if our behavior isn't telling us not to.
-        clientBehavior !== WhenClientSide.DoNotHydrate,
-    );
+        hydrate: clientBehavior !== WhenClientSide.DoNotHydrate,
+        skip,
+    });
 
     const getDefaultCacheValue: () => ?Result<TData> = React.useCallback(() => {
         // If we don't have a requestId, it's our first render, the one
@@ -178,9 +171,16 @@ export const useHydratableEffect = <TData: ValidCacheData>(
                 }
                 return null;
         }
-        // There is no reason for this to change after the first render.
+        // There is no reason for this to change after the first render,
+        // you might think, but the function closes around serverResult and if
+        // the requestId changes, it still returns the hydrate result of the
+        // first render of the previous requestId. This then means that the
+        // hydrate result is still the same, and the effect is not re-executed
+        // because the cache gets incorrectly defaulted.
+        // However, we don't want to bother doing anything with this on
+        // client behavior changing since that truly is irrelevant.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [serverResult]);
 
     // Instead of using state, which would be local to just this hook instance,
     // we use a shared in-memory cache.

package/src/hooks/use-server-effect.js

@@ -8,6 +8,29 @@ import {useRequestInterception} from "./use-request-interception.js";
 
 import type {Result, ValidCacheData} from "../util/types.js";
 
+type ServerEffectOptions = {|
+    /**
+     * When `true`, the result of the effect when fulfilled using Wonder Blocks
+     * Data will be stored in the hydration cache for hydrating client-side;
+     * otherwise, the result will be stored in the server-side-only cache.
+     *
+     * This should only be set to `false` if something else will be responsible
+     * for hydration of the data on the client-side (for example, if Apollo's
+     * hydration support is used).
+     *
+     * Default is `true`.
+     */
+    hydrate?: boolean,
+
+    /**
+     * When `true`, the effect will not be tracked for fulfillment; otherwise,
+     * the effect will be tracked for fulfillment.
+     *
+     * Default is `false`.
+     */
+    skip?: boolean,
+|};
+
 /**
  * Hook to perform an asynchronous action during server-side rendering.
  *
@@ -26,8 +49,10 @@ import type {Result, ValidCacheData} from "../util/types.js";
 export const useServerEffect = <TData: ValidCacheData>(
     requestId: string,
     handler: () => Promise<TData>,
-    hydrate: boolean = true,
+    options: ServerEffectOptions = ({}: $Shape<ServerEffectOptions>),
 ): ?Result<TData> => {
+    const {hydrate = true, skip = false} = options;
+
     // Plug in to the request interception framework for code that wants
     // to use that.
     const interceptedHandler = useRequestInterception(requestId, handler);
@@ -39,11 +64,11 @@ export const useServerEffect = <TData: ValidCacheData>(
     // initial render - and subsequent renders on the client it will be null.
     const cachedResult = SsrCache.Default.getEntry<TData>(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).
+    // We only track data requests when we are server-side, we are not skipping
+    // the request, 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()) {
+    if (!skip && cachedResult == null && Server.isServerSide()) {
         maybeTrack?.(requestId, interceptedHandler, hydrate);
     }
 

package/src/util/abort-error.js

@@ -1,15 +0,0 @@
-// @flow
-
-/**
- * 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.
- */
-export class AbortError extends Error {
-    constructor(message: string) {
-        super(message);
-        this.name = "AbortError";
-    }
-}