diff --git a/src/react/hooks/__tests__/useSuspenseFragment.test.tsx b/src/react/hooks/__tests__/useSuspenseFragment.test.tsx index b58b4ce2b0..dbb823d63d 100644 --- a/src/react/hooks/__tests__/useSuspenseFragment.test.tsx +++ b/src/react/hooks/__tests__/useSuspenseFragment.test.tsx @@ -6,6 +6,7 @@ import { ApolloClient, gql, InMemoryCache, + MaybeMasked, TypedDocumentNode, } from "../../../core"; import React, { Suspense } from "react"; @@ -19,7 +20,7 @@ import { function createDefaultRenderStream() { return createRenderStream({ initialSnapshot: { - result: null as UseSuspenseFragmentResult | null, + result: null as UseSuspenseFragmentResult> | null, }, }); } @@ -40,7 +41,8 @@ test("suspends until cache value is complete", async () => { text: string; } - const { render, takeRender, replaceSnapshot } = createDefaultRenderStream(); + const { render, takeRender, replaceSnapshot } = + createDefaultRenderStream(); const { SuspenseFallback } = createDefaultTrackedComponents(); const client = new ApolloClient({ cache: new InMemoryCache() }); @@ -115,7 +117,8 @@ test("updates when the cache updates", async () => { text: string; } - const { takeRender, render, replaceSnapshot } = createDefaultRenderStream(); + const { takeRender, render, replaceSnapshot } = + createDefaultRenderStream(); const { SuspenseFallback } = createDefaultTrackedComponents(); const client = new ApolloClient({ cache: new InMemoryCache() }); @@ -212,7 +215,8 @@ test("resuspends when data goes missing until complete again", async () => { text: string; } - const { takeRender, render, replaceSnapshot } = createDefaultRenderStream(); + const { takeRender, render, replaceSnapshot } = + createDefaultRenderStream(); const { SuspenseFallback } = createDefaultTrackedComponents(); const client = new ApolloClient({ cache: new InMemoryCache() }); diff --git a/src/react/hooks/useSuspenseFragment.ts b/src/react/hooks/useSuspenseFragment.ts index 45c708fb2d..9af2dfc0e4 100644 --- a/src/react/hooks/useSuspenseFragment.ts +++ b/src/react/hooks/useSuspenseFragment.ts @@ -1,5 +1,6 @@ import type { ApolloClient, + MaybeMasked, OperationVariables, Reference, StoreObject, @@ -36,7 +37,7 @@ export interface UseSuspenseFragmentOptions client?: ApolloClient; } -export type UseSuspenseFragmentResult = { data: TData }; +export type UseSuspenseFragmentResult = { data: MaybeMasked }; export function useSuspenseFragment< TData = unknown, @@ -77,10 +78,9 @@ function _useSuspenseFragment< () => client.watchFragment(options) ); - let [current, setPromise] = React.useState<[FragmentKey, Promise]>([ - fragmentRef.key, - fragmentRef.promise, - ]); + let [current, setPromise] = React.useState< + [FragmentKey, Promise>] + >([fragmentRef.key, fragmentRef.promise]); if (current[0] !== fragmentRef.key) { // eslint-disable-next-line react-compiler/react-compiler diff --git a/src/react/internal/cache/FragmentReference.ts b/src/react/internal/cache/FragmentReference.ts index 6e817036cc..34add02a34 100644 --- a/src/react/internal/cache/FragmentReference.ts +++ b/src/react/internal/cache/FragmentReference.ts @@ -1,4 +1,5 @@ import type { WatchFragmentResult } from "../../../cache/index.js"; +import type { MaybeMasked } from "../../../masking/index.js"; import { createFulfilledPromise, wrapPromiseWithState, @@ -20,13 +21,13 @@ interface FragmentReferenceOptions { export class FragmentReference { public readonly observable: Observable>; public readonly key: FragmentKey = {}; - public promise!: FragmentRefPromise; + public promise!: FragmentRefPromise>; - private resolve: ((result: TData) => void) | undefined; + private resolve: ((result: MaybeMasked) => void) | undefined; private reject: ((error: unknown) => void) | undefined; private subscription!: ObservableSubscription; - private listeners = new Set>(); + private listeners = new Set>>(); private references = 0; @@ -48,7 +49,7 @@ export class FragmentReference { this.subscribeToFragment(); } - listen(listener: Listener) { + listen(listener: Listener>) { this.listeners.add(listener); return () => { @@ -117,13 +118,13 @@ export class FragmentReference { this.reject?.(error); } - private deliver(promise: FragmentRefPromise) { + private deliver(promise: FragmentRefPromise>) { this.listeners.forEach((listener) => listener(promise)); } private createPendingPromise() { return wrapPromiseWithState( - new Promise((resolve, reject) => { + new Promise>((resolve, reject) => { this.resolve = resolve; this.reject = reject; })