Fix issue where multiple fetches might report data if result contained errors (#11984)

Author: jerelmiller

.changeset/fluffy-impalas-cross.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Fix an issue where multiple fetches with results that returned errors would sometimes set the `data` property with an `errorPolicy` of `none`.

.size-limits.json

@@ -1,4 +1,4 @@
 {
-  "dist/apollo-client.min.cjs": 40243,
-  "import { ApolloClient, InMemoryCache, HttpLink } from \"dist/index.js\" (production)": 33041
+  "dist/apollo-client.min.cjs": 40252,
+  "import { ApolloClient, InMemoryCache, HttpLink } from \"dist/index.js\" (production)": 33052
 }

src/core/QueryManager.ts

@@ -1176,11 +1176,12 @@ export class QueryManager<TStore> {
       (result) => {
         const graphQLErrors = getGraphQLErrorsFromResult(result);
         const hasErrors = graphQLErrors.length > 0;
+        const { errorPolicy } = options;
 
         // If we interrupted this request by calling getResultsFromLink again
         // with the same QueryInfo object, we ignore the old results.
         if (requestId >= queryInfo.lastRequestId) {
-          if (hasErrors && options.errorPolicy === "none") {
+          if (hasErrors && errorPolicy === "none") {
             // Throwing here effectively calls observer.error.
             throw queryInfo.markError(
               new ApolloError({
@@ -1206,7 +1207,15 @@ export class QueryManager<TStore> {
           networkStatus: NetworkStatus.ready,
         };
 
-        if (hasErrors && options.errorPolicy !== "ignore") {
+        // In the case we start multiple network requests simulatenously, we
+        // want to ensure we properly set `data` if we're reporting on an old
+        // result which will not be caught by the conditional above that ends up
+        // throwing the markError result.
+        if (hasErrors && errorPolicy === "none") {
+          aqr.data = void 0 as TData;
+        }
+
+        if (hasErrors && errorPolicy !== "ignore") {
           aqr.errors = graphQLErrors;
           aqr.networkStatus = NetworkStatus.error;
         }

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

@@ -1,5 +1,5 @@
 import React, { Fragment, ReactNode, useEffect, useRef, useState } from "react";
-import { DocumentNode, GraphQLError } from "graphql";
+import { DocumentNode, GraphQLError, GraphQLFormattedError } from "graphql";
 import gql from "graphql-tag";
 import { act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
@@ -10081,6 +10081,85 @@ describe("useQuery Hook", () => {
       }
     );
   });
+
+  // https://github.com/apollographql/apollo-client/issues/11938
+  it("does not emit `data` on previous fetch when a 2nd fetch is kicked off and the result returns an error when errorPolicy is none", async () => {
+    const query = gql`
+      query {
+        user {
+          id
+          name
+        }
+      }
+    `;
+
+    const graphQLError: GraphQLFormattedError = { message: "Cannot get name" };
+
+    const mocks = [
+      {
+        request: { query },
+        result: {
+          data: { user: { __typename: "User", id: "1", name: null } },
+          errors: [graphQLError],
+        },
+        delay: 10,
+        maxUsageCount: Number.POSITIVE_INFINITY,
+      },
+    ];
+
+    const ProfiledHook = profileHook(() =>
+      useQuery(query, { notifyOnNetworkStatusChange: true })
+    );
+
+    render(<ProfiledHook />, {
+      wrapper: ({ children }) => (
+        <MockedProvider mocks={mocks}>{children}</MockedProvider>
+      ),
+    });
+
+    {
+      const { loading, data, error } = await ProfiledHook.takeSnapshot();
+
+      expect(loading).toBe(true);
+      expect(data).toBeUndefined();
+      expect(error).toBeUndefined();
+    }
+
+    {
+      const { loading, data, error } = await ProfiledHook.takeSnapshot();
+
+      expect(loading).toBe(false);
+      expect(data).toBeUndefined();
+      expect(error).toEqual(new ApolloError({ graphQLErrors: [graphQLError] }));
+    }
+
+    const { refetch } = ProfiledHook.getCurrentSnapshot();
+
+    refetch().catch(() => {});
+    refetch().catch(() => {});
+
+    {
+      const { loading, networkStatus, data, error } =
+        await ProfiledHook.takeSnapshot();
+
+      expect(loading).toBe(true);
+      expect(data).toBeUndefined();
+      expect(networkStatus).toBe(NetworkStatus.refetch);
+      expect(error).toBeUndefined();
+    }
+
+    {
+      const { loading, networkStatus, data, error } =
+        await ProfiledHook.takeSnapshot();
+
+      expect(loading).toBe(false);
+      expect(data).toBeUndefined();
+      expect(networkStatus).toBe(NetworkStatus.error);
+      expect(error).toEqual(new ApolloError({ graphQLErrors: [graphQLError] }));
+    }
+
+    await expect(ProfiledHook).not.toRerender({ timeout: 200 });
+  });
 });
 
 describe.skip("Type Tests", () => {