@khanacademy/wonder-blocks-data 10.0.5 → 10.1.1

package/src/index.ts

@@ -0,0 +1,46 @@
+export {FetchPolicy} from "./util/types";
+export type {
+    ErrorOptions,
+    ResponseCache,
+    CachedResponse,
+    Result,
+    RawScopedCache,
+    ValidCacheData,
+    ScopedCache,
+} from "./util/types";
+
+export * from "./util/hydration-cache-api";
+export * from "./util/request-api";
+export {purgeCaches} from "./util/purge-caches";
+export {default as TrackData} from "./components/track-data";
+export {default as Data} from "./components/data";
+export {default as InterceptRequests} from "./components/intercept-requests";
+export {DataError, DataErrors} from "./util/data-error";
+export {useServerEffect} from "./hooks/use-server-effect";
+export {useCachedEffect} from "./hooks/use-cached-effect";
+export {useSharedCache, SharedCache} from "./hooks/use-shared-cache";
+export {
+    useHydratableEffect,
+    WhenClientSide,
+} from "./hooks/use-hydratable-effect";
+export {ScopedInMemoryCache} from "./util/scoped-in-memory-cache";
+export {SerializableInMemoryCache} from "./util/serializable-in-memory-cache";
+export {Status} from "./util/status";
+
+////////////////////////////////////////////////////////////////////////////////
+// GraphQL
+////////////////////////////////////////////////////////////////////////////////
+export {getGqlRequestId} from "./util/get-gql-request-id";
+export {getGqlDataFromResponse} from "./util/get-gql-data-from-response";
+export {graphQLDocumentNodeParser} from "./util/graphql-document-node-parser";
+export {toGqlOperation} from "./util/to-gql-operation";
+export {GqlRouter} from "./components/gql-router";
+export {useGql} from "./hooks/use-gql";
+export {GqlError, GqlErrors} from "./util/gql-error";
+export type {
+    GqlContext,
+    GqlOperation,
+    GqlOperationType,
+    GqlFetchOptions,
+    GqlFetchFn,
+} from "./util/gql-types";

package/src/util/__tests__/{get-gql-data-from-response.test.js → get-gql-data-from-response.test.ts}

