@khanacademy/wonder-blocks-data 11.0.16 → 13.0.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @khanacademy/wonder-blocks-data
 
+## 13.0.0
+
+### Major Changes
+
+-   65c02cff: Return new no-data state from useCachedEffect when it is not loading and there is no data to return
+
+### Patch Changes
+
+-   Updated dependencies [1920feb8]
+    -   @khanacademy/wonder-blocks-core@6.0.1
+
+## 12.0.0
+
+### Major Changes
+
+-   674a1e5c: POJOs have been replace with TS enums
+
+### Patch Changes
+
+-   674a1e5c: We're no longer building flow types
+-   Updated dependencies [674a1e5c]
+-   Updated dependencies [674a1e5c]
+    -   @khanacademy/wonder-blocks-core@6.0.0
+
 ## 11.0.16
 
 ### Patch Changes

package/dist/components/data.d.ts

@@ -41,12 +41,12 @@ TData extends ValidCacheData> = {
      * loading state and data or error that gets retrieved from cache or loaded
      * via the request if no cached value is available.
      */
-    children: (result: Result<TData>) => React.ReactNode;
+    children: (result: Result<TData>) => React.ReactElement | null;
 };
 /**
  * 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.
  */
-declare const Data: <TData extends ValidCacheData>({ requestId, handler, children, retainResultOnChange, clientBehavior, }: Props<TData>) => React.ReactElement;
+declare const Data: <TData extends ValidCacheData>({ requestId, handler, children, retainResultOnChange, clientBehavior, }: Props<TData>) => React.ReactElement | null;
 export default Data;

package/dist/es/index.js

@@ -3,12 +3,13 @@ import { KindError, clone, entries } from '@khanacademy/wonder-stuff-core';
 import * as React from 'react';
 import { useContext, useRef, useMemo, useCallback } from 'react';
 
