Merge pull request #185 from apollographql/main

Create a new pull request by comparing changes across two branches

.changeset/soft-roses-sit.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Fix `networkStatus` with `useSuspenseQuery` not properly updating to ready state when using a `cache-and-network` fetch policy that returns data equal to what is already in the cache.

.changeset/spotty-bats-march.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Fix cache override warning output

.circleci/config.yml

@@ -1,7 +1,7 @@
 version: 2.1
 
 orbs:
-  secops: apollo/circleci-secops-orb@2.0.6
+  secops: apollo/circleci-secops-orb@2.0.7
 
 jobs:
   # Filesize:

.size-limits.json

@@ -1,4 +1,4 @@
 {
-  "dist/apollo-client.min.cjs": 37922,
-  "import { ApolloClient, InMemoryCache, HttpLink } from \"dist/index.js\" (production)": 31974
+  "dist/apollo-client.min.cjs": 37930,
+  "import { ApolloClient, InMemoryCache, HttpLink } from \"dist/index.js\" (production)": 31972
 }

package.json

@@ -112,8 +112,8 @@
     "@graphql-tools/schema": "10.0.2",
     "@microsoft/api-extractor": "7.39.1",
     "@rollup/plugin-node-resolve": "11.2.1",
-    "@size-limit/esbuild-why": "11.0.1",
-    "@size-limit/preset-small-lib": "11.0.1",
+    "@size-limit/esbuild-why": "11.0.2",
+    "@size-limit/preset-small-lib": "11.0.2",
     "@testing-library/jest-dom": "6.2.0",
     "@testing-library/react": "14.1.2",
     "@testing-library/react-12": "npm:@testing-library/react@^12",
@@ -126,8 +126,8 @@
     "@types/jest": "29.5.11",
     "@types/lodash": "4.14.202",
     "@types/node": "20.10.7",
-    "@types/node-fetch": "2.6.10",
-    "@types/react": "18.2.47",
+    "@types/node-fetch": "2.6.11",
+    "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
     "@types/use-sync-external-store": "0.0.6",
     "@typescript-eslint/eslint-plugin": "6.18.0",
@@ -167,7 +167,7 @@
     "rollup-plugin-cleanup": "3.2.1",
     "rollup-plugin-terser": "7.0.2",
     "rxjs": "7.8.1",
-    "size-limit": "11.0.1",
+    "size-limit": "11.0.2",
     "subscriptions-transport-ws": "0.11.0",
     "terser": "5.26.0",
     "ts-api-utils": "1.0.3",

