@khanacademy/wonder-blocks-data 6.0.0 → 6.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-data
 
+## 6.0.1
+
+### Patch Changes
+
+-   5ad01891: [FIX] Make sure hydratable effect properly renders when requestId changes
+
 ## 6.0.0
 
 ### Major Changes

package/dist/es/index.js

@@ -1022,10 +1022,17 @@ 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.
 
   useSharedCache(requestId, // The key of the cached item

package/dist/index.js

@@ -952,10 +952,17 @@ 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

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": "6.0.1",
   "design": "v1",
   "publishConfig": {
     "access": "public"

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

@@ -413,6 +413,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/use-hydratable-effect.js

@@ -178,9 +178,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.