ObervableQuery.refetch: don't refetch with cache-and-network, swi…

…ch to `network-only` instead (#12369) * `ObervableQuery.refetch`: don't refetch with `cache-and-network`, swich to `network-only` instead * update test * Update src/core/__tests__/ApolloClient/general.test.ts Co-authored-by: Jerel Miller <[email protected]> * Clean up Prettier, Size-limit, and Api-Extractor --------- Co-authored-by: Jerel Miller <[email protected]> Co-authored-by: phryneas <[email protected]>
apollographql · Feb 14, 2025 · bdfc5b2 · bdfc5b2
1 parent e93d19f
commit bdfc5b2
Show file tree

Hide file tree

Showing 6 changed files with 195 additions and 57 deletions.
diff --git a/.changeset/fresh-spies-burn.md b/.changeset/fresh-spies-burn.md
@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+`ObervableQuery.refetch`: don't refetch with `cache-and-network`, swich to `network-only` instead
diff --git a/.size-limits.json b/.size-limits.json
@@ -1,4 +1,4 @@
 {
-  "dist/apollo-client.min.cjs": 42240,
-  "import { ApolloClient, InMemoryCache, HttpLink } from \"dist/index.js\" (production)": 34448
+  "dist/apollo-client.min.cjs": 42232,
+  "import { ApolloClient, InMemoryCache, HttpLink } from \"dist/index.js\" (production)": 34438
 }
diff --git a/src/__tests__/client.ts b/src/__tests__/client.ts
@@ -3382,9 +3382,6 @@ describe("@connection", () => {
       // nextFetchPolicy function ends up getting called twice.
       void obs.refetch();
 
-      await expect(stream).toEmitMatchedValue({ data: { count: "initial" } });
-      expect(nextFetchPolicyCallCount).toBe(2);
-
       await expect(stream).toEmitMatchedValue({ data: { count: 0 } });
       expect(nextFetchPolicyCallCount).toBe(2);
 

diff --git a/src/core/ObservableQuery.ts b/src/core/ObservableQuery.ts
@@ -404,9 +404,7 @@ export class ObservableQuery<
     // (no-cache, network-only, or cache-and-network), override it with
     // network-only to force the refetch for this fetchQuery call.
     const { fetchPolicy } = this.options;
-    if (fetchPolicy === "cache-and-network") {
-      reobserveOptions.fetchPolicy = fetchPolicy;
-    } else if (fetchPolicy === "no-cache") {
+    if (fetchPolicy === "no-cache") {
       reobserveOptions.fetchPolicy = "no-cache";
     } else {
       reobserveOptions.fetchPolicy = "network-only";

diff --git a/src/core/__tests__/ApolloClient/general.test.ts b/src/core/__tests__/ApolloClient/general.test.ts
@@ -24,15 +24,18 @@ import {
 
 // core
 import { NetworkStatus } from "../../networkStatus";
-import { WatchQueryOptions } from "../../watchQueryOptions";
+import {
+  WatchQueryFetchPolicy,
+  WatchQueryOptions,
+} from "../../watchQueryOptions";
 import { QueryManager } from "../../QueryManager";
 
 import { ApolloError } from "../../../errors";
 
 // testing utils
 import { waitFor } from "@testing-library/react";
 import { wait } from "../../../testing/core";
-import { ApolloClient } from "../../../core";
+import { ApolloClient, ApolloQueryResult } from "../../../core";
 import { mockFetchQuery } from "../ObservableQuery";
 import { Concast, print } from "../../../utilities";
 import {
@@ -873,23 +876,7 @@ describe("ApolloClient", () => {
     expect(data).toBe(observable.getCurrentResult().data);
   });
 
-  it("sets networkStatus to `refetch` when refetching", async () => {
-    const request: WatchQueryOptions = {
-      query: gql`
-        query fetchLuke($id: String) {
-          people_one(id: $id) {
-            name
-          }
-        }
-      `,
-      variables: {
-        id: "1",
-      },
-      notifyOnNetworkStatusChange: true,
-      // This causes a loading:true result to be delivered from the cache
-      // before the final data2 result is delivered.
-      fetchPolicy: "cache-and-network",
-    };
+  {
     const data1 = {
       people_one: {
         name: "Luke Skywalker",
@@ -901,37 +888,187 @@ describe("ApolloClient", () => {
         name: "Luke Skywalker has a new name",
       },
     };
+    it.each<
+      [
+        notifyOnNetworkStatusChange: boolean,
+        fetchPolicy: WatchQueryFetchPolicy,
+        expectedInitialResults: ApolloQueryResult<typeof data1>[],
+        expectedRefetchedResults: ApolloQueryResult<typeof data1>[],
+      ]
+    >([
+      [
+        false,
+        "cache-first",
+        [
+          {
+            data: data1,
+            loading: false,
+            networkStatus: NetworkStatus.ready,
+          },
+        ],
+        [
+          {
+            data: data2,
+            loading: false,
+            networkStatus: NetworkStatus.ready,
+          },
+        ],
+      ],
+      [
+        false,
+        "network-only",
+        [
+          {
+            data: data1,
+            loading: false,
+            networkStatus: NetworkStatus.ready,
+          },
+        ],
+        [
+          {
+            data: data2,
+            loading: false,
+            networkStatus: NetworkStatus.ready,
+          },
+        ],
+      ],
+      [
+        false,
+        "cache-and-network",
+        [
+          {
+            data: data1,
+            loading: false,
+            networkStatus: NetworkStatus.ready,
+          },
+        ],
+        [
+          // {
+          //   data: data1,
+          //   loading: true,
+          //   networkStatus: NetworkStatus.refetch,
+          //   partial: false,
+          // },
+          {
+            data: data2,
+            loading: false,
+            networkStatus: NetworkStatus.ready,
+          },
+        ],
+      ],
+      [
+        true,
+        "cache-first",
+        [
+          {
+            data: data1,
+            loading: false,
+            networkStatus: NetworkStatus.ready,
+          },
+        ],
+        [
+          {
+            data: data1,
+            loading: true,
+            networkStatus: NetworkStatus.refetch,
+          },
+          {
+            data: data2,
+            loading: false,
+            networkStatus: NetworkStatus.ready,
+          },
+        ],
+      ],
+      [
+        true,
+        "network-only",
+        [
+          {
+            data: data1,
+            loading: false,
+            networkStatus: NetworkStatus.ready,
+          },
+        ],
+        [
+          {
+            data: data1,
+            loading: true,
+            networkStatus: NetworkStatus.refetch,
+          },
+          {
+            data: data2,
+            loading: false,
+            networkStatus: NetworkStatus.ready,
+          },
+        ],
+      ],
+      [
+        true,
+        "cache-and-network",
+        [
+          {
+            data: data1,
+            loading: false,
+            networkStatus: NetworkStatus.ready,
+          },
+        ],
+        [
+          {
+            data: data1,
+            loading: true,
+            networkStatus: NetworkStatus.refetch,
+          },
+          {
+            data: data2,
+            loading: false,
+            networkStatus: NetworkStatus.ready,
+          },
+        ],
+      ],
+    ])(
+      "networkStatus changes (notifyOnNetworkStatusChange: %s, fetchPolicy %s)",
+      async (
+        notifyOnNetworkStatusChange,
+        fetchPolicy,
+        expectedInitialResults,
+        expectedRefetchedResults
+      ) => {
+        const request: WatchQueryOptions = {
+          query: gql`
+            query fetchLuke($id: String) {
+              people_one(id: $id) {
+                name
+              }
+            }
+          `,
+          variables: {
+            id: "1",
+          },
+          notifyOnNetworkStatusChange,
+          fetchPolicy,
+        };
 
-    const client = new ApolloClient({
-      cache: new InMemoryCache({ addTypename: false }),
-      link: new MockLink([
-        { request, result: { data: data1 } },
-        { request, result: { data: data2 } },
-      ]),
-    });
-
-    const observable = client.watchQuery(request);
-    const stream = new ObservableStream(observable);
-
-    await expect(stream).toEmitApolloQueryResult({
-      data: data1,
-      loading: false,
-      networkStatus: NetworkStatus.ready,
-    });
-
-    void observable.refetch();
+        const client = new ApolloClient({
+          cache: new InMemoryCache({ addTypename: false }),
+          link: new MockLink([
+            { request, result: { data: data1 } },
+            { request, result: { data: data2 } },
+          ]),
+        });
 
-    await expect(stream).toEmitApolloQueryResult({
-      data: data1,
-      loading: true,
-      networkStatus: NetworkStatus.refetch,
-    });
-    await expect(stream).toEmitApolloQueryResult({
-      data: data2,
-      loading: false,
-      networkStatus: NetworkStatus.ready,
-    });
-  });
+        const observable = client.watchQuery(request);
+        const stream = new ObservableStream(observable);
+        for (const expected of expectedInitialResults) {
+          await expect(stream).toEmitApolloQueryResult(expected);
+        }
+        void observable.refetch();
+        for (const expected of expectedRefetchedResults) {
+          await expect(stream).toEmitApolloQueryResult(expected);
+        }
+        expect(stream).not.toEmitAnything();
+      }
+    );
+  }
 
   it("allows you to refetch queries with promises", async () => {
     const request = {

diff --git a/src/core/__tests__/ObservableQuery.ts b/src/core/__tests__/ObservableQuery.ts
@@ -1684,6 +1684,7 @@ describe("ObservableQuery", () => {
         query,
         fetchPolicy: "cache-and-network",
         returnPartialData: true,
+        notifyOnNetworkStatusChange: true,
       });
 
       const stream = new ObservableStream(observable);
@@ -1724,7 +1725,7 @@ describe("ObservableQuery", () => {
 
       expect(result).toEqualApolloQueryResult({
         data: {
-          counter: 5,
+          counter: 4,
           name: "Ben",
         },
         loading: false,