@khanacademy/wonder-blocks-data 10.1.0 → 10.1.2

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

@@ -1,4 +1,3 @@
-// @flow
 import {graphQLDocumentNodeParser} from "../graphql-document-node-parser";
 
 describe("#graphQLDocumentNodeParser", () => {
@@ -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,4 +1,3 @@
-// @flow
 import {SsrCache} from "../ssr-cache";
 
 import {
@@ -9,7 +8,7 @@ import {
 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,4 +1,3 @@
-// @flow
 import {mergeGqlContext} from "../merge-gql-context";
 
 describe("#mergeGqlContext", () => {
@@ -6,7 +5,7 @@ describe("#mergeGqlContext", () => {
         // 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,4 +1,3 @@
-// @flow
 import {SharedCache} from "../../hooks/use-shared-cache";
 import * as HydrationCacheApi from "../hydration-cache-api";
 

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

@@ -1,4 +1,3 @@
-// @flow
 import {Server} from "@khanacademy/wonder-blocks-core";
 import {RequestFulfillment} from "../request-fulfillment";
 import {RequestTracker} from "../request-tracking";
@@ -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,4 +1,3 @@
-// @flow
 import {RequestFulfillment} from "../request-fulfillment";
 import {DataError} from "../data-error";
 

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

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {render} from "@testing-library/react";
 
@@ -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,4 +1,3 @@
-// @flow
 import {resultFromCachedResponse} from "../result-from-cache-response";
 
 describe("#resultFromCachedResponse", () => {
@@ -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,4 +1,3 @@
-// @flow
 import {ScopedInMemoryCache} from "../scoped-in-memory-cache";
 
 describe("ScopedInMemoryCache", () => {
@@ -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,4 +1,3 @@
-// @flow
 import * as WSCore from "@khanacademy/wonder-stuff-core";
 import {SerializableInMemoryCache} from "../serializable-in-memory-cache";
 
@@ -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,4 +1,3 @@
-// @flow
 import {Server} from "@khanacademy/wonder-blocks-core";
 import {SsrCache} from "../ssr-cache";
 import {SerializableInMemoryCache} from "../serializable-in-memory-cache";
@@ -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,4 +1,3 @@
-// @flow
 import {toGqlOperation} from "../to-gql-operation";
 import * as GDNP from "../graphql-document-node-parser";
 
@@ -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,4 +1,3 @@
-// @flow
 import {KindError} from "@khanacademy/wonder-stuff-core";
 import type {ErrorOptions} from "./types";
 
@@ -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,

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

@@ -1,4 +1,3 @@
-// @flow
 import {DataError, DataErrors} from "./data-error";
 import {GqlError, GqlErrors} from "./gql-error";
 
@@ -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";
 
-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,4 +1,3 @@
-// @flow
 import {KindError} from "@khanacademy/wonder-stuff-core";
 
 import type {ErrorOptions} from "./types";
@@ -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>;
+};