@@ -1,5 +1,4 @@
-// @flow
-import {getGqlDataFromResponse} from "../get-gql-data-from-response.js";
+import {getGqlDataFromResponse} from "../get-gql-data-from-response";
 
 describe("#getGqlDataFromReponse", () => {
     it("should throw if the response cannot be parsed", async () => {

package/src/util/__tests__/{get-gql-request-id.test.js → get-gql-request-id.test.ts}

@@ -1,6 +1,4 @@
-// @flow
-
-import {getGqlRequestId} from "../get-gql-request-id.js";
+import {getGqlRequestId} from "../get-gql-request-id";
 
 describe("#getGqlRequestId", () => {
     it("should include the id of the query", () => {
@@ -8,7 +6,7 @@ describe("#getGqlRequestId", () => {
         const operation = {
             type: "query",
             id: "myQuery",
-        };
+        } as const;
 
         // Act
         const requestId = getGqlRequestId(operation, null, {
@@ -27,12 +25,12 @@ describe("#getGqlRequestId", () => {
         const operation = {
             type: "query",
             id: "myQuery",
-        };
+        } as const;
         const context = {
             context3: "value3",
             context2: "value2",
             context1: "value1",
-        };
+        } as const;
 
         // Act
         const requestId = getGqlRequestId(operation, null, context);
@@ -49,14 +47,14 @@ describe("#getGqlRequestId", () => {
         const operation = {
             type: "query",
             id: "myQuery",
-        };
+        } as const;
         const variables = {
             variable4: null,
             variable2: 42,
             variable1: "value1",
             variable5: true,
             variable3: undefined,
-        };
+        } as const;
 
         // Act
         const requestId = getGqlRequestId(operation, variables, {
@@ -77,7 +75,7 @@ describe("#getGqlRequestId", () => {
         const operation = {
             type: "query",
             id: "myQuery",
-        };
+        } as const;
         const variables = {
             variable4: null,
             variable2: 42,
@@ -89,7 +87,7 @@ describe("#getGqlRequestId", () => {
                 nested1: "nested1",
             },
             variable7: [1, 2, 3],
-        };
+        } as const;
 
         // Act
         const requestId = getGqlRequestId(operation, variables, {
@@ -110,13 +108,13 @@ describe("#getGqlRequestId", () => {
         const operation = {
             type: "query",
             id: "myQuery",
-        };
+        } as const;
         const variables = {
             variable1: {
                 date: new Date("2020-01-01"),
                 error: new Error("BOOM!"),
             },
-        };
+        } as const;
 
         // Act
         const requestId = getGqlRequestId(operation, variables, {

package/src/util/__tests__/{graphql-document-node-parser.test.js → graphql-document-node-parser.test.ts}

@@ -1,5 +1,4 @@
-// @flow
-import {graphQLDocumentNodeParser} from "../graphql-document-node-parser.js";
+import {graphQLDocumentNodeParser} from "../graphql-document-node-parser";
 
 describe("#graphQLDocumentNodeParser", () => {
     describe("in production - shorter error messages", () => {
@@ -61,7 +60,7 @@ describe("#graphQLDocumentNodeParser", () => {
                         },
                     },
                 ],
-            };
+            } as const;
 
             // Act
             const underTest = () => graphQLDocumentNodeParser(documentNode);
@@ -87,7 +86,7 @@ describe("#graphQLDocumentNodeParser", () => {
                         },
                     },
                 ],
-            };
+            } as const;
 
             // Act
             const underTest = () => graphQLDocumentNodeParser(documentNode);
@@ -122,7 +121,7 @@ describe("#graphQLDocumentNodeParser", () => {
                         },
                     },
                 ],
-            };
+            } as const;
 
             // Act
             const underTest = () => graphQLDocumentNodeParser(documentNode);
@@ -157,7 +156,7 @@ describe("#graphQLDocumentNodeParser", () => {
                         },
                     },
                 ],
-            };
+            } as const;
 
             // Act
             const underTest = () => graphQLDocumentNodeParser(documentNode);
@@ -192,7 +191,7 @@ describe("#graphQLDocumentNodeParser", () => {
                         },
                     },
                 ],
-            };
+            } as const;
 
             // Act
             const underTest = () => graphQLDocumentNodeParser(documentNode);
@@ -207,7 +206,7 @@ describe("#graphQLDocumentNodeParser", () => {
     describe("not in production - more informative error messages", () => {
         it("should throw if the document lacks the kind property", () => {
             // Arrange
-            const documentNode = ({}: any);
+            const documentNode = {} as any;
 
             // Act
             const underTest = () => graphQLDocumentNodeParser(documentNode);
@@ -250,7 +249,7 @@ describe("#graphQLDocumentNodeParser", () => {
                         },
                     },
                 ],
-            };
+            } as const;
 
             // Act
             const underTest = () => graphQLDocumentNodeParser(documentNode);
@@ -276,7 +275,7 @@ describe("#graphQLDocumentNodeParser", () => {
                         },
                     },
                 ],
-            };
+            } as const;
 
             // Act
             const underTest = () => graphQLDocumentNodeParser(documentNode);
@@ -311,7 +310,7 @@ describe("#graphQLDocumentNodeParser", () => {
                         },
                     },
                 ],
-            };
+            } as const;
 
             // Act
             const underTest = () => graphQLDocumentNodeParser(documentNode);
@@ -346,7 +345,7 @@ describe("#graphQLDocumentNodeParser", () => {
                         },
                     },
                 ],
-            };
+            } as const;
 
             // Act
             const underTest = () => graphQLDocumentNodeParser(documentNode);
@@ -381,7 +380,7 @@ describe("#graphQLDocumentNodeParser", () => {
                         },
                     },
                 ],
-            };
+            } as const;
 
             // Act
             const underTest = () => graphQLDocumentNodeParser(documentNode);

package/src/util/__tests__/{hydration-cache-api.test.js → hydration-cache-api.test.ts}

