@khanacademy/wonder-blocks-data 10.0.5 → 10.1.1

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

@@ -1,6 +1,5 @@
-// @flow
-import {DataError, DataErrors} from "./data-error.js";
-import {GqlError, GqlErrors} from "./gql-error.js";
+import {DataError, DataErrors} from "./data-error";
+import {GqlError, GqlErrors} from "./gql-error";
 
 /**
  * Validate a GQL operation response and extract the data.
@@ -14,7 +13,7 @@ export const getGqlDataFromResponse = async <TData>(
     let result;
     try {
         result = JSON.parse(bodyText);
-    } catch (e) {
+    } catch (e: any) {
         throw new DataError("Failed to parse response", DataErrors.Parse, {
             metadata: {
                 statusCode: response.status,
@@ -36,11 +35,7 @@ export const getGqlDataFromResponse = async <TData>(
 
     // Check that we have a valid result payload.
     if (
-        // Flow shouldn't be warning about this.
-        // $FlowIgnore[method-unbinding]
         !Object.prototype.hasOwnProperty.call(result, "data") &&
-        // Flow shouldn't be warning about this.
-        // $FlowIgnore[method-unbinding]
         !Object.prototype.hasOwnProperty.call(result, "errors")
     ) {
         throw new GqlError("Server response missing", GqlErrors.BadResponse, {

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

@@ -1,8 +1,7 @@
-// @flow
 import {entries} from "@khanacademy/wonder-stuff-core";
-import type {GqlOperation, GqlContext} from "./gql-types.js";
+import type {GqlOperation, GqlContext} from "./gql-types";
 
-const toString = (value: mixed): string => {
+const toString = (value: unknown): string => {
     if (typeof value === "string") {
         return value;
     }
@@ -17,7 +16,7 @@ const toString = (value: mixed): string => {
     return JSON.stringify(value) ?? "";
 };
 
-const toStringifiedVariables = (acc: any, key: string, value: mixed): any => {
+const toStringifiedVariables = (acc: any, key: string, value: unknown): any => {
     if (typeof value === "object" && value !== null) {
         // If we have an object or array, we build sub-variables so that
         // the ID is easily human-readable rather than having lots of
@@ -30,7 +29,7 @@ const toStringifiedVariables = (acc: any, key: string, value: mixed): any => {
         // or some other non-standard value. While these generally should be
         // avoided as variables, we should handle them gracefully.
         if (subValues.length !== 0) {
-            return subValues.reduce((innerAcc, [i, v]) => {
+            return subValues.reduce((innerAcc, [i, v]: [any, any]) => {
                 const subKey = `${key}.${i}`;
                 return toStringifiedVariables(innerAcc, subKey, v);
             }, acc);
@@ -44,18 +43,17 @@ const toStringifiedVariables = (acc: any, key: string, value: mixed): any => {
 /**
  * Get an identifier for a given request.
  */
