[pull] master from the-guild-org:master

packages/apollo-angular/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Change log
 
+## 12.1.0
+
+### Minor Changes
+
+- [#2382](https://github.com/the-guild-org/apollo-angular/pull/2382)
+  [`d21e7f9`](https://github.com/the-guild-org/apollo-angular/commit/d21e7f90de50d0b7b2afc3692b8b569803209ea5)
+  Thanks [@PowerKiKi](https://github.com/PowerKiKi)! - New `onlyCompleteFragment()`
+
+  Same as `onlyCompleteData()` but for `Apollo.watchFragment()`.
+
+### Patch Changes
+
+- [#2381](https://github.com/the-guild-org/apollo-angular/pull/2381)
+  [`679dba2`](https://github.com/the-guild-org/apollo-angular/commit/679dba2ca47d859ed2be5441f12eca3ca72ceea1)
+  Thanks [@PowerKiKi](https://github.com/PowerKiKi)! - Rename `onlyComplete()` into
+  `onlyCompleteData()`
+
+  Because it communicates better that it is about the data, and not the stream being completed.
+
+  `onlyComplete()` will be dropped in the next major version.
+
 ## 12.0.0
 
 ### Major Changes

packages/apollo-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apollo-angular",
-  "version": "12.0.0",
+  "version": "12.1.0",
   "type": "module",
   "description": "Use your GraphQL data in your Angular app, with the Apollo Client",
   "repository": {

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 { onlyComplete } from './only-complete';
+export { onlyCompleteData, onlyComplete, onlyCompleteFragment } from './only-complete-data';

packages/apollo-angular/src/only-complete.ts → 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'`).
@@ -19,13 +29,13 @@ import type { ObservableQuery } from '@apollo/client/core';
  *     notifyOnNetworkStatusChange: false, // Adding this will save CPU cycles
  *   })
  *   .valueChanges
- *   .pipe(onlyComplete())
+ *   .pipe(onlyCompleteData())
  *   .subscribe(result => {
  *     // Do something with complete result
  *   });
  * ```
  */
-export function onlyComplete<TData>(): OperatorFunction<
+export function onlyCompleteData<TData>(): OperatorFunction<
   ObservableQuery.Result<TData>,
   ObservableQuery.Result<TData, 'complete'>
 > {
@@ -34,3 +44,15 @@ export function onlyComplete<TData>(): OperatorFunction<
       result.dataState === 'complete',
   );
 }
+
+/**
+ * @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

@@ -0,0 +1,112 @@
+import { Apollo, gql, onlyCompleteData, onlyCompleteFragment, provideApollo } from 'apollo-angular';
+import { map, Subject } from 'rxjs';
+import { describe, expect, test } from 'vitest';
+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;
+
+  test('should receive only complete results', () =>
+    new Promise<void>(done => {
+      const b = new Subject<ObservableQuery.Result<Result>>();
+      b.pipe(onlyCompleteData()).subscribe({
+        next: result => {
+          count++;
+          theUser = result.data.user;
+        },
+        complete: () => {
+          expect(count).toBe(1);
+          expect(theUser).toEqual({ name: 'foo' });
+          done();
+        },
+      });
+
+      b.next({
+        dataState: 'partial',
+        data: {},
+        loading: true,
+        partial: true,
+        networkStatus: NetworkStatus.loading,
+      } satisfies ObservableQuery.Result<Result, 'partial'>);
+
+      b.next({
+        dataState: 'complete',
+        data: { user: { name: 'foo' } },
+        loading: false,
+        partial: false,
+        networkStatus: NetworkStatus.ready,
+      } satisfies ObservableQuery.Result<Result, 'complete'>);
+
+      b.next({
+        dataState: 'partial',
+        data: {},
+        loading: true,
+        partial: true,
+        networkStatus: NetworkStatus.loading,
+      } satisfies ObservableQuery.Result<Result, 'partial'>);
+
+      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),
+      );
+  });
+});

packages/demo/src/app/pages/movie/movie-page.component.ts

@@ -1,4 +1,4 @@
-import { Apollo, gql, onlyComplete } from 'apollo-angular';
+import { Apollo, gql, onlyCompleteData } from 'apollo-angular';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { AsyncPipe } from '@angular/common';
@@ -72,7 +72,7 @@ export class MoviePageComponent implements OnInit {
         notifyOnNetworkStatusChange: false,
       })
       .valueChanges.pipe(
-        onlyComplete(),
+        onlyCompleteData(),
         map(result => result.data.film),
       );
   }

packages/demo/src/app/pages/movies/movies-page.component.ts

@@ -1,4 +1,4 @@
-import { Apollo, gql, onlyComplete } from 'apollo-angular';
+import { Apollo, gql, onlyCompleteData } from 'apollo-angular';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { AsyncPipe } from '@angular/common';
@@ -59,7 +59,7 @@ export class MoviesPageComponent implements OnInit {
         notifyOnNetworkStatusChange: false,
       })
       .valueChanges.pipe(
-        onlyComplete(),
+        onlyCompleteData(),
         map(result => result.data.allFilms.films),
       );
   }