Merge pull request #2426 from the-guild-org/powerkiki

Improve the return type of client.query in regard of `errorPolicy`

Author: PowerKiKi

.changeset/lazy-lights-live.md

@@ -0,0 +1,7 @@
+---
+'apollo-angular': patch
+---
+
+`client.watchFragment()` might return null
+
+This forward the reality of Apollo Client

.changeset/wide-carrots-dance.md

@@ -0,0 +1,22 @@
+---
+'apollo-angular': minor
+---
+
+Improve the return type of client.watchFragment in regard of `errorPolicy`
+
+Improves the return type of `client.query` to be smarter about the
+applied `errorPolicy`. The `data` and `error` properties now better
+reflect the expected runtime value for a given `errorPolicy`.
+
+This allows the removal of `undefined` checks or optional chaining for
+most uses of `client.query`.
+
+> [!NOTE]
+> The `ApolloClient.QueryResult` type is used in several places
+throughout the code base, most of which do not know the underlying
+`errorPolicy` applied (e.g. `refetchQueries`, which might have a mix of
+`ObservableQuery` instances with different error policies). As such, I
+left a fallback case that leaves the type as-is. You need to be explicit
+about an error policy in order to get the smarter types.
+
+See equivalent in Apollo Client: https://github.com/apollographql/apollo-client/pull/13130

packages/apollo-angular/src/apollo.ts

@@ -1,7 +1,7 @@
 import { Observable } from 'rxjs';
 import { Inject, Injectable, NgZone, Optional } from '@angular/core';
 import type { OperationVariables } from '@apollo/client';
-import { ApolloClient } from '@apollo/client';
+import { ApolloClient, ErrorPolicy } from '@apollo/client';
 import { QueryRef } from './query-ref';
 import { APOLLO_FLAGS, APOLLO_NAMED_OPTIONS, APOLLO_OPTIONS } from './tokens';
 import type { EmptyObject, Flags, NamedOptions } from './types';
@@ -18,7 +18,10 @@ export declare namespace Apollo {
     TVariables extends OperationVariables = EmptyObject,
   > = ApolloClient.QueryOptions<TData, TVariables>;
 
-  export type QueryResult<TData = unknown> = ApolloClient.QueryResult<TData>;
+  export type QueryResult<
+    TData = unknown,
+    TErrorPolicy extends ErrorPolicy | undefined = undefined,
+  > = ApolloClient.QueryResult<TData, TErrorPolicy>;
 
   export type MutateOptions<
     TData = unknown,
@@ -97,7 +100,7 @@ export class ApolloBase {
     TVariables extends OperationVariables = EmptyObject,
   >(
     options: Apollo.WatchFragmentOptions<TFragmentData, TVariables>,
-  ): Observable<Apollo.WatchFragmentResult<TFragmentData>> {
+  ): Observable<Apollo.WatchFragmentResult<TFragmentData | null>> {
     const { useZone, ...opts } = options;
     const obs = this.ensureClient().watchFragment<TFragmentData, TVariables>({ ...opts });
 

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

@@ -7,8 +7,8 @@ type CompleteFragment<TData> = {
 } & GetDataState<TData, 'complete'>;
 
 type ForWatchFragment<TData> = OperatorFunction<
-  ApolloClient.WatchFragmentResult<TData>,
-  CompleteFragment<TData>
+  ApolloClient.WatchFragmentResult<TData | null>,
+  ApolloClient.WatchFragmentResult<TData | null> & CompleteFragment<NonNullable<TData>>
 >;
 
 /**
@@ -54,5 +54,10 @@ 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');
+  return filter(
+    (
+      result,
+    ): result is ApolloClient.WatchFragmentResult<TData | null> &
+      CompleteFragment<NonNullable<TData>> => result.dataState === 'complete',
+  );
 }

packages/demo/package.json

@@ -17,7 +17,7 @@
     "@angular/core": "^20.3.0",
     "@angular/platform-browser": "^20.3.0",
     "@angular/router": "^20.3.0",
-    "@apollo/client": "4.0.1",
+    "@apollo/client": "^4.2.7",
     "apollo-angular": "workspace:*",
     "typescript": "~5.8.0"
   }