-export const getGqlRequestId = <TData, TVariables: {...}>(
+export const getGqlRequestId = <TData, TVariables extends Record<any, any>>(
     operation: GqlOperation<TData, TVariables>,
-    variables: ?TVariables,
+    variables: TVariables | null | undefined,
     context: GqlContext,
 ): string => {
     // We add all the bits for this into an array and then join them with
     // a chosen separator.
-    const parts = [];
+    const parts: Array<string> = [];
 
     // First, we push the context values.
     const sortableContext = new URLSearchParams(context);
-    // $FlowIgnore[prop-missing] Flow has incomplete support for URLSearchParams
     sortableContext.sort();
     parts.push(sortableContext.toString());
 
@@ -92,17 +90,15 @@ export const getGqlRequestId = <TData, TVariables: {...}>(
         // Thus allowing our use of URLSearchParams to both sort and easily
         // encode the variables into an idempotent identifier for those
         // variable values that is also human-readable.
-        const stringifiedVariables = Object.keys(variables).reduce(
-            (acc, key) => {
-                const value = variables[key];
-                return toStringifiedVariables(acc, key, value);
-            },
-            {},
-        );
+        const stringifiedVariables = Object.keys(variables).reduce<
+            Record<string, any>
+        >((acc, key) => {
+            const value = variables[key];
+            return toStringifiedVariables(acc, key, value);
+        }, {});
         // We use the same mechanism as context to sort and arrange the
         // variables.
         const sortableVariables = new URLSearchParams(stringifiedVariables);
-        // $FlowIgnore[prop-missing] Flow has incomplete support for URLSearchParams
         sortableVariables.sort();
         parts.push(sortableVariables.toString());
     }

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

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

package/src/util/gql-router-context.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import type {GqlRouterConfiguration} from "./gql-types";
+
+export const GqlRouterContext: React.Context<
+    GqlRouterConfiguration<any> | null | undefined
+> = React.createContext<GqlRouterConfiguration<any> | null | undefined>(null);

package/src/util/{gql-types.js → gql-types.ts}

@@ -1,4 +1,3 @@
-// @flow
 /**
  * Operation types.
  */
@@ -11,50 +10,55 @@ export type GqlOperation<
     // TData is not used to define a field on this type, but it is used
     // to ensure that calls using this operation will properly return the
     // correct data type.
-    // eslint-disable-next-line no-unused-vars
-    TData,
-    // TVariables is not used to define a field on this type, but it is used
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    TData, // TVariables is not used to define a field on this type, but it is used
     // to ensure that calls using this operation will properly consume the
     // correct variables type.
-    // eslint-disable-next-line no-unused-vars
-    TVariables: {...} = Empty,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    TVariables extends object = Empty,
 > = {
-    type: GqlOperationType,
-    id: string,
+    type: GqlOperationType;
+    id: string;
     // We allow other things here to be passed along to the fetch function.
     // For example, we might want to pass the full query/mutation definition
     // as a string here to allow that to be sent to an Apollo server that
     // expects it. This is a courtesy to calling code; these additional
     // values are ignored by WB Data, and passed through as-is.
-    [key: string]: mixed,
-    ...
+    [key: string]: unknown;
 };
 
-export type GqlContext = {|
-    [key: string]: string,
-|};
+export type GqlContext = {
+    [key: string]: string;
+};
 
 /**
  * Functions that make fetches of GQL operations.
  */
-export type GqlFetchFn<TData, TVariables: {...}, TContext: GqlContext> = (
+export type GqlFetchFn<
+    TData,
+    TVariables extends Record<any, any>,
+    TContext extends GqlContext,
+> = (
     operation: GqlOperation<TData, TVariables>,
-    variables: ?TVariables,
+    variables: TVariables | null | undefined,
     context: TContext,
 ) => Promise<Response>;
 
 /**
  * The configuration stored in the GqlRouterContext context.
  */
-export type GqlRouterConfiguration<TContext: GqlContext> = {|
-    fetch: GqlFetchFn<any, any, any>,
-    defaultContext: TContext,
-|};
+export type GqlRouterConfiguration<TContext extends GqlContext> = {
+    fetch: GqlFetchFn<any, any, any>;
+    defaultContext: TContext;
+};
 
 /**
  * Options for configuring a GQL fetch.
  */
-export type GqlFetchOptions<TVariables: {...}, TContext: GqlContext> = {|
-    variables?: TVariables,
-    context?: Partial<TContext>,
-|};
+export type GqlFetchOptions<
+    TVariables extends Record<any, any>,
+    TContext extends GqlContext,
+> = {
+    variables?: TVariables;
+    context?: Partial<TContext>;
+};

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

@@ -1,23 +1,22 @@
-// @flow
 import type {
     DocumentNode,
     DefinitionNode,
     VariableDefinitionNode,
     OperationDefinitionNode,
-} from "./graphql-types.js";
-import {DataError, DataErrors} from "./data-error.js";
+} from "./graphql-types";
+import {DataError, DataErrors} from "./data-error";
 
 export const DocumentTypes = Object.freeze({
     query: "query",
     mutation: "mutation",
 });
 
-export type DocumentType = $Values<typeof DocumentTypes>;
+export type DocumentType = typeof DocumentTypes[keyof typeof DocumentTypes];
 
 export interface IDocumentDefinition {
     type: DocumentType;
     name: string;
-    variables: $ReadOnlyArray<VariableDefinitionNode>;
+    variables: ReadonlyArray<VariableDefinitionNode>;
 }
 
 const cache = new Map<DocumentNode, IDocumentDefinition>();
@@ -60,19 +59,19 @@ export function graphQLDocumentNodeParser(
 
     const queries = document.definitions.filter(
         (x: DefinitionNode) =>
-            // $FlowIgnore[prop-missing]
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'operation' does not exist on type 'DefinitionNode'.
             x.kind === "OperationDefinition" && x.operation === "query",
     );
 
     const mutations = document.definitions.filter(
         (x: DefinitionNode) =>
-            // $FlowIgnore[prop-missing]
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'operation' does not exist on type 'DefinitionNode'.
             x.kind === "OperationDefinition" && x.operation === "mutation",
     );
 
     const subscriptions = document.definitions.filter(
         (x: DefinitionNode) =>
-            // $FlowIgnore[prop-missing]
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'operation' does not exist on type 'DefinitionNode'.
             x.kind === "OperationDefinition" && x.operation === "subscription",
     );
 
@@ -120,7 +119,7 @@ export function graphQLDocumentNodeParser(
     const type = queries.length ? DocumentTypes.query : DocumentTypes.mutation;
     const definitions = queries.length ? queries : mutations;
 
-    const definition: OperationDefinitionNode = (definitions[0]: any);
+    const definition: OperationDefinitionNode = definitions[0] as any;
     const variables = definition.variableDefinitions || [];
 
     // fallback to using data if no name

package/src/util/graphql-types.ts

@@ -0,0 +1,27 @@
+// NOTE(somewhatabstract):
+// These types are bare minimum to support document parsing. They're derived
+// from graphql@14.5.8, the last version that provided TypeScript types.
+// Doing this avoids us having to take a dependency on that library just for
+// these types.
+export interface DefinitionNode {
+    readonly kind: string;
+}
+
+export type VariableDefinitionNode = {
+    readonly kind: "VariableDefinition";
+};
+
+export interface OperationDefinitionNode extends DefinitionNode {
+    readonly kind: "OperationDefinition";
+    readonly operation: string;
+    readonly variableDefinitions: ReadonlyArray<VariableDefinitionNode>;
+    readonly name?: {
+        readonly kind: unknown;
+        readonly value: string;
+    };
+}
+
+export type DocumentNode = {
+    readonly kind: "Document";
+    readonly definitions: ReadonlyArray<DefinitionNode>;
+};

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

@@ -1,7 +1,6 @@
-// @flow
-import {SsrCache} from "./ssr-cache.js";
+import {SsrCache} from "./ssr-cache";
 
-import type {ValidCacheData, CachedResponse, ResponseCache} from "./types.js";
+import type {ValidCacheData, CachedResponse, ResponseCache} from "./types";
 
 /**
  * Initialize the hydration cache.
@@ -23,6 +22,9 @@ export const initializeHydrationCache = (source: ResponseCache): void =>
 export const purgeHydrationCache = (
     predicate?: (
         key: string,
-        cacheEntry: ?$ReadOnly<CachedResponse<ValidCacheData>>,
+        cacheEntry?:
+            | Readonly<CachedResponse<ValidCacheData>>
+            | null
+            | undefined,
     ) => boolean,
 ): void => SsrCache.Default.purgeData(predicate);

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

@@ -1,5 +1,4 @@
-// @flow
-import type {GqlContext} from "./gql-types.js";
+import type {GqlContext} from "./gql-types";
 
 /**
  * Construct a complete GqlContext from current defaults and a partial context.
@@ -7,7 +6,7 @@ import type {GqlContext} from "./gql-types.js";
  * Values in the partial context that are `undefined` will be ignored.
  * Values in the partial context that are `null` will be deleted.
  */
-export const mergeGqlContext = <TContext: GqlContext>(
+export const mergeGqlContext = <TContext extends GqlContext>(
     defaultContext: TContext,
     overrides: Partial<TContext>,
 ): TContext => {
@@ -24,6 +23,7 @@ export const mergeGqlContext = <TContext: GqlContext>(
                     delete acc[key];
                 } else {
                     // Otherwise, we set it.
+                    // @ts-expect-error [FEI-5019] - TS2536 - Type 'string' cannot be used to index type 'TContext'.
                     acc[key] = overrides[key];
                 }
             }

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

@@ -1,6 +1,5 @@
-// @flow
-import {SharedCache} from "../hooks/use-shared-cache.js";
-import {purgeHydrationCache} from "./hydration-cache-api.js";
+import {SharedCache} from "../hooks/use-shared-cache";
+import {purgeHydrationCache} from "./hydration-cache-api";
 
 /**
  * Purge all caches managed by Wonder Blocks Data.

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

@@ -1,10 +1,9 @@
-// @flow
 import {Server} from "@khanacademy/wonder-blocks-core";
-import {RequestTracker} from "./request-tracking.js";
-import {RequestFulfillment} from "./request-fulfillment.js";
-import {DataError, DataErrors} from "./data-error.js";
+import {RequestTracker} from "./request-tracking";
+import {RequestFulfillment} from "./request-fulfillment";
+import {DataError, DataErrors} from "./data-error";
 
-import type {ResponseCache} from "./types.js";
+import type {ResponseCache} from "./types";
 
 const SSRCheck = () => {
     if (Server.isServerSide()) {

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

@@ -1,16 +1,15 @@
-// @flow
-import type {Result, ValidCacheData} from "./types.js";
+import type {Result, ValidCacheData} from "./types";
 
-import {DataError, DataErrors} from "./data-error.js";
+import {DataError, DataErrors} from "./data-error";
 
 type RequestCache = {
-    [id: string]: Promise<Result<any>>,
+    [id: string]: Promise<Result<any>>;
 };
 
-type FulfillOptions<TData: ValidCacheData> = {|
-    handler: () => Promise<TData>,
-    hydrate?: boolean,
-|};
+type FulfillOptions<TData extends ValidCacheData> = {
+    handler: () => Promise<TData>;
+    hydrate?: boolean;
+};
 
 let _default: RequestFulfillment;
 
@@ -33,10 +32,10 @@ export class RequestFulfillment {
      * This will return an inflight request if one exists, otherwise it will
      * make a new request. Inflight requests are deleted once they resolve.
      */
-    fulfill: <TData: ValidCacheData>(
+    fulfill: <TData extends ValidCacheData>(
         id: string,
         options: FulfillOptions<TData>,
-    ) => Promise<Result<TData>> = <TData: ValidCacheData>(
+    ) => Promise<Result<TData>> = <TData extends ValidCacheData>(
         id: string,
         {handler, hydrate = true}: FulfillOptions<TData>,
     ): Promise<Result<TData>> => {
@@ -52,10 +51,12 @@ export class RequestFulfillment {
          * We don't have an inflight request, so let's set one up.
          */
         const request = handler()
-            .then((data: TData): Result<TData> => ({
-                status: "success",
-                data,
-            }))
+            .then(
+                (data: TData): Result<TData> => ({
+                    status: "success",
+                    data,
+                }),
+            )
             .catch((error: string | Error): Result<TData> => {
                 const actualError =
                     typeof error === "string"

package/src/util/{request-tracking.js → request-tracking.ts}

@@ -1,22 +1,20 @@
-// @flow
 import * as React from "react";
-import {SsrCache} from "./ssr-cache.js";
-import {RequestFulfillment} from "./request-fulfillment.js";
+import {SsrCache} from "./ssr-cache";
+import {RequestFulfillment} from "./request-fulfillment";
 
-import type {ResponseCache, ValidCacheData} from "./types.js";
+import type {ResponseCache, ValidCacheData} from "./types";
 
-type TrackerFn = <TData: ValidCacheData>(
+type TrackerFn = <TData extends ValidCacheData>(
     id: string,
     handler: () => Promise<TData>,
     hydrate: boolean,
 ) => void;
 
 type RequestCache = {
-    [id: string]: {|
-        hydrate: boolean,
-        handler: () => Promise<any>,
-    |},
-    ...
+    [id: string]: {
+        hydrate: boolean;
+        handler: () => Promise<any>;
+    };
 };
 
 /**
@@ -24,8 +22,8 @@ type RequestCache = {
  *
  * INTERNAL USE ONLY
  */
-export const TrackerContext: React.Context<?TrackerFn> =
-    React.createContext<?TrackerFn>(null);
+export const TrackerContext: React.Context<TrackerFn | null | undefined> =
+    React.createContext<TrackerFn | null | undefined>(null);
 
 /**
  * The default instance is stored here.
@@ -53,7 +51,8 @@ export class RequestTracker {
     _responseCache: SsrCache;
     _requestFulfillment: RequestFulfillment;
 
-    constructor(responseCache: ?SsrCache = undefined) {
+    // @ts-expect-error [FEI-5019] - TS2322 - Type 'undefined' is not assignable to type 'SsrCache | null'.
+    constructor(responseCache: SsrCache | null = undefined) {
         this._responseCache = responseCache || SsrCache.Default;
         this._requestFulfillment = new RequestFulfillment();
     }
@@ -64,11 +63,11 @@ export class RequestTracker {
      * This method caches a request and its handler for use during server-side
      * rendering to allow us to fulfill requests before producing a final render.
      */
-    trackDataRequest: <TData: ValidCacheData>(
+    trackDataRequest: <TData extends ValidCacheData>(
         id: string,
         handler: () => Promise<TData>,
         hydrate: boolean,
-    ) => void = <TData: ValidCacheData>(
+    ) => void = <TData extends ValidCacheData>(
         id: string,
         handler: () => Promise<TData>,
         hydrate: boolean,
@@ -167,7 +166,7 @@ export class RequestTracker {
                                 return;
                             }),
                     );
-                } catch (e) {
+                } catch (e: any) {
                     // This captures if there are problems in the code that
                     // begins the requests.
                     promises.push(

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

@@ -1,14 +1,13 @@
-// @flow
-import {Status} from "./status.js";
-import {DataError, DataErrors} from "./data-error.js";
-import type {ValidCacheData, CachedResponse, Result} from "./types.js";
+import {Status} from "./status";
+import {DataError, DataErrors} from "./data-error";
+import type {ValidCacheData, CachedResponse, Result} from "./types";
 
 /**
  * Turns a cache entry into a stateful result.
  */
-export const resultFromCachedResponse = <TData: ValidCacheData>(
-    cacheEntry: ?CachedResponse<TData>,
-): ?Result<TData> => {
+export const resultFromCachedResponse = <TData extends ValidCacheData>(
+    cacheEntry?: CachedResponse<TData> | null,
+): Result<TData> | null | undefined => {
     // No cache entry means no result to be hydrated.
     if (cacheEntry == null) {
         return null;

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

@@ -1,6 +1,5 @@
-// @flow
-import {DataError, DataErrors} from "./data-error.js";
-import type {ScopedCache, RawScopedCache, ValidCacheData} from "./types.js";
+import {DataError, DataErrors} from "./data-error";
+import type {ScopedCache, RawScopedCache, ValidCacheData} from "./types";
 
 /**
  * Describe an in-memory cache.
@@ -53,7 +52,7 @@ export class ScopedInMemoryCache implements ScopedCache {
     /**
      * Retrieve a value from the cache.
      */
-    get(scope: string, id: string): ?ValidCacheData {
+    get(scope: string, id: string): ValidCacheData | null | undefined {
         return this._cache[scope]?.[id] ?? null;
     }
 

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

@@ -1,8 +1,7 @@
-// @flow
 import {clone} from "@khanacademy/wonder-stuff-core";
-import {DataError, DataErrors} from "./data-error.js";
-import {ScopedInMemoryCache} from "./scoped-in-memory-cache.js";
-import type {ValidCacheData, RawScopedCache} from "./types.js";
+import {DataError, DataErrors} from "./data-error";
+import {ScopedInMemoryCache} from "./scoped-in-memory-cache";
+import type {ValidCacheData, RawScopedCache} from "./types";
 
 /**
  * Describe a serializable in-memory cache.
@@ -11,7 +10,7 @@ export class SerializableInMemoryCache extends ScopedInMemoryCache {
     constructor(initialCache: RawScopedCache = {}) {
         try {
             super(clone(initialCache));
-        } catch (e) {
+        } catch (e: any) {
             throw new DataError(
                 `An error occurred trying to initialize from a response cache snapshot: ${e}`,
                 DataErrors.InvalidInput,
@@ -32,7 +31,7 @@ export class SerializableInMemoryCache extends ScopedInMemoryCache {
     clone(): RawScopedCache {
         try {
             return clone(this._cache);
-        } catch (e) {
+        } catch (e: any) {
             throw new DataError(
                 "An error occurred while trying to clone the cache",
                 DataErrors.Internal,