@@ -1,15 +1,14 @@
-// @flow
-import {SsrCache} from "../ssr-cache.js";
+import {SsrCache} from "../ssr-cache";
 
 import {
     initializeHydrationCache,
     purgeHydrationCache,
-} from "../hydration-cache-api.js";
+} from "../hydration-cache-api";
 
 describe("#initializeHydrationCache", () => {
     it("should call SsrCache.Default.initialize", () => {
         // Arrange
-        const sourceCache = {};
+        const sourceCache: Record<string, any> = {};
         const initSpy = jest.spyOn(SsrCache.Default, "initialize");
 
         // Act

package/src/util/__tests__/{merge-gql-context.test.js → merge-gql-context.test.ts}

@@ -1,12 +1,11 @@
-// @flow
-import {mergeGqlContext} from "../merge-gql-context.js";
+import {mergeGqlContext} from "../merge-gql-context";
 
 describe("#mergeGqlContext", () => {
     it("should combine the default context with the given overrides", () => {
         // Arrange
         const baseContext = {
             foo: "bar",
-        };
+        } as const;
 
         // Act
         const result = mergeGqlContext<any>(baseContext, {
@@ -24,7 +23,7 @@ describe("#mergeGqlContext", () => {
         // Arrange
         const baseContext = {
             foo: "bar",
-        };
+        } as const;
 
         // Act
         const result = mergeGqlContext<any>(baseContext, {
@@ -41,7 +40,7 @@ describe("#mergeGqlContext", () => {
         // Arrange
         const baseContext = {
             foo: "bar",
-        };
+        } as const;
 
         // Act
         const result = mergeGqlContext<any>(baseContext, {
@@ -59,7 +58,7 @@ describe("#mergeGqlContext", () => {
         const baseContext = {
             foo: "bar",
             fiz: "baz",
-        };
+        } as const;
 
         // Act
         const result = mergeGqlContext<any>(baseContext, {

package/src/util/__tests__/{purge-caches.test.js → purge-caches.test.ts}

@@ -1,8 +1,7 @@
-// @flow
-import {SharedCache} from "../../hooks/use-shared-cache.js";
-import * as HydrationCacheApi from "../hydration-cache-api.js";
+import {SharedCache} from "../../hooks/use-shared-cache";
+import * as HydrationCacheApi from "../hydration-cache-api";
 
-import {purgeCaches} from "../purge-caches.js";
+import {purgeCaches} from "../purge-caches";
 
 describe("#purgeCaches", () => {
     it("should purge the shared cache", () => {

package/src/util/__tests__/{request-api.test.js → request-api.test.ts}

@@ -1,13 +1,12 @@
-// @flow
 import {Server} from "@khanacademy/wonder-blocks-core";
-import {RequestFulfillment} from "../request-fulfillment.js";
-import {RequestTracker} from "../request-tracking.js";
+import {RequestFulfillment} from "../request-fulfillment";
+import {RequestTracker} from "../request-tracking";
 
 import {
     abortInflightRequests,
     fetchTrackedRequests,
     hasTrackedRequestsToBeFetched,
-} from "../request-api.js";
+} from "../request-api";
 
 describe("#fetchTrackedRequests", () => {
     describe("when server-side", () => {
@@ -31,7 +30,7 @@ describe("#fetchTrackedRequests", () => {
 
         it("should return the response cache", async () => {
             // Arrange
-            const responseCache = {};
+            const responseCache: Record<string, any> = {};
             jest.spyOn(
                 RequestTracker.Default,
                 "fulfillTrackedRequests",
@@ -124,6 +123,7 @@ describe("#hasTrackedRequestsToBeFetched", () => {
             const result = hasTrackedRequestsToBeFetched();
 
             // Assert
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'toBeTrue' does not exist on type 'JestMatchers<boolean>'.
             expect(result).toBeTrue();
         });
     });

package/src/util/__tests__/{request-fulfillment.test.js → request-fulfillment.test.ts}

@@ -1,6 +1,5 @@
-// @flow
-import {RequestFulfillment} from "../request-fulfillment.js";
-import {DataError} from "../data-error.js";
+import {RequestFulfillment} from "../request-fulfillment";
+import {DataError} from "../data-error";
 
 describe("RequestFulfillment", () => {
     it("should provide static default instance", () => {

package/src/util/__tests__/{request-tracking.test.js → request-tracking.test.tsx}

@@ -1,10 +1,9 @@
-// @flow
 import * as React from "react";
 import {render} from "@testing-library/react";
 
 import {Server} from "@khanacademy/wonder-blocks-core";
-import {RequestTracker, TrackerContext} from "../request-tracking.js";
-import {SsrCache} from "../ssr-cache.js";
+import {RequestTracker, TrackerContext} from "../request-tracking";
+import {SsrCache} from "../ssr-cache";
 
 describe("../request-tracking.js", () => {
     describe("TrackerContext", () => {
@@ -12,10 +11,10 @@ describe("../request-tracking.js", () => {
             // Arrange
 
             // Act
-            const result = await new Promise((resolve, reject) => {
+            const result = await new Promise((resolve: any, reject: any) => {
                 render(
                     <TrackerContext.Consumer>
-                        {(fn) => resolve(fn)}
+                        {(fn: any) => resolve(fn)}
                     </TrackerContext.Consumer>,
                 );
             });
@@ -164,9 +163,12 @@ describe("../request-tracking.js", () => {
                 // Arrange
                 const requestTracker = createRequestTracker();
                 const fakeBadRequestHandler = () =>
-                    new Promise((resolve, reject) => reject("OH NO!"));
+                    new Promise((resolve: any, reject: any) =>
+                        reject("OH NO!"),
+                    );
                 requestTracker.trackDataRequest(
                     "ID",
+                    // @ts-expect-error [FEI-5019] - TS2345 - Argument of type '() => Promise<unknown>' is not assignable to parameter of type '() => Promise<ValidCacheData>'.
                     fakeBadRequestHandler,
                     true,
                 );
@@ -191,19 +193,22 @@ describe("../request-tracking.js", () => {
                  * - Handlers that resolve
                  */
                 const fakeBadRequestHandler = () =>
-                    new Promise((resolve, reject) => reject("OH NO!"));
+                    new Promise((resolve: any, reject: any) =>
+                        reject("OH NO!"),
+                    );
                 const fakeBadHandler = () => {
                     throw new Error("OH NO!");
                 };
                 const fakeValidHandler = (() => {
                     let counter = 0;
-                    return (o) => {
+                    return (o: any) => {
                         counter++;
                         return Promise.resolve(`DATA:${counter}`);
                     };
                 })();
                 requestTracker.trackDataRequest(
                     "BAD_REQUEST",
+                    // @ts-expect-error [FEI-5019] - TS2345 - Argument of type '() => Promise<unknown>' is not assignable to parameter of type '() => Promise<ValidCacheData>'.
                     fakeBadRequestHandler,
                     true,
                 );
@@ -214,11 +219,13 @@ describe("../request-tracking.js", () => {
                 );
                 requestTracker.trackDataRequest(
                     "VALID_HANDLER1",
+                    // @ts-expect-error [FEI-5019] - TS2345 - Argument of type '(o: any) => Promise<string>' is not assignable to parameter of type '() => Promise<string>'.
                     fakeValidHandler,
                     true,
                 );
                 requestTracker.trackDataRequest(
                     "VALID_HANDLER2",
+                    // @ts-expect-error [FEI-5019] - TS2345 - Argument of type '(o: any) => Promise<string>' is not assignable to parameter of type '() => Promise<string>'.
                     fakeValidHandler,
                     true,
                 );

package/src/util/__tests__/{result-from-cache-response.test.js → result-from-cache-response.test.ts}

@@ -1,5 +1,4 @@
-// @flow
-import {resultFromCachedResponse} from "../result-from-cache-response.js";
+import {resultFromCachedResponse} from "../result-from-cache-response";
 
 describe("#resultFromCachedResponse", () => {
     it("should return null cache entry is null", () => {
@@ -18,7 +17,7 @@ describe("#resultFromCachedResponse", () => {
         const cacheEntry = {
             data: "DATA",
             error: undefined,
-        };
+        } as const;
 
         // Act
         const result = resultFromCachedResponse(cacheEntry);
@@ -71,8 +70,7 @@ describe("#resultFromCachedResponse", () => {
         };
 
         // Act
-        // $FlowIgnore[incompatible-use]
-        // $FlowIgnore[prop-missing]
+        // @ts-expect-error [FEI-5019] - TS2339 - Property 'error' does not exist on type 'Result<ValidCacheData> | null | undefined'.
         const {error} = resultFromCachedResponse(cacheEntry);
 
         // Assert

package/src/util/__tests__/{scoped-in-memory-cache.test.js → scoped-in-memory-cache.test.ts}

@@ -1,5 +1,4 @@
-// @flow
-import {ScopedInMemoryCache} from "../scoped-in-memory-cache.js";
+import {ScopedInMemoryCache} from "../scoped-in-memory-cache";
 
 describe("ScopedInMemoryCache", () => {
     describe("#set", () => {
@@ -9,7 +8,7 @@ describe("ScopedInMemoryCache", () => {
             ${""}
             ${5}
             ${() => "BOO"}
-        `("should throw if the id is $id", ({id}) => {
+        `("should throw if the id is $id", ({id}: any) => {
             // Arrange
             const cache = new ScopedInMemoryCache();
 
@@ -26,7 +25,7 @@ describe("ScopedInMemoryCache", () => {
             ${""}
             ${5}
             ${() => "BOO"}
-        `("should throw if the scope is $scope", ({scope}) => {
+        `("should throw if the scope is $scope", ({scope}: any) => {
             // Arrange
             const cache = new ScopedInMemoryCache();
 
@@ -190,7 +189,7 @@ describe("ScopedInMemoryCache", () => {
             });
 
             // Act
-            cache.purgeScope("scope1", (id, value) => value === "a");
+            cache.purgeScope("scope1", (id: any, value: any) => value === "a");
             const result = cache._cache;
 
             // Assert
@@ -257,7 +256,7 @@ describe("ScopedInMemoryCache", () => {
             });
 
             // Act
-            cache.purgeAll((scope, id, value) => value === "2");
+            cache.purgeAll((scope: any, id: any, value: any) => value === "2");
             const result = cache._cache;
 
             // Assert

package/src/util/__tests__/{serializable-in-memory-cache.test.js → serializable-in-memory-cache.test.ts}

@@ -1,6 +1,5 @@
-// @flow
 import * as WSCore from "@khanacademy/wonder-stuff-core";
-import {SerializableInMemoryCache} from "../serializable-in-memory-cache.js";
+import {SerializableInMemoryCache} from "../serializable-in-memory-cache";
 
 describe("SerializableInMemoryCache", () => {
     describe("#constructor", () => {
@@ -10,11 +9,12 @@ describe("SerializableInMemoryCache", () => {
                 scope: {
                     key: "value",
                 },
-            };
+            } as const;
 
             // Act
             const cache = new SerializableInMemoryCache(sourceData);
             // Try to mutate the cache.
+            // @ts-expect-error [FEI-5019] - TS2540 - Cannot assign to 'scope' because it is a read-only property.
             sourceData["scope"] = {key: "SOME_NEW_DATA"};
             const result = cache.get("scope", "key");
 
@@ -50,7 +50,7 @@ describe("SerializableInMemoryCache", () => {
             ${""}
             ${5}
             ${() => "BOO"}
-        `("should throw if the id is $id", ({id}) => {
+        `("should throw if the id is $id", ({id}: any) => {
             // Arrange
             const cache = new SerializableInMemoryCache();
 
@@ -67,7 +67,7 @@ describe("SerializableInMemoryCache", () => {
             ${""}
             ${5}
             ${() => "BOO"}
-        `("should throw if the scope is $scope", ({scope}) => {
+        `("should throw if the scope is $scope", ({scope}: any) => {
             // Arrange
             const cache = new SerializableInMemoryCache();
 
@@ -231,7 +231,7 @@ describe("SerializableInMemoryCache", () => {
             });
 
             // Act
-            cache.purgeScope("scope1", (id, value) => value === "a");
+            cache.purgeScope("scope1", (id: any, value: any) => value === "a");
             const result = cache.clone();
 
             // Assert
@@ -298,7 +298,7 @@ describe("SerializableInMemoryCache", () => {
             });
 
             // Act
-            cache.purgeAll((scope, id, value) => value === "2");
+            cache.purgeAll((scope: any, id: any, value: any) => value === "2");
             const result = cache.clone();
 
             // Assert
@@ -330,7 +330,7 @@ describe("SerializableInMemoryCache", () => {
                 scope1: {key: "2"},
                 scope2: {key: "1"},
                 scope3: {key: "2"},
-            };
+            } as const;
             const cache = new SerializableInMemoryCache(data);
 
             // Act

package/src/util/__tests__/{ssr-cache.test.js → ssr-cache.test.ts}

@@ -1,7 +1,6 @@
-// @flow
 import {Server} from "@khanacademy/wonder-blocks-core";
-import {SsrCache} from "../ssr-cache.js";
-import {SerializableInMemoryCache} from "../serializable-in-memory-cache.js";
+import {SsrCache} from "../ssr-cache";
+import {SerializableInMemoryCache} from "../serializable-in-memory-cache";
 
 describe("../ssr-cache.js", () => {
     afterEach(() => {
@@ -126,11 +125,12 @@ describe("../ssr-cache.js", () => {
             const cache = new SsrCache();
             const sourceData = {
                 MY_KEY: {data: "THE_DATA"},
-            };
+            } as const;
 
             // Act
             cache.initialize(sourceData);
             // Try to mutate the cache.
+            // @ts-expect-error [FEI-5019] - TS2540 - Cannot assign to 'MY_KEY' because it is a read-only property.
             sourceData["MY_KEY"] = {data: "SOME_NEW_DATA"};
             const result = cache.getEntry("MY_KEY");
 
@@ -448,6 +448,7 @@ describe("../ssr-cache.js", () => {
             const cloneSpy = jest
                 .spyOn(hydrationCache, "clone")
                 .mockReturnValue({
+                    // @ts-expect-error [FEI-5019] - TS2322 - Type 'string' is not assignable to type '{ [id: string]: ValidCacheData; }'.
                     default: "CLONE!",
                 });
             const cache = new SsrCache(hydrationCache);

package/src/util/__tests__/{to-gql-operation.test.js → to-gql-operation.test.ts}

@@ -1,8 +1,7 @@
-// @flow
-import {toGqlOperation} from "../to-gql-operation.js";
-import * as GDNP from "../graphql-document-node-parser.js";
+import {toGqlOperation} from "../to-gql-operation";
+import * as GDNP from "../graphql-document-node-parser";
 
-jest.mock("../graphql-document-node-parser.js");
+jest.mock("../graphql-document-node-parser");
 
 describe("#toGqlOperation", () => {
     it("should parse the document node", () => {
@@ -10,6 +9,7 @@ describe("#toGqlOperation", () => {
         const documentNode: any = {};
         const parserSpy = jest
             .spyOn(GDNP, "graphQLDocumentNodeParser")
+            // @ts-expect-error [FEI-5019] - TS2345 - Argument of type '{ name: string; type: string; }' is not assignable to parameter of type 'IDocumentDefinition'.
             .mockReturnValue({
                 name: "operationName",
                 type: "query",
@@ -25,6 +25,7 @@ describe("#toGqlOperation", () => {
     it("should return the Wonder Blocks Data representation of the given document node", () => {
         // Arrange
         const documentNode: any = {};
+        // @ts-expect-error [FEI-5019] - TS2345 - Argument of type '{ name: string; type: string; }' is not assignable to parameter of type 'IDocumentDefinition'.
         jest.spyOn(GDNP, "graphQLDocumentNodeParser").mockReturnValue({
             name: "operationName",
             type: "mutation",

package/src/util/{data-error.js → data-error.ts}

@@ -1,6 +1,5 @@
-// @flow
 import {KindError} from "@khanacademy/wonder-stuff-core";
-import type {ErrorOptions} from "./types.js";
+import type {ErrorOptions} from "./types";
 
 /**
  * Error kinds for DataError.
@@ -52,8 +51,8 @@ export const DataErrors = Object.freeze({
 export class DataError extends KindError {
     constructor(
         message: string,
-        kind: $Values<typeof DataErrors>,
-        {metadata, cause}: ErrorOptions = ({}: $Shape<ErrorOptions>),
+        kind: typeof DataErrors[keyof typeof DataErrors],
+        {metadata, cause}: ErrorOptions = {} as Partial<ErrorOptions>,
     ) {
         super(message, kind, {
             metadata,