-const FetchPolicy = {
-  CacheBeforeNetwork: "CacheBeforeNetwork",
-  CacheAndNetwork: "CacheAndNetwork",
-  CacheOnly: "CacheOnly",
-  NetworkOnly: "NetworkOnly"
-};
+let FetchPolicy = function (FetchPolicy) {
+  FetchPolicy["CacheBeforeNetwork"] = "CacheBeforeNetwork";
+  FetchPolicy["CacheAndNetwork"] = "CacheAndNetwork";
+  FetchPolicy["CacheOnly"] = "CacheOnly";
+  FetchPolicy["NetworkOnly"] = "NetworkOnly";
+  return FetchPolicy;
+}({});
 
 const DataErrors = Object.freeze({
   Unknown: "Unknown",
@@ -161,9 +162,9 @@ class SsrCache {
       this._ssrOnlyCache.purgeAll(realPredicate);
     };
     this.cloneHydratableData = () => {
-      var _cache$DefaultScope;
+      var _ref;
       const cache = this._hydrationCache.clone();
-      return (_cache$DefaultScope = cache[DefaultScope$2]) != null ? _cache$DefaultScope : {};
+      return (_ref = cache[DefaultScope$2]) != null ? _ref : {};
     };
     this._ssrOnlyCache = ssrOnlyCache || new SerializableInMemoryCache();
     this._hydrationCache = hydrationCache || new SerializableInMemoryCache();
@@ -260,7 +261,7 @@ class RequestTracker {
     }
     return _default;
   }
-  constructor(responseCache = undefined) {
+  constructor(responseCache) {
     this._trackedRequests = {};
     this._responseCache = void 0;
     this._requestFulfillment = void 0;
@@ -378,11 +379,15 @@ class TrackData extends React.Component {
 const loadingStatus = Object.freeze({
   status: "loading"
 });
+const noDataStatus = Object.freeze({
+  status: "no-data"
+});
 const abortedStatus = Object.freeze({
   status: "aborted"
 });
 const Status = Object.freeze({
   loading: () => loadingStatus,
+  noData: () => noDataStatus,
   aborted: () => abortedStatus,
   success: data => ({
     status: "success",
@@ -526,19 +531,20 @@ const useCachedEffect = (requestId, handler, options = {}) => {
       currentRequestRef.current = null;
     };
   }, [shouldFetch, fetchRequest]);
-  const lastResultAgnosticOfIdRef = React.useRef(Status.loading());
-  const loadingResult = retainResultOnChange ? lastResultAgnosticOfIdRef.current : Status.loading();
+  const lastResultAgnosticOfIdRef = React.useRef(Status.noData());
+  const loadingResult = retainResultOnChange ? lastResultAgnosticOfIdRef.current : shouldFetch ? Status.loading() : Status.noData();
   const result = (_ref = fetchPolicy === FetchPolicy.NetworkOnly ? networkResultRef.current : mostRecentResult) != null ? _ref : loadingResult;
   lastResultAgnosticOfIdRef.current = result;
   return [result, fetchRequest];
 };
 
-const WhenClientSide = {
-  DoNotHydrate: "DoNotHydrate",
-  ExecuteWhenNoResult: "ExecuteWhenNoResult",
-  ExecuteWhenNoSuccessResult: "ExecuteWhenNoSuccessResult",
-  AlwaysExecute: "AlwaysExecute"
-};
+let WhenClientSide = function (WhenClientSide) {
+  WhenClientSide["DoNotHydrate"] = "DoNotHydrate";
+  WhenClientSide["ExecuteWhenNoResult"] = "ExecuteWhenNoResult";
+  WhenClientSide["ExecuteWhenNoSuccessResult"] = "ExecuteWhenNoSuccessResult";
+  WhenClientSide["AlwaysExecute"] = "AlwaysExecute";
+  return WhenClientSide;
+}({});
 const DefaultScope = "useHydratableEffect";
 const useHydratableEffect = (requestId, handler, options = {}) => {
   const {
@@ -839,7 +845,7 @@ const useGql = (context = {}) => {
       context = {}
     } = options;
     const finalContext = mergeGqlContext(defaultContext, context);
-    return fetch(operation, variables, finalContext).then(getGqlDataFromResponse);
+    return fetch(operation, variables, finalContext).then(response => getGqlDataFromResponse(response));
   }, [gqlRouterContext]);
   return gqlFetch;
 };

package/dist/hooks/use-gql.d.ts

@@ -1,4 +1,7 @@
 import type { GqlContext, GqlOperation, GqlFetchOptions } from "../util/gql-types";
+interface GqlFetchFn<TContext extends GqlContext> {
+    <TData, TVariables extends Record<any, any>>(operation: GqlOperation<TData, TVariables>, options?: GqlFetchOptions<TVariables, TContext>): Promise<TData>;
+}
 /**
  * Hook to obtain a gqlFetch function for performing GraphQL requests.
  *
@@ -9,4 +12,5 @@ import type { GqlContext, GqlOperation, GqlFetchOptions } from "../util/gql-type
  * Values in the partial context given to the returned fetch function will
  * only be included if they have a value other than undefined.
  */
-export declare const useGql: <TContext extends GqlContext>(context?: Partial<TContext>) => <TData, TVariables extends Record<any, any>>(operation: GqlOperation<TData, TVariables>, options?: GqlFetchOptions<TVariables, TContext> | undefined) => Promise<TData>;
+export declare const useGql: <TContext extends GqlContext>(context?: Partial<TContext>) => GqlFetchFn<TContext>;
+export {};

package/dist/hooks/use-hydratable-effect.d.ts

@@ -2,7 +2,7 @@ import type { Result, ValidCacheData } from "../util/types";
 /**
  * Policies to define how a hydratable effect should behave client-side.
  */
-export declare const WhenClientSide: {
+export declare enum WhenClientSide {
     /**
      * The result from executing the effect server-side will not be hydrated.
      * The effect will always be executed client-side.
@@ -11,14 +11,14 @@ export declare const WhenClientSide: {
      * for properly hydrating this component (for example, the action invokes
      * Apollo which manages its own cache to ensure things render properly).
      */
-    readonly DoNotHydrate: "DoNotHydrate";
+    DoNotHydrate = "DoNotHydrate",
     /**
      * The result from executing the effect server-side will be hydrated.
      * The effect will only execute client-side if there was no result to
      * be hydrated (i.e. both error and success hydration results prevent the
      * effect running client-side).
      */
-    readonly ExecuteWhenNoResult: "ExecuteWhenNoResult";
+    ExecuteWhenNoResult = "ExecuteWhenNoResult",
     /**
      * The result from executing the effect server-side will be hydrated.
      * If the hydrated result is a success result, the effect will not be
@@ -26,14 +26,14 @@ export declare const WhenClientSide: {
      * If the hydrated result was not a success result, or there was no
      * hydrated result, the effect will not be executed.
      */
-    readonly ExecuteWhenNoSuccessResult: "ExecuteWhenNoSuccessResult";
+    ExecuteWhenNoSuccessResult = "ExecuteWhenNoSuccessResult",
     /**
      * The result from executing the effect server-side will be hydrated.
      * The effect will always be executed client-side, regardless of the
      * hydrated result status.
      */
-    readonly AlwaysExecute: "AlwaysExecute";
-};
+    AlwaysExecute = "AlwaysExecute"
+}
 type HydratableEffectOptions<TData extends ValidCacheData> = {
     /**
      * How the hook should behave when rendering client-side for the first time.

package/dist/index.js

@@ -26,12 +26,13 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-const FetchPolicy = {
-  CacheBeforeNetwork: "CacheBeforeNetwork",
-  CacheAndNetwork: "CacheAndNetwork",
-  CacheOnly: "CacheOnly",
-  NetworkOnly: "NetworkOnly"
-};
+let FetchPolicy = function (FetchPolicy) {
+  FetchPolicy["CacheBeforeNetwork"] = "CacheBeforeNetwork";
+  FetchPolicy["CacheAndNetwork"] = "CacheAndNetwork";
+  FetchPolicy["CacheOnly"] = "CacheOnly";
+  FetchPolicy["NetworkOnly"] = "NetworkOnly";
+  return FetchPolicy;
+}({});
 
 const DataErrors = Object.freeze({
   Unknown: "Unknown",
@@ -184,9 +185,9 @@ class SsrCache {
       this._ssrOnlyCache.purgeAll(realPredicate);
     };
     this.cloneHydratableData = () => {
-      var _cache$DefaultScope;
+      var _ref;
       const cache = this._hydrationCache.clone();
-      return (_cache$DefaultScope = cache[DefaultScope$2]) != null ? _cache$DefaultScope : {};
+      return (_ref = cache[DefaultScope$2]) != null ? _ref : {};
     };
     this._ssrOnlyCache = ssrOnlyCache || new SerializableInMemoryCache();
     this._hydrationCache = hydrationCache || new SerializableInMemoryCache();
@@ -283,7 +284,7 @@ class RequestTracker {
     }
     return _default;
   }
-  constructor(responseCache = undefined) {
+  constructor(responseCache) {
     this._trackedRequests = {};
     this._responseCache = void 0;
     this._requestFulfillment = void 0;
@@ -401,11 +402,15 @@ class TrackData extends React__namespace.Component {
 const loadingStatus = Object.freeze({
   status: "loading"
 });
+const noDataStatus = Object.freeze({
+  status: "no-data"
+});
 const abortedStatus = Object.freeze({
   status: "aborted"
 });
 const Status = Object.freeze({
   loading: () => loadingStatus,
+  noData: () => noDataStatus,
   aborted: () => abortedStatus,
   success: data => ({
     status: "success",
@@ -549,19 +554,20 @@ const useCachedEffect = (requestId, handler, options = {}) => {
       currentRequestRef.current = null;
     };
   }, [shouldFetch, fetchRequest]);
-  const lastResultAgnosticOfIdRef = React__namespace.useRef(Status.loading());
-  const loadingResult = retainResultOnChange ? lastResultAgnosticOfIdRef.current : Status.loading();
+  const lastResultAgnosticOfIdRef = React__namespace.useRef(Status.noData());
+  const loadingResult = retainResultOnChange ? lastResultAgnosticOfIdRef.current : shouldFetch ? Status.loading() : Status.noData();
   const result = (_ref = fetchPolicy === FetchPolicy.NetworkOnly ? networkResultRef.current : mostRecentResult) != null ? _ref : loadingResult;
   lastResultAgnosticOfIdRef.current = result;
   return [result, fetchRequest];
 };
 
-const WhenClientSide = {
-  DoNotHydrate: "DoNotHydrate",
-  ExecuteWhenNoResult: "ExecuteWhenNoResult",
-  ExecuteWhenNoSuccessResult: "ExecuteWhenNoSuccessResult",
-  AlwaysExecute: "AlwaysExecute"
-};
+let WhenClientSide = function (WhenClientSide) {
+  WhenClientSide["DoNotHydrate"] = "DoNotHydrate";
+  WhenClientSide["ExecuteWhenNoResult"] = "ExecuteWhenNoResult";
+  WhenClientSide["ExecuteWhenNoSuccessResult"] = "ExecuteWhenNoSuccessResult";
+  WhenClientSide["AlwaysExecute"] = "AlwaysExecute";
+  return WhenClientSide;
+}({});
 const DefaultScope = "useHydratableEffect";
 const useHydratableEffect = (requestId, handler, options = {}) => {
   const {
@@ -862,7 +868,7 @@ const useGql = (context = {}) => {
       context = {}
     } = options;
     const finalContext = mergeGqlContext(defaultContext, context);
-    return fetch(operation, variables, finalContext).then(getGqlDataFromResponse);
+    return fetch(operation, variables, finalContext).then(response => getGqlDataFromResponse(response));
   }, [gqlRouterContext]);
   return gqlFetch;
 };

package/dist/util/status.d.ts

@@ -4,7 +4,8 @@ import type { Result, ValidCacheData } from "./types";
  */
 export declare const Status: Readonly<{
     loading: <TData extends ValidCacheData = ValidCacheData>() => Result<TData>;
-    aborted: <TData_1 extends ValidCacheData = ValidCacheData>() => Result<TData_1>;
-    success: <TData_2 extends ValidCacheData>(data: TData_2) => Result<TData_2>;
-    error: <TData_3 extends ValidCacheData = ValidCacheData>(error: Error) => Result<TData_3>;
+    noData: <TData_1 extends ValidCacheData = ValidCacheData>() => Result<TData_1>;
+    aborted: <TData_2 extends ValidCacheData = ValidCacheData>() => Result<TData_2>;
+    success: <TData_3 extends ValidCacheData>(data: TData_3) => Result<TData_3>;
+    error: <TData_4 extends ValidCacheData = ValidCacheData>(error: Error) => Result<TData_4>;
 }>;

package/dist/util/types.d.ts

@@ -2,26 +2,26 @@ import type { Metadata } from "@khanacademy/wonder-stuff-core";
 /**
  * Defines the various fetch policies that can be applied to requests.
  */
-export declare const FetchPolicy: {
+export declare enum FetchPolicy {
     /**
      * If the data is in the cache, return that; otherwise, fetch from the
      * server.
      */
-    readonly CacheBeforeNetwork: "CacheBeforeNetwork";
+    CacheBeforeNetwork = "CacheBeforeNetwork",
     /**
      * If the data is in the cache, return that; always fetch from the server
      * regardless of cache.
      */
-    readonly CacheAndNetwork: "CacheAndNetwork";
+    CacheAndNetwork = "CacheAndNetwork",
     /**
      * If the data is in the cache, return that; otherwise, do nothing.
      */
-    readonly CacheOnly: "CacheOnly";
+    CacheOnly = "CacheOnly",
     /**
      * Ignore any existing cached result; always fetch from the server.
      */
-    readonly NetworkOnly: "NetworkOnly";
-};
+    NetworkOnly = "NetworkOnly"
+}
 /**
  * Define what can be cached.
  *
@@ -34,6 +34,8 @@ export type ValidCacheData = string | boolean | number | Record<any, any> | Arra
  */
 export type Result<TData extends ValidCacheData> = {
     status: "loading";
+} | {
+    status: "no-data";
 } | {
     status: "success";
     data: TData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-data",
-  "version": "11.0.16",
+  "version": "13.0.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -14,14 +14,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-core": "^5.4.0"
+    "@khanacademy/wonder-blocks-core": "^6.0.1"
   },
   "peerDependencies": {
     "@khanacademy/wonder-stuff-core": "^1.2.2",
     "react": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.9.7"
+    "@khanacademy/wb-dev-build-settings": "^1.0.0"
   },
   "author": "",
   "license": "MIT"

package/src/components/__tests__/data.test.tsx

@@ -47,7 +47,7 @@ describe("Data", () => {
 
             it("should make request for data on construction", async () => {
                 // Arrange
-                const response = Promise.resolve("data");
+                const response: any = Promise.resolve("data");
                 const fakeHandler = jest.fn().mockReturnValue(response);
                 const fakeChildrenFn = jest.fn(() => null);
 
@@ -57,7 +57,6 @@ describe("Data", () => {
                         {fakeChildrenFn}
                     </Data>,
                 );
-                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
                 await act(() => response);
 
                 // Assert
@@ -66,7 +65,7 @@ describe("Data", () => {
 
             it("should initially render children with loading", async () => {
                 // Arrange
-                const response = Promise.resolve("data");
+                const response: any = Promise.resolve("data");
                 const fakeHandler = jest.fn().mockReturnValue(response);
                 const fakeChildrenFn = jest.fn(() => null);
 
@@ -76,7 +75,6 @@ describe("Data", () => {
                         {fakeChildrenFn}
                     </Data>,
                 );
-                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
                 await act(() => response);
 
                 // Assert
@@ -272,7 +270,7 @@ describe("Data", () => {
 
             it("should ignore resolution of pending handler fulfillment when id changes", async () => {
                 // Arrange
-                const oldRequest = Promise.resolve("OLD DATA");
+                const oldRequest: any = Promise.resolve("OLD DATA");
                 const oldHandler = jest
                     .fn()
                     .mockReturnValueOnce(oldRequest)
@@ -294,7 +292,6 @@ describe("Data", () => {
                         {fakeChildrenFn}
                     </Data>,
                 );
-                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
                 await act(() => oldRequest);
 
                 // Assert
@@ -343,14 +340,13 @@ describe("Data", () => {
 
             it("should ignore catastrophic request fulfillment when id changes", async () => {
                 // Arrange
-                const catastrophe = Promise.resolve({
+                const catastrophe: any = Promise.resolve({
                     status: "error",
                     error: new Error("CATASTROPHE!"),
                 });
                 jest.spyOn(
                     RequestFulfillment.Default,
                     "fulfill",
-                    // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'Promise<{ status: string; error: Error; }>' is not assignable to parameter of type 'Promise<Result<ValidCacheData>>'.
                 ).mockReturnValueOnce(catastrophe);
                 const oldHandler = jest.fn().mockResolvedValue("OLD DATA");
 
@@ -367,7 +363,6 @@ describe("Data", () => {
                     </Data>,
                 );
                 await act(() =>
-                    // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
                     catastrophe.catch(() => {
                         /* ignore */
                     }),
@@ -428,8 +423,8 @@ describe("Data", () => {
 
             it("should retain old data while reloading if retainResultOnChange is true", async () => {
                 // Arrange
-                const response1 = Promise.resolve("data1");
-                const response2 = Promise.resolve("data2");
+                const response1: any = Promise.resolve("data1");
+                const response2: any = Promise.resolve("data2");
                 const fakeHandler1 = () => response1;
                 const fakeHandler2 = () => response2;
                 const fakeChildrenFn = jest.fn(() => null);
@@ -445,7 +440,6 @@ describe("Data", () => {
                     </Data>,
                 );
                 fakeChildrenFn.mockClear();
-                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
                 await act(() => response1);
                 wrapper.rerender(
                     <Data
@@ -456,7 +450,6 @@ describe("Data", () => {
                         {fakeChildrenFn}
                     </Data>,
                 );
-                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
                 await act(() => response2);
 
                 // Assert

package/src/components/data.ts

@@ -48,7 +48,7 @@ type Props<
      * loading state and data or error that gets retrieved from cache or loaded
      * via the request if no cached value is available.
      */
-    children: (result: Result<TData>) => React.ReactNode;
+    children: (result: Result<TData>) => React.ReactElement | null;
 };
 
 /**
@@ -62,13 +62,11 @@ const Data = <TData extends ValidCacheData>({
     children,
     retainResultOnChange = false,
     clientBehavior = WhenClientSide.ExecuteWhenNoSuccessResult,
-}: Props<TData>): React.ReactElement => {
+}: Props<TData>): React.ReactElement | null => {
     const result = useHydratableEffect(requestId, handler, {
         retainResultOnChange,
         clientBehavior,
     });
-    // @ts-expect-error: React TS types don't allow functional components to return
-    // ReactNodes even though React itself does.
     return children(result);
 };