@khanacademy/wonder-blocks-data 11.0.16 → 13.0.0

package/src/hooks/__tests__/use-cached-effect.test.tsx

@@ -22,8 +22,9 @@ jest.mock("../use-request-interception");
 jest.mock("../use-shared-cache");
 
 const allPolicies = Array.from(values(FetchPolicy));
-const allPoliciesBut = (policy: typeof FetchPolicy[keyof typeof FetchPolicy]) =>
-    allPolicies.filter((p: any) => p !== policy);
+const allPoliciesBut = (
+    ...policies: Array<typeof FetchPolicy[keyof typeof FetchPolicy]>
+) => allPolicies.filter((p: any) => !policies.includes(p));
 
 describe("#useCachedEffect", () => {
     beforeEach(() => {
@@ -116,7 +117,7 @@ describe("#useCachedEffect", () => {
             },
         );
 
-        describe.each(allPolicies)(
+        describe.each(allPoliciesBut(FetchPolicy.CacheOnly))(
             "with FetchPolicy.%s without cached result",
             (fetchPolicy: any) => {
                 it("should return a loading result", () => {
@@ -138,6 +139,27 @@ describe("#useCachedEffect", () => {
             },
         );
 
+        describe("with FetchPolicy.CacheOnly without cached result", () => {
+            it("should return a no-data result", () => {
+                // Arrange
+                const fakeHandler = jest.fn();
+
+                // Act
+                const {
+                    result: {
+                        current: [result],
+                    },
+                } = serverRenderHook(() =>
+                    useCachedEffect("ID", fakeHandler, {
+                        fetchPolicy: FetchPolicy.CacheOnly,
+                    }),
+                );
+
+                // Assert
+                expect(result).toStrictEqual(Status.noData());
+            });
+        });
+
         describe.each(allPoliciesBut(FetchPolicy.NetworkOnly))(
             "with FetchPolicy.%s with cached result",
             (fetchPolicy: any) => {
@@ -232,7 +254,7 @@ describe("#useCachedEffect", () => {
             "should provide function that causes refetch with FetchPolicy.%s",
             async (fetchPolicy: any) => {
                 // Arrange
-                const response = Promise.resolve("DATA1");
+                const response: any = Promise.resolve("DATA1");
                 const fakeHandler = jest.fn().mockReturnValue(response);
 
                 // Act
@@ -244,11 +266,9 @@ describe("#useCachedEffect", () => {
                     useCachedEffect("ID", fakeHandler, {fetchPolicy}),
                 );
                 fakeHandler.mockClear();
-                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
-                await act((): Promise<unknown> => response);
+                await act(() => response);
                 act(refetch);
-                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
-                await act((): Promise<unknown> => response);
+                await act(() => response);
 
                 // Assert
                 expect(fakeHandler).toHaveBeenCalledTimes(1);
@@ -426,7 +446,7 @@ describe("#useCachedEffect", () => {
 
         it("should ignore inflight request if requestId changes", async () => {
             // Arrange
-            const response1 = Promise.resolve("DATA1");
+            const response1: any = Promise.resolve("DATA1");
             const response2 = Promise.resolve("DATA2");
             const fakeHandler = jest
                 .fn()
@@ -449,7 +469,7 @@ describe("#useCachedEffect", () => {
 
         it("should return result of fulfilled request for current requestId", async () => {
             // Arrange
-            const response1 = Promise.resolve("DATA1");
+            const response1: any = Promise.resolve("DATA1");
             const response2 = Promise.resolve("DATA2");
             const fakeHandler = jest
                 .fn()
@@ -485,7 +505,7 @@ describe("#useCachedEffect", () => {
 
         it("should ignore result of inflight request if skip changes", async () => {
             // Arrange
-            const response1 = Promise.resolve("DATA1");
+            const response1: any = Promise.resolve("DATA1");
             const fakeHandler = jest.fn().mockReturnValueOnce(response1);
 
             // Act
@@ -496,8 +516,7 @@ describe("#useCachedEffect", () => {
                 },
             );
             rerender({skip: true});
-            // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
-            await act((): Promise<unknown> => response1);
+            await act(() => response1);
 
             // Assert
             expect(result.all).not.toContainEqual(Status.success("DATA1"));
@@ -505,7 +524,7 @@ describe("#useCachedEffect", () => {
 
         it("should not ignore result of inflight request if handler changes", async () => {
             // Arrange
-            const response1 = Promise.resolve("DATA1");
+            const response1: any = Promise.resolve("DATA1");
             const response2 = Promise.resolve("DATA2");
             const fakeHandler1 = jest.fn().mockReturnValueOnce(response1);
             const fakeHandler2 = jest.fn().mockReturnValueOnce(response2);
@@ -526,7 +545,7 @@ describe("#useCachedEffect", () => {
 
         it("should not ignore inflight request if options (other than skip) change", async () => {
             // Arrange
-            const response1 = Promise.resolve("DATA1");
+            const response1: any = Promise.resolve("DATA1");
             const fakeHandler = jest.fn().mockReturnValueOnce(response1);
 
             // Act
@@ -537,13 +556,11 @@ describe("#useCachedEffect", () => {
                 },
             );
             rerender({
-                // @ts-expect-error [FEI-5019] - TS2322 - Type '{ scope: string; }' is not assignable to type 'undefined'.
                 options: {
                     scope: "BLAH!",
                 },
-            });
-            // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
-            await act((): Promise<unknown> => response1);
+            } as any);
+            await act(() => response1);
 
             // Assert
             expect(result.current[0]).toStrictEqual(Status.success("DATA1"));
@@ -551,7 +568,7 @@ describe("#useCachedEffect", () => {
 
         it("should return previous result when requestId changes and retainResultOnChange is true", async () => {
             // Arrange
-            const response1 = Promise.resolve("DATA1");
+            const response1: any = Promise.resolve("DATA1");
             const response2 = Promise.resolve("DATA2");
             const fakeHandler = jest
                 .fn()
@@ -572,8 +589,7 @@ describe("#useCachedEffect", () => {
                     initialProps: {requestId: "ID"},
                 },
             );
-            // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
-            await act((): Promise<unknown> => response1);
+            await act(() => response1);
             rerender({requestId: "ID2"});
             const [result] = hookResult.current;
             await waitForNextUpdate();
@@ -584,7 +600,7 @@ describe("#useCachedEffect", () => {
 
         it("should return loading status when requestId changes and retainResultOnChange is false", async () => {
             // Arrange
-            const response1 = Promise.resolve("DATA1");
+            const response1: any = Promise.resolve("DATA1");
             const response2 = new Promise(() => {
                 /*pending*/
             });
@@ -603,19 +619,47 @@ describe("#useCachedEffect", () => {
                     initialProps: {requestId: "ID"},
                 },
             );
-            // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
-            await act((): Promise<unknown> => response1);
+            await act(() => response1);
             rerender({requestId: "ID2"});
 
             // Assert
             expect(result.current[0]).toStrictEqual(Status.loading());
         });
 
+        it("should return no-data status when requestId changes, retainResultOnChange is false, and skip is true", async () => {
+            // Arrange
+            const response1: any = Promise.resolve("DATA1");
+            const response2 = new Promise(() => {
+                /*pending*/
+            });
+            const fakeHandler = jest
+                .fn()
+                .mockReturnValueOnce(response1)
+                .mockReturnValueOnce(response2);
+
+            // Act
+            const {rerender, result} = clientRenderHook(
+                ({requestId}: any) =>
+                    useCachedEffect(requestId, fakeHandler, {
+                        retainResultOnChange: false,
+                        skip: true,
+                    }),
+                {
+                    initialProps: {requestId: "ID"},
+                },
+            );
+            await act(() => response1);
+            rerender({requestId: "ID2"});
+
+            // Assert
+            expect(result.current[0]).toStrictEqual(Status.noData());
+        });
+
         it.each(allPoliciesBut(FetchPolicy.CacheOnly))(
             "should trigger render when request is fulfilled and onResultChanged is undefined for FetchPolicy.%s",
             async (fetchPolicy: any) => {
                 // Arrange
-                const response = Promise.resolve("DATA");
+                const response: any = Promise.resolve("DATA");
                 const fakeHandler = jest.fn().mockReturnValue(response);
                 let renderCount = 0;
                 const Component = React.memo(() => {
@@ -626,8 +670,7 @@ describe("#useCachedEffect", () => {
 
                 // Act
                 render(<Component />);
-                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
-                await reactAct((): Promise<unknown> => response);
+                await reactAct(() => response);
 
                 // Assert
                 expect(renderCount).toBe(2);
@@ -638,7 +681,7 @@ describe("#useCachedEffect", () => {
             "should trigger render once per inflight request being fulfilled and onResultChanged is undefined for FetchPolicy.%s",
             async (fetchPolicy: any) => {
                 // Arrange
-                const response = Promise.resolve("DATA");
+                const response: any = Promise.resolve("DATA");
                 const fakeHandler = jest.fn().mockReturnValue(response);
                 let renderCount = 0;
                 const Component = React.memo(() => {
@@ -657,8 +700,7 @@ describe("#useCachedEffect", () => {
 
                 // Act
                 render(<Component />);
-                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
-                await reactAct((): Promise<unknown> => response);
+                await reactAct(() => response);
 
                 // Assert
                 expect(renderCount).toBe(2);
@@ -669,7 +711,7 @@ describe("#useCachedEffect", () => {
             "should not trigger render when request is fulfilled and onResultChanged is defined for FetchPolicy.%s",
             async (fetchPolicy: any) => {
                 // Arrange
-                const response = Promise.resolve("DATA");
+                const response: any = Promise.resolve("DATA");
                 const fakeHandler = jest.fn().mockReturnValue(response);
                 let renderCount = 0;
                 const Component = React.memo(() => {
@@ -683,8 +725,7 @@ describe("#useCachedEffect", () => {
 
                 // Act
                 render(<Component />);
-                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
-                await reactAct((): Promise<unknown> => response);
+                await reactAct(() => response);
 
                 // Assert
                 expect(renderCount).toBe(1);
@@ -695,7 +736,7 @@ describe("#useCachedEffect", () => {
             "should call onResultChanged when request is fulfilled and onResultChanged is defined for FetchPolicy.%s",
             async (fetchPolicy: any) => {
                 // Arrange
-                const response = Promise.resolve("DATA");
+                const response: any = Promise.resolve("DATA");
                 const fakeHandler = jest.fn().mockReturnValue(response);
                 const onResultChanged = jest.fn();
 
@@ -706,8 +747,7 @@ describe("#useCachedEffect", () => {
                         fetchPolicy,
                     }),
                 );
-                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
-                await act((): Promise<unknown> => response);
+                await act(() => response);
 
                 // Assert
                 expect(onResultChanged).toHaveBeenCalledWith(
@@ -720,7 +760,7 @@ describe("#useCachedEffect", () => {
             "should call onResultChanged once per inflight request being fulfilled and onResultChanged is defined for FetchPolicy.%s",
             async (fetchPolicy: any) => {
                 // Arrange
-                const response = Promise.resolve("DATA");
+                const response: any = Promise.resolve("DATA");
                 const fakeHandler = jest.fn().mockReturnValue(response);
                 const onResultChanged = jest.fn();
 
@@ -739,8 +779,7 @@ describe("#useCachedEffect", () => {
                 act(refetch);
                 act(refetch);
                 act(refetch);
-                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
-                await act((): Promise<unknown> => response);
+                await act(() => response);
 
                 // Assert
                 expect(onResultChanged).toHaveBeenCalledTimes(1);

package/src/hooks/__tests__/use-gql-router-context.test.tsx

@@ -123,8 +123,7 @@ describe("#useGqlRouterContext", () => {
             },
         );
         const result1 = wrapper.result.current;
-        // @ts-expect-error [FEI-5019] - TS2741 - Property 'fiz' is missing in type '{}' but required in type '{ fiz: string; }'.
-        wrapper.rerender({overrides: {}});
+        wrapper.rerender({overrides: {} as any});
         const result2 = wrapper.result.current;
 
         // Assert

package/src/hooks/__tests__/use-hydratable-effect.test.ts

@@ -562,10 +562,9 @@ describe("#useHydratableEffect", () => {
                 },
             );
             rerender({
-                // @ts-expect-error [FEI-5019] - TS2322 - Type '{ scope: string; }' is not assignable to type 'undefined'.
                 options: {
                     scope: "BLAH!",
-                },
+                } as any,
             });
 
             await act((): Promise<any> => response1);

package/src/hooks/__tests__/use-request-interception.test.tsx

@@ -68,7 +68,7 @@ describe("#useRequestInterception", () => {
         const handler = jest.fn();
         const interceptor1 = jest.fn();
         const interceptor2 = jest.fn();
-        const Wrapper = ({children, interceptor}: any) => (
+        const Wrapper = ({children, interceptor}: any): React.ReactElement => (
             <InterceptRequests interceptor={interceptor}>
                 {children}
             </InterceptRequests>
@@ -80,8 +80,7 @@ describe("#useRequestInterception", () => {
             {wrapper: Wrapper, initialProps: {interceptor: interceptor1}},
         );
         const result1 = wrapper.result.current;
-        // @ts-expect-error [FEI-5019] - TS2345 - Argument of type '{ wrapper: ({ children, interceptor, }: any) => JSX.Element; interceptor: jest.Mock<any, any, any>; }' is not assignable to parameter of type '{ interceptor: jest.Mock<any, any, any>; }'.
-        wrapper.rerender({wrapper: Wrapper, interceptor: interceptor2});
+        wrapper.rerender({interceptor: interceptor2});
         const result2 = wrapper.result.current;
 
         // Assert
@@ -126,7 +125,6 @@ describe("#useRequestInterception", () => {
             interceptedHandler();
 
             // Assert
-            // @ts-expect-error [FEI-5019] - TS2339 - Property 'toHaveBeenCalledBefore' does not exist on type 'JestMatchers<Mock<null, [], any>>'.
             expect(interceptorNearest).toHaveBeenCalledBefore(
                 interceptorFurthest,
             );
@@ -154,7 +152,6 @@ describe("#useRequestInterception", () => {
             interceptedHandler();
 
             // Assert
-            // @ts-expect-error [FEI-5019] - TS2339 - Property 'toHaveBeenCalledBefore' does not exist on type 'JestMatchers<Mock<null, [], any>>'.
             expect(interceptorFurthest).toHaveBeenCalledBefore(handler);
         });
 

package/src/hooks/__tests__/use-server-effect.test.ts

@@ -139,8 +139,7 @@ describe("#useServerEffect", () => {
             const interceptedHandler = jest.fn();
             jest.spyOn(SsrCache.Default, "getEntry").mockReturnValueOnce({
                 data: "DATA",
-                // @ts-expect-error [FEI-5019] - TS2322 - Type 'null' is not assignable to type 'undefined'.
-                error: null,
+                error: undefined,
             });
             jest.spyOn(
                 UseRequestInterception,
@@ -165,8 +164,7 @@ describe("#useServerEffect", () => {
             const fakeHandler = jest.fn();
             jest.spyOn(SsrCache.Default, "getEntry").mockReturnValueOnce({
                 data: "DATA",
-                // @ts-expect-error [FEI-5019] - TS2322 - Type 'null' is not assignable to type 'undefined'.
-                error: null,
+                error: undefined,
             });
 
             // Act
@@ -221,8 +219,7 @@ describe("#useServerEffect", () => {
             const fakeHandler = jest.fn();
             jest.spyOn(SsrCache.Default, "getEntry").mockReturnValueOnce({
                 data: "DATA",
-                // @ts-expect-error [FEI-5019] - TS2322 - Type 'null' is not assignable to type 'undefined'.
-                error: null,
+                error: undefined,
             });
 
             // Act

package/src/hooks/__tests__/use-shared-cache.test.ts

@@ -1,3 +1,5 @@
+// eslint-disable-next-line import/no-unassigned-import
+import "jest-extended";
 import {renderHook as clientRenderHook} from "@testing-library/react-hooks";
 
 import {useSharedCache, SharedCache} from "../use-shared-cache";
@@ -48,7 +50,6 @@ describe("#useSharedCache", () => {
         } = clientRenderHook(() => useSharedCache("id", "scope"));
 
         // Assert
-        // @ts-expect-error [FEI-5019] - TS2339 - Property 'toBeArrayOfSize' does not exist on type 'JestMatchers<[ValidCacheData | null | undefined, CacheValueFn<ValidCacheData>]>'.
         expect(result).toBeArrayOfSize(2);
     });
 
@@ -119,12 +120,13 @@ describe("#useSharedCache", () => {
                 id: "id",
                 scope: "scope",
             });
-            const result1 = wrapper.result.all[wrapper.result.all.length - 2];
-            const result2 = wrapper.result.current;
+            const value1 = wrapper.result.all[wrapper.result.all.length - 2];
+            const value2 = wrapper.result.current;
+            const result1 = Array.isArray(value1) ? value1[1] : "BAD1";
+            const result2 = Array.isArray(value2) ? value2[1] : "BAD2";
 
             // Assert
-            // @ts-expect-error [FEI-5019] - TS7053 - Element implicitly has an 'any' type because expression of type '1' can't be used to index type 'Error | [ValidCacheData | null | undefined, CacheValueFn<ValidCacheData>]'.
-            expect(result1[1]).toBe(result2[1]);
+            expect(result1).toBe(result2);
         });
 
         it("should be a new function if the id changes", () => {
@@ -138,12 +140,13 @@ describe("#useSharedCache", () => {
 
             // Act
             wrapper.rerender({id: "new-id"});
-            const result1 = wrapper.result.all[wrapper.result.all.length - 2];
-            const result2 = wrapper.result.current;
+            const value1 = wrapper.result.all[wrapper.result.all.length - 2];
+            const value2 = wrapper.result.current;
+            const result1 = Array.isArray(value1) ? value1[1] : "BAD1";
+            const result2 = Array.isArray(value2) ? value2[1] : "BAD2";
 
             // Assert
-            // @ts-expect-error [FEI-5019] - TS7053 - Element implicitly has an 'any' type because expression of type '1' can't be used to index type 'Error | [ValidCacheData | null | undefined, CacheValueFn<ValidCacheData>]'.
-            expect(result1[1]).not.toBe(result2[1]);
+            expect(result1).not.toBe(result2);
         });
 
         it("should be a new function if the scope changes", () => {
@@ -157,12 +160,13 @@ describe("#useSharedCache", () => {
 
             // Act
             wrapper.rerender({scope: "new-scope"});
-            const result1 = wrapper.result.all[wrapper.result.all.length - 2];
-            const result2 = wrapper.result.current;
+            const value1 = wrapper.result.all[wrapper.result.all.length - 2];
+            const value2 = wrapper.result.current;
+            const result1 = Array.isArray(value1) ? value1[1] : "BAD1";
+            const result2 = Array.isArray(value2) ? value2[1] : "BAD2";
 
             // Assert
-            // @ts-expect-error [FEI-5019] - TS7053 - Element implicitly has an 'any' type because expression of type '1' can't be used to index type 'Error | [ValidCacheData | null | undefined, CacheValueFn<ValidCacheData>]'.
-            expect(result1[1]).not.toBe(result2[1]);
+            expect(result1).not.toBe(result2);
         });
 
         it("should set the value in the cache", () => {

package/src/hooks/use-cached-effect.ts

@@ -63,6 +63,12 @@ type CachedEffectOptions<TData extends ValidCacheData> = {
     scope?: string;
 };
 
+type InflightRequest<TData extends ValidCacheData> = {
+    requestId: string;
+    request: Promise<Result<TData>>;
+    cancel(): void;
+};
+
 const DefaultScope = "useCachedEffect";
 
 /**
@@ -114,19 +120,16 @@ export const useCachedEffect = <TData extends ValidCacheData>(
     const forceUpdate = useForceUpdate();
     // For the NetworkOnly fetch policy, we ignore the cached value.
     // So we need somewhere else to store the network value.
-    const networkResultRef = React.useRef();
+    const networkResultRef = React.useRef<Result<TData> | null>();
 
     // Set up the function that will do the fetching.
-    const currentRequestRef = React.useRef();
+    const currentRequestRef = React.useRef<InflightRequest<TData> | null>();
     const fetchRequest = React.useMemo(() => {
         // 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 = () => {
@@ -153,7 +156,6 @@ export const useCachedEffect = <TData extends 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
@@ -162,11 +164,9 @@ export const useCachedEffect = <TData extends 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):
@@ -178,7 +178,6 @@ export const useCachedEffect = <TData extends 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
@@ -189,7 +188,6 @@ export const useCachedEffect = <TData extends 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) {
@@ -204,7 +202,6 @@ export const useCachedEffect = <TData extends 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,29 +262,36 @@ export const useCachedEffect = <TData extends 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]);
 
     // We track the last result we returned in order to support the
-    // "retainResultOnChange" option.
-    const lastResultAgnosticOfIdRef = React.useRef(Status.loading());
+    // "retainResultOnChange" option. To begin, the last result is no-data.
+    const lastResultAgnosticOfIdRef = React.useRef<Result<TData>>(
+        Status.noData<TData>(),
+    );
+    // The default return value is:
+    // - The last result we returned if we're retaining results on change.
+    // - The no-data state if shouldFetch is false, and therefore there is no
+    //   in-flight request.
+    // - Otherwise, the loading state (we can assume there's an inflight
+    //   request if skip is not true).
     const loadingResult = retainResultOnChange
         ? lastResultAgnosticOfIdRef.current
-        : Status.loading();
+        : shouldFetch
+        ? Status.loading<TData>()
+        : Status.noData<TData>();
 
-    // Loading is a transient state, so we only use it here; it's not something
-    // we cache.
-    const result =
+    // Loading and no-data are transient states, so we only use them here;
+    // they're not something we cache.
+    const result: Result<TData> =
         (fetchPolicy === FetchPolicy.NetworkOnly
             ? networkResultRef.current
             : mostRecentResult) ?? loadingResult;
     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.ts

@@ -10,6 +10,13 @@ import type {
     GqlFetchOptions,
 } from "../util/gql-types";
 
+interface GqlFetchFn<TContext extends GqlContext> {
+    <TData, TVariables extends Record<any, any>>(
+        operation: GqlOperation<TData, TVariables>,
+        options?: GqlFetchOptions<TVariables, TContext>,
+    ): Promise<TData>;
+}
+
 /**
  * Hook to obtain a gqlFetch function for performing GraphQL requests.
  *
@@ -22,10 +29,7 @@ import type {
  */
 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>) => {
+): GqlFetchFn<TContext> => {
     // This hook only works if the `GqlRouter` has been used to setup context.
     const gqlRouterContext = useGqlRouterContext(context);
 
@@ -34,22 +38,21 @@ export const useGql = <TContext extends GqlContext>(
     // we give the same function instance back to our callers instead of
     // 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(
+    const gqlFetch: GqlFetchFn<TContext> = useCallback(
         <TData, TVariables extends Record<any, any>>(
             operation: GqlOperation<TData, TVariables>,
             options: GqlFetchOptions<TVariables, TContext> = Object.freeze({}),
-        ) => {
+        ): Promise<TData> => {
             const {fetch, defaultContext} = gqlRouterContext;
             const {variables, context = {}} = options;
             const finalContext = mergeGqlContext(defaultContext, context);
 
             // Invoke the fetch and extract the data.
-            return fetch(operation, variables, finalContext).then(
-                getGqlDataFromResponse,
+            return fetch(operation, variables, finalContext).then((response) =>
+                getGqlDataFromResponse<TData>(response),
             );
         },
         [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;
 };