Fix types to work with data masking

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<TData = unknown>() {
   return createRenderStream({
     initialSnapshot: {
-      result: null as UseSuspenseFragmentResult<TData> | null,
+      result: null as UseSuspenseFragmentResult<MaybeMasked<TData>> | 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<ItemFragment>();
   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<ItemFragment>();
   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<ItemFragment>();
   const { SuspenseFallback } = createDefaultTrackedComponents();
 
   const client = new ApolloClient({ cache: new InMemoryCache() });

src/react/hooks/useSuspenseFragment.ts

@@ -1,5 +1,6 @@
 import type {
   ApolloClient,
+  MaybeMasked,
   OperationVariables,
   Reference,
   StoreObject,
@@ -36,7 +37,7 @@ export interface UseSuspenseFragmentOptions<TData, TVars>
   client?: ApolloClient<any>;
 }
 
-export type UseSuspenseFragmentResult<TData> = { data: TData };
+export type UseSuspenseFragmentResult<TData> = { data: MaybeMasked<TData> };
 
 export function useSuspenseFragment<
   TData = unknown,
@@ -77,10 +78,9 @@ function _useSuspenseFragment<
     () => client.watchFragment(options)
   );
 
-  let [current, setPromise] = React.useState<[FragmentKey, Promise<TData>]>([
-    fragmentRef.key,
-    fragmentRef.promise,
-  ]);
+  let [current, setPromise] = React.useState<
+    [FragmentKey, Promise<MaybeMasked<TData>>]
+  >([fragmentRef.key, fragmentRef.promise]);
 
   if (current[0] !== fragmentRef.key) {
     // eslint-disable-next-line react-compiler/react-compiler

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<TData = unknown> {
   public readonly observable: Observable<WatchFragmentResult<TData>>;
   public readonly key: FragmentKey = {};
-  public promise!: FragmentRefPromise<TData>;
+  public promise!: FragmentRefPromise<MaybeMasked<TData>>;
 
-  private resolve: ((result: TData) => void) | undefined;
+  private resolve: ((result: MaybeMasked<TData>) => void) | undefined;
   private reject: ((error: unknown) => void) | undefined;
 
   private subscription!: ObservableSubscription;
-  private listeners = new Set<Listener<TData>>();
+  private listeners = new Set<Listener<MaybeMasked<TData>>>();
 
   private references = 0;
 
@@ -48,7 +49,7 @@ export class FragmentReference<TData = unknown> {
     this.subscribeToFragment();
   }
 
-  listen(listener: Listener<TData>) {
+  listen(listener: Listener<MaybeMasked<TData>>) {
     this.listeners.add(listener);
 
     return () => {
@@ -117,13 +118,13 @@ export class FragmentReference<TData = unknown> {
     this.reject?.(error);
   }
 
-  private deliver(promise: FragmentRefPromise<TData>) {
+  private deliver(promise: FragmentRefPromise<MaybeMasked<TData>>) {
     this.listeners.forEach((listener) => listener(promise));
   }
 
   private createPendingPromise() {
     return wrapPromiseWithState(
-      new Promise<TData>((resolve, reject) => {
+      new Promise<MaybeMasked<TData>>((resolve, reject) => {
         this.resolve = resolve;
         this.reject = reject;
       })