New onlyCompleteFragment() (#2382)

Same as `onlyCompleteData()` but for `Apollo.watchFragment()`.

Author: PowerKiKi

.changeset/strong-carrots-stare.md

@@ -0,0 +1,7 @@
+---
+'apollo-angular': minor
+---
+
+New `onlyCompleteFragment()`
+
+Same as `onlyCompleteData()` but for `Apollo.watchFragment()`.

packages/apollo-angular/src/index.ts

@@ -8,4 +8,4 @@ export { Subscription } from './subscription';
 export { APOLLO_OPTIONS, APOLLO_NAMED_OPTIONS, APOLLO_FLAGS } from './tokens';
 export type { Flags, NamedOptions, ResultOf, VariablesOf } from './types';
 export { gql } from './gql';
-export { onlyCompleteData, onlyComplete } from './only-complete-data';
+export { onlyCompleteData, onlyComplete, onlyCompleteFragment } from './only-complete-data';

packages/apollo-angular/src/only-complete-data.ts

@@ -1,5 +1,15 @@
 import { filter, type OperatorFunction } from 'rxjs';
-import type { ObservableQuery } from '@apollo/client/core';
+import type { ApolloClient, GetDataState, ObservableQuery } from '@apollo/client/core';
+
+type CompleteFragment<TData> = {
+  complete: true;
+  missing?: never;
+} & GetDataState<TData, 'complete'>;
+
+type ForWatchFragment<TData> = OperatorFunction<
+  ApolloClient.WatchFragmentResult<TData>,
+  CompleteFragment<TData>
+>;
 
 /**
  * Filter emitted results to only receive results that are complete (`result.dataState === 'complete'`).
@@ -39,3 +49,10 @@ export function onlyCompleteData<TData>(): OperatorFunction<
  * @deprecated Use `onlyCompleteData()` instead.
  */
 export const onlyComplete = onlyCompleteData;
+
+/**
+ * Same as `onlyCompleteData()` but for `Apollo.watchFragment()`.
+ */
+export function onlyCompleteFragment<TData>(): ForWatchFragment<TData> {
+  return filter((result): result is CompleteFragment<TData> => result.dataState === 'complete');
+}

packages/apollo-angular/testing/tests/only-complete-data.spec.ts

@@ -1,14 +1,32 @@
-import { onlyCompleteData } from 'apollo-angular';
-import { Subject } from 'rxjs';
+import { Apollo, gql, onlyCompleteData, onlyCompleteFragment, provideApollo } from 'apollo-angular';
+import { map, Subject } from 'rxjs';
 import { describe, expect, test } from 'vitest';
-import { NetworkStatus, ObservableQuery } from '@apollo/client/core';
+import { TestBed } from '@angular/core/testing';
+import { InMemoryCache, NetworkStatus, type ObservableQuery } from '@apollo/client/core';
+import { MockLink } from '@apollo/client/testing';
 
 interface Result {
   user: {
     name: string;
   };
 }
 
+const query = gql<Result, Record<string, never>>`
+  query User {
+    user {
+      name
+    }
+  }
+`;
+
+const fragment = gql<Result, Record<string, never>>`
+  fragment UserFragment on User {
+    user {
+      name
+    }
+  }
+`;
+
 describe('onlyCompleteData', () => {
   let theUser: Result['user'] | null = null;
   let count = 0;
@@ -54,4 +72,41 @@ describe('onlyCompleteData', () => {
 
       b.complete();
     }));
+
+  test('should compile', () => {
+    TestBed.configureTestingModule({
+      providers: [
+        provideApollo(() => {
+          return {
+            link: new MockLink([]),
+            cache: new InMemoryCache(),
+          };
+        }),
+      ],
+    });
+
+    const apollo = TestBed.inject(Apollo);
+
+    apollo
+      .watchQuery({
+        query: query,
+      })
+      .valueChanges.pipe(
+        onlyCompleteData(),
+        map(result => result.data.user.name),
+      );
+
+    apollo
+      .watchFragment({
+        fragment: fragment,
+        from: {
+          __typename: 'User',
+          id: 1,
+        },
+      })
+      .pipe(
+        onlyCompleteFragment(),
+        map(result => result.data.user.name),
+      );
+  });
 });