src/cache/inmemory/__tests__/__snapshots__/writeToStore.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`writing to the store "Cache data maybe lost..." warnings should not warn when scalar fields are updated 1`] = `
+exports[`writing to the store "Cache data may be lost..." warnings should not warn when scalar fields are updated 1`] = `
 Object {
   "ROOT_QUERY": Object {
     "__typename": "Query",
@@ -18,7 +18,7 @@ Object {
 }
 `;
 
-exports[`writing to the store "Cache data maybe lost..." warnings should not warn when scalar fields are updated 2`] = `
+exports[`writing to the store "Cache data may be lost..." warnings should not warn when scalar fields are updated 2`] = `
 Object {
   "ROOT_QUERY": Object {
     "__typename": "Query",
@@ -34,7 +34,68 @@ Object {
 }
 `;
 
-exports[`writing to the store "Cache data maybe lost..." warnings should not warn when scalar fields are updated 3`] = `[MockFunction]`;
+exports[`writing to the store "Cache data may be lost..." warnings should not warn when scalar fields are updated 3`] = `[MockFunction]`;
+
+exports[`writing to the store "Cache data may be lost..." warnings should warn "Cache data may be lost..." message 1`] = `
+Object {
+  "ROOT_QUERY": Object {
+    "__typename": "Query",
+    "someJSON": Object {
+      "name": "Tom",
+    },
+  },
+}
+`;
+
+exports[`writing to the store "Cache data may be lost..." warnings should warn "Cache data may be lost..." message 2`] = `
+Object {
+  "ROOT_QUERY": Object {
+    "__typename": "Query",
+    "someJSON": Object {
+      "age": 20,
+    },
+  },
+}
+`;
+
+exports[`writing to the store "Cache data may be lost..." warnings should warn "Cache data may be lost..." message 3`] = `
+[MockFunction] {
+  "calls": Array [
+    Array [
+      "Cache data may be lost when replacing the %s field of a %s object.
+
+This could cause additional (usually avoidable) network requests to fetch data that were otherwise cached.
+
+To address this problem (which is not a bug in Apollo Client), %sdefine a custom merge function for the %s field, so InMemoryCache can safely merge these objects:
+
+  existing: %o
+  incoming: %o
+
+For more information about these options, please refer to the documentation:
+
+  * Ensuring entity objects have IDs: https://go.apollo.dev/c/generating-unique-identifiers
+  * Defining custom merge functions: https://go.apollo.dev/c/merging-non-normalized-objects
+",
+      "someJSON",
+      "Query",
+      "",
+      "Query.someJSON",
+      Object {
+        "name": "Tom",
+      },
+      Object {
+        "age": 20,
+      },
+    ],
+  ],
+  "results": Array [
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+  ],
+}
+`;
 
 exports[`writing to the store correctly merges fragment fields along multiple paths 1`] = `
 Object {

src/cache/inmemory/__tests__/writeToStore.ts

@@ -2047,7 +2047,43 @@ describe("writing to the store", () => {
     });
   });
 
-  describe('"Cache data maybe lost..." warnings', () => {
+  describe('"Cache data may be lost..." warnings', () => {
+    it('should warn "Cache data may be lost..." message', () => {
+      using _consoleSpy = spyOnConsole.takeSnapshots("warn");
+      const cache = new InMemoryCache();
+
+      const query = gql`
+        query {
+          someJSON {
+            name
+            age
+          }
+        }
+      `;
+
+      cache.writeQuery({
+        query,
+        data: {
+          someJSON: {
+            name: "Tom",
+          },
+        },
+      });
+
+      expect(cache.extract()).toMatchSnapshot();
+
+      cache.writeQuery({
+        query,
+        data: {
+          someJSON: {
+            age: 20,
+          },
+        },
+      });
+
+      expect(cache.extract()).toMatchSnapshot();
+    });
+
     it("should not warn when scalar fields are updated", () => {
       using _consoleSpy = spyOnConsole.takeSnapshots("warn");
       const cache = new InMemoryCache();

src/cache/inmemory/writeToStore.ts

@@ -857,8 +857,8 @@ This could cause additional (usually avoidable) network requests to fetch data t
 
 To address this problem (which is not a bug in Apollo Client), %sdefine a custom merge function for the %s field, so InMemoryCache can safely merge these objects:
 
-  existing: %s
-  incoming: %s
+  existing: %o
+  incoming: %o
 
 For more information about these options, please refer to the documentation:
 

src/react/cache/QueryReference.ts

@@ -238,7 +238,10 @@ export class InternalQueryReference<TData = unknown> {
         // This occurs when switching to a result that is fully cached when this
         // class is instantiated. ObservableQuery will run reobserve when
         // subscribing, which delivers a result from the cache.
-        if (result.data === this.result.data) {
+        if (
+          result.data === this.result.data &&
+          result.networkStatus === this.result.networkStatus
+        ) {
           return;
         }
 

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

@@ -9932,6 +9932,53 @@ describe("useSuspenseQuery", () => {
     });
   });
 
+  it("updates networkStatus when a network request returns the same cached data with 'cache-and-network' fetchPolicy", async () => {
+    const { query } = useSimpleQueryCase();
+
+    const link = new ApolloLink(() => {
+      return new Observable((observer) => {
+        setTimeout(() => {
+          observer.next({ data: { greeting: "Hello" } });
+          observer.complete();
+        }, 10);
+      });
+    });
+
+    const client = new ApolloClient({
+      link,
+      cache: new InMemoryCache(),
+    });
+
+    // preloaded cache
+    await client.writeQuery({ query, data: { greeting: "Hello" } });
+
+    const { result } = renderSuspenseHook(
+      () =>
+        useSuspenseQuery(query, {
+          fetchPolicy: "cache-and-network",
+        }),
+      { client }
+    );
+
+    await waitFor(() => {
+      // We should see the cached greeting while the network request is in flight
+      // and the network status should be set to `loading`.
+      expect(result.current).toMatchObject({
+        data: { greeting: "Hello" },
+        networkStatus: NetworkStatus.loading,
+      });
+    });
+
+    await waitFor(() => {
+      // We should see the updated greeting once the network request finishes
+      // and the network status should be set to `ready`.
+      expect(result.current).toMatchObject({
+        data: { greeting: "Hello" },
+        networkStatus: NetworkStatus.ready,
+      });
+    });
+  });
+
   describe.skip("type tests", () => {
     it("returns unknown when TData cannot be inferred", () => {
       const query = gql`