@khanacademy/wonder-blocks-data 10.0.5 → 10.1.1

package/src/hooks/{use-cached-effect.js → use-cached-effect.ts}

@@ -1,31 +1,25 @@
-// @flow
 import * as React from "react";
 import {useForceUpdate} from "@khanacademy/wonder-blocks-core";
-import {DataError, DataErrors} from "../util/data-error.js";
+import {DataError, DataErrors} from "../util/data-error";
 
-import {RequestFulfillment} from "../util/request-fulfillment.js";
-import {Status} from "../util/status.js";
+import {RequestFulfillment} from "../util/request-fulfillment";
+import {Status} from "../util/status";
 
-import {useSharedCache} from "./use-shared-cache.js";
-import {useRequestInterception} from "./use-request-interception.js";
+import {useSharedCache} from "./use-shared-cache";
+import {useRequestInterception} from "./use-request-interception";
 
-import type {Result, ValidCacheData} from "../util/types.js";
+import type {Result, ValidCacheData} from "../util/types";
 
-// TODO(somewhatabstract, FEI-4174): Update eslint-plugin-import when they
-// have fixed:
-// https://github.com/import-js/eslint-plugin-import/issues/2073
-// eslint-disable-next-line import/named
-import {FetchPolicy} from "../util/types.js";
+import {FetchPolicy} from "../util/types";
 
-type CachedEffectOptions<TData: ValidCacheData> = {|
+type CachedEffectOptions<TData extends ValidCacheData> = {
     /**
      * The policy to use when determining how to retrieve the request data from
      * cache and network.
      *
      * Defaults to `FetchPolicy.CacheBeforeNetwork`.
      */
-    fetchPolicy?: FetchPolicy,
-
+    fetchPolicy?: typeof FetchPolicy[keyof typeof FetchPolicy];
     /**
      * When `true`, the effect will not be executed; otherwise, the effect will
      * be executed.
@@ -35,8 +29,7 @@ type CachedEffectOptions<TData: ValidCacheData> = {|
      *
      * Default is `false`.
      */
-    skip?: boolean,
-
+    skip?: boolean;
     /**
      * When `true`, the effect will not reset the result to the loading status
      * while executing if the requestId changes, instead, returning
@@ -47,8 +40,7 @@ type CachedEffectOptions<TData: ValidCacheData> = {|
      * loading; old pending effects are discarded on changes and as such this
      * value has no effect in that case.
      */
-    retainResultOnChange?: boolean,
-
+    retainResultOnChange?: boolean;
     /**
      * Callback that is invoked if the result for the given hook has changed.
      *
@@ -59,8 +51,7 @@ type CachedEffectOptions<TData: ValidCacheData> = {|
      * When not defined, the hook will ensure the component re-renders to pick
      * up the latest result.
      */
-    onResultChanged?: (result: Result<TData>) => void,
-
+    onResultChanged?: (result: Result<TData>) => void;
     /**
      * Scope to use with the shared cache.
      *
@@ -69,8 +60,8 @@ type CachedEffectOptions<TData: ValidCacheData> = {|
      *
      * Changing this value after the first call is not supported.
      */
-    scope?: string,
-|};
+    scope?: string;
+};
 
 const DefaultScope = "useCachedEffect";
 
@@ -90,12 +81,12 @@ const DefaultScope = "useCachedEffect";
  * Once the request has been tried once and a non-loading response has been
  * cached, the request will not executed made again.
  */
