Throw errors returned from incremental chunks when error policy is none

.changeset/sour-weeks-suffer.md

@@ -0,0 +1,9 @@
+---
+'@apollo/client': patch
+---
+
+Throw errors in `useSuspenseQuery` for errors returned in incremental chunks when `errorPolicy` is `none`. This provides a more consistent behavior of the `errorPolicy` in the hook.
+
+### Potentially breaking change
+
+Previously, if you issued a query with `@defer` and relied on `errorPolicy: 'none'` to set the `error` property returned from `useSuspenseQuery` when the error was returned in an incremental chunk, this error is now thrown. Switch the `errorPolicy` to `all` to avoid throwing the error and instead return it in the `error` property.

src/react/cache/QueryReference.ts

@@ -201,10 +201,7 @@ export class InternalQueryReference<TData = unknown> {
       return;
     }
 
-    this.result = result;
-    this.promise = result.data
-      ? createFulfilledPromise(result)
-      : createRejectedPromise(result);
+    this.promise = createRejectedPromise(error);
     this.deliver(this.promise);
   }
 

src/react/hooks/__tests__/useSuspenseQuery.test.tsx

@@ -6101,7 +6101,9 @@ describe('useSuspenseQuery', () => {
     consoleSpy.mockRestore();
   });
 
-  it('discards partial data and does not throw errors returned in incremental chunks but returns them in `error` property', async () => {
+  it('discards partial data and throws errors returned in incremental chunks', async () => {
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+
     const query = gql`
       query {
         hero {
@@ -6196,37 +6198,9 @@ describe('useSuspenseQuery', () => {
     });
 
     await waitFor(() => {
-      expect(result.current).toMatchObject({
-        data: {
-          hero: {
-            heroFriends: [
-              {
-                id: '1000',
-                name: 'Luke Skywalker',
-              },
-              {
-                id: '1003',
-                name: 'Leia Organa',
-              },
-            ],
-            name: 'R2-D2',
-          },
-        },
-        networkStatus: NetworkStatus.error,
-        error: new ApolloError({
-          graphQLErrors: [
-            new GraphQLError(
-              'homeWorld for character with ID 1000 could not be fetched.',
-              { path: ['hero', 'heroFriends', 0, 'homeWorld'] }
-            ),
-          ],
-        }),
-      });
+      expect(renders.errorCount).toBe(1);
     });
 
-    expect(result.current.error).toBeInstanceOf(ApolloError);
-
-    expect(renders.count).toBe(3);
     expect(renders.suspenseCount).toBe(1);
     expect(renders.frames).toMatchObject([
       {
@@ -6248,33 +6222,20 @@ describe('useSuspenseQuery', () => {
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
-      {
-        data: {
-          hero: {
-            heroFriends: [
-              {
-                id: '1000',
-                name: 'Luke Skywalker',
-              },
-              {
-                id: '1003',
-                name: 'Leia Organa',
-              },
-            ],
-            name: 'R2-D2',
-          },
-        },
-        networkStatus: NetworkStatus.error,
-        error: new ApolloError({
-          graphQLErrors: [
-            new GraphQLError(
-              'homeWorld for character with ID 1000 could not be fetched.',
-              { path: ['hero', 'heroFriends', 0, 'homeWorld'] }
-            ),
-          ],
-        }),
-      },
     ]);
+
+    const [error] = renders.errors as ApolloError[];
+
+    expect(error).toBeInstanceOf(ApolloError);
+    expect(error.networkError).toBeNull();
+    expect(error.graphQLErrors).toEqual([
+      new GraphQLError(
+        'homeWorld for character with ID 1000 could not be fetched.',
+        { path: ['hero', 'heroFriends', 0, 'homeWorld'] }
+      ),
+    ]);
+
+    consoleSpy.mockRestore();
   });
 
   it('adds partial data and does not throw errors returned in incremental chunks but returns them in `error` property with errorPolicy set to `all`', async () => {

src/utilities/promises/decoration.ts

@@ -29,6 +29,9 @@ export function createFulfilledPromise<TValue>(value: TValue) {
 export function createRejectedPromise<TValue = unknown>(reason: unknown) {
   const promise = Promise.reject(reason) as RejectedPromise<TValue>;
 
+  // prevent potential edge cases leaking unhandled error rejections
+  promise.catch(() => {});
+
   promise.status = 'rejected';
   promise.reason = reason;