-export const useCachedEffect = <TData: ValidCacheData>(
+export const useCachedEffect = <TData extends ValidCacheData>(
     requestId: string,
     handler: () => Promise<TData>,
-    options: CachedEffectOptions<TData> = ({}: $Shape<
-        CachedEffectOptions<TData>,
-    >),
+    options: CachedEffectOptions<TData> = {} as Partial<
+        CachedEffectOptions<TData>
+    >,
 ): [Result<TData>, () => void] => {
     const {
         fetchPolicy = FetchPolicy.CacheBeforeNetwork,
@@ -112,13 +103,13 @@ export const useCachedEffect = <TData: ValidCacheData>(
     // Instead of using state, which would be local to just this hook instance,
     // we use a shared in-memory cache.
     const [mostRecentResult, setMostRecentResult] = useSharedCache<
-        Result<TData>,
-    >(
-        requestId, // The key of the cached item
-        scope, // The scope of the cached items
+        Result<TData>
+    >( // The key of the cached item
+        requestId, // The scope of the cached items
         // No default value. We don't want the loading status there; to ensure
         // that all calls when the request is in-flight will update once that
         // request is done, we want the cache to be empty until that point.
+        scope,
     );
     const forceUpdate = useForceUpdate();
     // For the NetworkOnly fetch policy, we ignore the cached value.
@@ -131,8 +122,11 @@ export const useCachedEffect = <TData: ValidCacheData>(
         // We aren't using useCallback here because we need to make sure that
         // if we are rememo-izing, we cancel any inflight request for the old
         // callback.
+        // @ts-expect-error [FEI-5019] - TS2339 - Property 'cancel' does not exist on type 'never'.
         currentRequestRef.current?.cancel();
+        // @ts-expect-error [FEI-5019] - TS2322 - Type 'null' is not assignable to type 'undefined'.
         currentRequestRef.current = null;
+        // @ts-expect-error [FEI-5019] - TS2322 - Type 'null' is not assignable to type 'undefined'.
         networkResultRef.current = null;
 
         const fetchFn = () => {
@@ -159,6 +153,7 @@ export const useCachedEffect = <TData: ValidCacheData>(
                 },
             );
 
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'request' does not exist on type 'never'.
             if (request === currentRequestRef.current?.request) {
                 // The request inflight is the same, so do nothing.
                 // NOTE: Perhaps if invoked via a refetch, we will want to
@@ -167,9 +162,11 @@ export const useCachedEffect = <TData: ValidCacheData>(
             }
 
             // Clear the last network result.
+            // @ts-expect-error [FEI-5019] - TS2322 - Type 'null' is not assignable to type 'undefined'.
             networkResultRef.current = null;
 
             // Cancel the previous request.
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'cancel' does not exist on type 'never'.
             currentRequestRef.current?.cancel();
 
             // TODO(somewhatabstract, FEI-4276):
@@ -181,6 +178,7 @@ export const useCachedEffect = <TData: ValidCacheData>(
             // Catching shouldn't serve a purpose.
             // eslint-disable-next-line promise/catch-or-return
             request.then((result) => {
+                // @ts-expect-error [FEI-5019] - TS2322 - Type 'null' is not assignable to type 'undefined'.
                 currentRequestRef.current = null;
                 if (cancel) {
                     // We don't modify our result if the request was cancelled
@@ -191,6 +189,7 @@ export const useCachedEffect = <TData: ValidCacheData>(
 
                 // Now we need to update the cache and notify or force a rerender.
                 setMostRecentResult(result);
+                // @ts-expect-error [FEI-5019] - TS2322 - Type 'Result<TData>' is not assignable to type 'undefined'.
                 networkResultRef.current = result;
 
                 if (onResultChanged != null) {
@@ -205,6 +204,7 @@ export const useCachedEffect = <TData: ValidCacheData>(
                 return; // Shut up eslint always-return rule.
             });
 
+            // @ts-expect-error [FEI-5019] - TS2322 - Type '{ requestId: string; request: Promise<Result<TData>>; cancel(): void; }' is not assignable to type 'undefined'.
             currentRequestRef.current = {
                 requestId,
                 request,
@@ -265,7 +265,9 @@ export const useCachedEffect = <TData: ValidCacheData>(
         }
         fetchRequest();
         return () => {
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'cancel' does not exist on type 'never'.
             currentRequestRef.current?.cancel();
+            // @ts-expect-error [FEI-5019] - TS2322 - Type 'null' is not assignable to type 'undefined'.
             currentRequestRef.current = null;
         };
     }, [shouldFetch, fetchRequest]);
@@ -286,5 +288,6 @@ export const useCachedEffect = <TData: ValidCacheData>(
     lastResultAgnosticOfIdRef.current = result;
 
     // We return the result and a function for triggering a refetch.
+    // @ts-expect-error [FEI-5019] - TS2322 - Type '{ status: "loading"; } | { status: "error"; error: Error; } | { status: "aborted"; } | { status: "success"; data: ValidCacheData; }' is not assignable to type 'Result<TData>'.
     return [result, fetchRequest];
 };

package/src/hooks/{use-gql-router-context.js → use-gql-router-context.ts}

@@ -1,17 +1,16 @@
-// @flow
 import {useContext, useRef, useMemo} from "react";
 
-import {mergeGqlContext} from "../util/merge-gql-context.js";
-import {GqlRouterContext} from "../util/gql-router-context.js";
-import {GqlError, GqlErrors} from "../util/gql-error.js";
+import {mergeGqlContext} from "../util/merge-gql-context";
+import {GqlRouterContext} from "../util/gql-router-context";
+import {GqlError, GqlErrors} from "../util/gql-error";
 
-import type {GqlRouterConfiguration, GqlContext} from "../util/gql-types.js";
+import type {GqlRouterConfiguration, GqlContext} from "../util/gql-types";
 
 /**
  * Construct a GqlRouterContext from the current one and partial context.
  */
-export const useGqlRouterContext = <TContext: GqlContext>(
-    contextOverrides: Partial<TContext> = ({}: $Shape<TContext>),
+export const useGqlRouterContext = <TContext extends GqlContext>(
+    contextOverrides: Partial<TContext> = {} as Partial<TContext>,
 ): GqlRouterConfiguration<TContext> => {
     // This hook only works if the `GqlRouter` has been used to setup context.
     const gqlRouterContext = useContext(GqlRouterContext);

package/src/hooks/{use-gql.js → use-gql.ts}

@@ -1,15 +1,14 @@
-// @flow
 import {useCallback} from "react";
 
-import {mergeGqlContext} from "../util/merge-gql-context.js";
-import {useGqlRouterContext} from "./use-gql-router-context.js";
-import {getGqlDataFromResponse} from "../util/get-gql-data-from-response.js";
+import {mergeGqlContext} from "../util/merge-gql-context";
+import {useGqlRouterContext} from "./use-gql-router-context";
+import {getGqlDataFromResponse} from "../util/get-gql-data-from-response";
 
 import type {
     GqlContext,
     GqlOperation,
     GqlFetchOptions,
-} from "../util/gql-types.js";
+} from "../util/gql-types";
 
 /**
  * Hook to obtain a gqlFetch function for performing GraphQL requests.
@@ -21,9 +20,9 @@ import 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 const useGql = <TContext: GqlContext>(
-    context: Partial<TContext> = ({}: $Shape<TContext>),
-): (<TData, TVariables: {...}>(
+export const useGql = <TContext extends GqlContext>(
+    context: Partial<TContext> = {} as Partial<TContext>,
+): (<TData, TVariables extends Record<any, any>>(
     operation: GqlOperation<TData, TVariables>,
     options?: GqlFetchOptions<TVariables, TContext>,
 ) => Promise<TData>) => {
@@ -36,7 +35,7 @@ export const useGql = <TContext: GqlContext>(
     // making a new one. That then means they can safely use the return value
     // in hooks deps without fear of it triggering extra renders.
     const gqlFetch = useCallback(
-        <TData, TVariables: {...}>(
+        <TData, TVariables extends Record<any, any>>(
             operation: GqlOperation<TData, TVariables>,
             options: GqlFetchOptions<TVariables, TContext> = Object.freeze({}),
         ) => {
@@ -51,5 +50,6 @@ export const useGql = <TContext: GqlContext>(
         },
         [gqlRouterContext],
     );
+    // @ts-expect-error [FEI-5019] - TS2322 - Type '<TData, TVariables extends Record<any, any>>(operation: GqlOperation<TData, TVariables>, options?: GqlFetchOptions<TVariables, TContext>) => Promise<unknown>' is not assignable to type '<TData, TVariables extends Record<any, any>>(operation: GqlOperation<TData, TVariables>, options?: GqlFetchOptions<TVariables, TContext> | undefined) => Promise<...>'.
     return gqlFetch;
 };

package/src/hooks/{use-hydratable-effect.js → use-hydratable-effect.ts}

@@ -1,21 +1,17 @@
-// @flow
 import * as React from "react";
 
-import {useServerEffect} from "./use-server-effect.js";
-import {useSharedCache} from "./use-shared-cache.js";
-import {useCachedEffect} from "./use-cached-effect.js";
+import {useServerEffect} from "./use-server-effect";
+import {useSharedCache} from "./use-shared-cache";
+import {useCachedEffect} from "./use-cached-effect";
 
-// TODO(somewhatabstract, FEI-4174): Update eslint-plugin-import when they
-// have fixed:
-// https://github.com/import-js/eslint-plugin-import/issues/2073
-// eslint-disable-next-line import/named
-import {FetchPolicy} from "../util/types.js";
-import type {Result, ValidCacheData} from "../util/types.js";
+import {FetchPolicy} from "../util/types";
+import type {Result, ValidCacheData} from "../util/types";
 
 /**
  * Policies to define how a hydratable effect should behave client-side.
  */
-export enum WhenClientSide {
+// TODO(FEI-5000): Convert to TS enum after all codebases have been migrated
+export const WhenClientSide = {
     /**
      * The result from executing the effect server-side will not be hydrated.
      * The effect will always be executed client-side.
@@ -24,7 +20,7 @@ export enum WhenClientSide {
      * for properly hydrating this component (for example, the action invokes
      * Apollo which manages its own cache to ensure things render properly).
      */
-    DoNotHydrate,
+    DoNotHydrate: "DoNotHydrate" as const,
 
     /**
      * The result from executing the effect server-side will be hydrated.
@@ -32,7 +28,7 @@ export enum WhenClientSide {
      * be hydrated (i.e. both error and success hydration results prevent the
      * effect running client-side).
      */
-    ExecuteWhenNoResult,
+    ExecuteWhenNoResult: "ExecuteWhenNoResult" as const,
 
     /**
      * The result from executing the effect server-side will be hydrated.
@@ -41,17 +37,17 @@ export enum WhenClientSide {
      * If the hydrated result was not a success result, or there was no
      * hydrated result, the effect will not be executed.
      */
-    ExecuteWhenNoSuccessResult,
+    ExecuteWhenNoSuccessResult: "ExecuteWhenNoSuccessResult" as const,
 
     /**
      * 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.
      */
-    AlwaysExecute,
-}
+    AlwaysExecute: "AlwaysExecute" as const,
+} as const;
 
-type HydratableEffectOptions<TData: ValidCacheData> = {|
+type HydratableEffectOptions<TData extends ValidCacheData> = {
     /**
      * How the hook should behave when rendering client-side for the first time.
      *
@@ -62,8 +58,7 @@ type HydratableEffectOptions<TData: ValidCacheData> = {|
      * Changing this value after the first call is irrelevant as it only
      * affects the initial render behavior.
      */
-    clientBehavior?: WhenClientSide,
-
+    clientBehavior?: typeof WhenClientSide[keyof typeof WhenClientSide];
     /**
      * When `true`, the effect will not be executed; otherwise, the effect will
      * be executed.
@@ -73,8 +68,7 @@ type HydratableEffectOptions<TData: ValidCacheData> = {|
      *
      * Default is `false`.
      */
-    skip?: boolean,
-
+    skip?: boolean;
     /**
      * When `true`, the effect will not reset the result to the loading status
      * while executing if the requestId changes, instead, returning
@@ -85,8 +79,7 @@ type HydratableEffectOptions<TData: ValidCacheData> = {|
      * loading; old pending effects are discarded on changes and as such this
      * value has no effect in that case.
      */
-    retainResultOnChange?: boolean,
-
+    retainResultOnChange?: boolean;
     /**
      * Callback that is invoked if the result for the given hook has changed.
      *
@@ -97,8 +90,7 @@ type HydratableEffectOptions<TData: ValidCacheData> = {|
      * When not defined, the hook will ensure the component re-renders to pick
      * up the latest result.
      */
-    onResultChanged?: (result: Result<TData>) => void,
-
+    onResultChanged?: (result: Result<TData>) => void;
     /**
      * Scope to use with the shared cache.
      *
@@ -107,8 +99,8 @@ type HydratableEffectOptions<TData: ValidCacheData> = {|
      *
      * Changing this value after the first call is not supported.
      */
-    scope?: string,
-|};
+    scope?: string;
+};
 
 const DefaultScope = "useHydratableEffect";
 
@@ -122,12 +114,12 @@ const DefaultScope = "useHydratableEffect";
  * invocations. Cache changes from one hook instance do not trigger renders
  * in components that use the same requestID.
  */
-export const useHydratableEffect = <TData: ValidCacheData>(
+export const useHydratableEffect = <TData extends ValidCacheData>(
     requestId: string,
     handler: () => Promise<TData>,
-    options: HydratableEffectOptions<TData> = ({}: $Shape<
-        HydratableEffectOptions<TData>,
-    >),
+    options: HydratableEffectOptions<TData> = {} as Partial<
+        HydratableEffectOptions<TData>
+    >,
 ): Result<TData> => {
     const {
         clientBehavior = WhenClientSide.ExecuteWhenNoSuccessResult,
@@ -146,48 +138,49 @@ export const useHydratableEffect = <TData: ValidCacheData>(
         skip,
     });
 
-    const getDefaultCacheValue: () => ?Result<TData> = React.useCallback(() => {
-        // If we don't have a requestId, it's our first render, the one
-        // where we hydrated. So defer to our clientBehavior value.
-        switch (clientBehavior) {
-            case WhenClientSide.DoNotHydrate:
-            case WhenClientSide.AlwaysExecute:
-                // Either we weren't hydrating at all, or we don't care
-                // if we hydrated something or not, either way, we're
-                // doing a request.
-                return null;
-
-            case WhenClientSide.ExecuteWhenNoResult:
-                // We only execute if we didn't hydrate something.
-                // So, returning the hydration result as default for our
-                // cache, will then prevent the cached effect running.
-                return serverResult;
-
-            case WhenClientSide.ExecuteWhenNoSuccessResult:
-                // We only execute if we didn't hydrate a success result.
-                if (serverResult?.status === "success") {
+    const getDefaultCacheValue: () => Result<TData> | null | undefined =
+        React.useCallback(() => {
+            // If we don't have a requestId, it's our first render, the one
+            // where we hydrated. So defer to our clientBehavior value.
+            switch (clientBehavior) {
+                case WhenClientSide.DoNotHydrate:
+                case WhenClientSide.AlwaysExecute:
+                    // Either we weren't hydrating at all, or we don't care
+                    // if we hydrated something or not, either way, we're
+                    // doing a request.
+                    return null;
+
+                case WhenClientSide.ExecuteWhenNoResult:
+                    // We only execute if we didn't hydrate something.
                     // So, returning the hydration result as default for our
                     // cache, will then prevent the cached effect running.
                     return serverResult;
-                }
-                return null;
-        }
-        // 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]);
+
+                case WhenClientSide.ExecuteWhenNoSuccessResult:
+                    // We only execute if we didn't hydrate a success result.
+                    if (serverResult?.status === "success") {
+                        // So, returning the hydration result as default for our
+                        // cache, will then prevent the cached effect running.
+                        return serverResult;
+                    }
+                    return null;
+            }
+            // 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.
-    useSharedCache<Result<TData>>(
-        requestId, // The key of the cached item
-        scope, // The scope of the cached items
+    useSharedCache<Result<TData>>( // The key of the cached item
+        requestId, // The scope of the cached items
+        scope,
         getDefaultCacheValue,
     );
 

package/src/hooks/{use-request-interception.js → use-request-interception.ts}

@@ -1,8 +1,7 @@
-// @flow
 import * as React from "react";
 
-import InterceptContext from "../components/intercept-context.js";
-import type {ValidCacheData} from "../util/types.js";
+import InterceptContext from "../components/intercept-context";
+import type {ValidCacheData} from "../util/types";
 
 /**
  * Allow request handling to be intercepted.
@@ -16,7 +15,7 @@ import type {ValidCacheData} from "../util/types.js";
  * an intercepted handler, and then invoke `useServerEffect` (or other things)
  * with that intercepted handler.
  */
-export const useRequestInterception = <TData: ValidCacheData>(
+export const useRequestInterception = <TData extends ValidCacheData>(
     requestId: string,
     handler: () => Promise<TData>,
 ): (() => Promise<TData>) => {
@@ -32,6 +31,7 @@ export const useRequestInterception = <TData: ValidCacheData>(
         // Call the interceptors from closest to furthest.
         // If one returns a non-null result, then we keep that.
         const interceptResponse = interceptors.reduceRight(
+            // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
             (prev, interceptor) => {
                 if (prev != null) {
                     return prev;
@@ -42,8 +42,8 @@ export const useRequestInterception = <TData: ValidCacheData>(
         );
         // If nothing intercepted this request, invoke the original handler.
         // NOTE: We can't guarantee all interceptors return the same type
-        // as our handler, so how can flow know? Let's just suppress that.
-        // $FlowFixMe[incompatible-return]
+        // as our handler, so how can TypeScript know? Let's just suppress that.
+        // @ts-expect-error [FEI-5019] - TS2739 - Type '(requestId: string) => Promise<ValidCacheData | null | undefined> | null | undefined' is missing the following properties from type 'Promise<TData>': then, catch, finally, [Symbol.toStringTag]
         return interceptResponse ?? handler();
     }, [handler, interceptors, requestId]);
 

package/src/hooks/{use-server-effect.js → use-server-effect.ts}

@@ -1,14 +1,13 @@
-// @flow
 import {Server} from "@khanacademy/wonder-blocks-core";
 import {useContext} from "react";
-import {TrackerContext} from "../util/request-tracking.js";
-import {SsrCache} from "../util/ssr-cache.js";
-import {resultFromCachedResponse} from "../util/result-from-cache-response.js";
-import {useRequestInterception} from "./use-request-interception.js";
+import {TrackerContext} from "../util/request-tracking";
+import {SsrCache} from "../util/ssr-cache";
+import {resultFromCachedResponse} from "../util/result-from-cache-response";
+import {useRequestInterception} from "./use-request-interception";
 
-import type {Result, ValidCacheData} from "../util/types.js";
+import type {Result, ValidCacheData} from "../util/types";
 
-type ServerEffectOptions = {|
+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;
@@ -20,16 +19,15 @@ type ServerEffectOptions = {|
      *
      * Default is `true`.
      */
-    hydrate?: boolean,
-
+    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,
-|};
+    skip?: boolean;
+};
 
 /**
  * Hook to perform an asynchronous action during server-side rendering.
@@ -46,11 +44,11 @@ type ServerEffectOptions = {|
  *
  * The asynchronous action is never invoked on the client-side.
  */
-export const useServerEffect = <TData: ValidCacheData>(
+export const useServerEffect = <TData extends ValidCacheData>(
     requestId: string,
     handler: () => Promise<TData>,
-    options: ServerEffectOptions = ({}: $Shape<ServerEffectOptions>),
-): ?Result<TData> => {
+    options: ServerEffectOptions = {} as Partial<ServerEffectOptions>,
+): Result<TData> | null | undefined => {
     const {hydrate = true, skip = false} = options;
 
     // Plug in to the request interception framework for code that wants

package/src/hooks/{use-shared-cache.js → use-shared-cache.ts}

@@ -1,13 +1,14 @@
-// @flow
 import * as React from "react";
-import {DataError, DataErrors} from "../util/data-error.js";
-import {ScopedInMemoryCache} from "../util/scoped-in-memory-cache.js";
-import type {ValidCacheData, ScopedCache} from "../util/types.js";
+import {DataError, DataErrors} from "../util/data-error";
+import {ScopedInMemoryCache} from "../util/scoped-in-memory-cache";
+import type {ValidCacheData, ScopedCache} from "../util/types";
 
 /**
  * A function for inserting a value into the cache or clearing it.
  */
-type CacheValueFn<TValue: ValidCacheData> = (value: ?TValue) => void;
+type CacheValueFn<TValue extends ValidCacheData> = (
+    value?: TValue | null | undefined,
+) => void;
 
 /**
  * This is the cache.
@@ -42,11 +43,15 @@ export const SharedCache: ScopedCache = cache;
  * sure this toggling is optional - or we could use a callback argument, to
  * achieve this on an as-needed basis.
  */
-export const useSharedCache = <TValue: ValidCacheData>(
+export const useSharedCache = <TValue extends ValidCacheData>(
     id: string,
     scope: string,
-    initialValue?: ?TValue | (() => ?TValue),
-): [?TValue, CacheValueFn<TValue>] => {
+    initialValue?:
+        | TValue
+        | null
+        | undefined
+        | (() => TValue | null | undefined),
+): [TValue | null | undefined, CacheValueFn<TValue>] => {
     // Verify arguments.
     if (!id || typeof id !== "string") {
         throw new DataError(
@@ -65,7 +70,7 @@ export const useSharedCache = <TValue: ValidCacheData>(
     // Memoize our APIs.
     // This one allows callers to set or replace the cached value.
     const cacheValue = React.useCallback(
-        (value: ?TValue) =>
+        (value?: TValue | null) =>
             value == null
                 ? cache.purge(scope, id)
                 : cache.set(scope, id, value),
@@ -76,8 +81,8 @@ export const useSharedCache = <TValue: ValidCacheData>(
     // since our last run through. Also, our cache does not know what type it
     // stores, so we have to cast it to the type we're exporting. This is a
     // dev time courtesy, rather than a runtime thing.
-    // $FlowIgnore[incompatible-type]
-    let currentValue: ?TValue = cache.get(scope, id);
+    // @ts-expect-error [FEI-5019] - TS2322 - Type 'ValidCacheData | null | undefined' is not assignable to type 'TValue | null | undefined'.
+    let currentValue: TValue | null | undefined = cache.get(scope, id);
 
     // If we have an initial value, we need to add it to the cache
     // and use it as our current value.