Merge remote-tracking branch 'origin/main' into release-4.0

Author: jerelmiller

.circleci/config.yml

@@ -31,7 +31,7 @@ jobs:
 
   Lint:
     docker:
-      - image: cimg/node:23.7.0
+      - image: cimg/node:23.9.0
     steps:
       - checkout
       - run: npm version
@@ -40,15 +40,15 @@ jobs:
 
   Formatting:
     docker:
-      - image: cimg/node:23.7.0
+      - image: cimg/node:23.9.0
     steps:
       - checkout
       - run: npm ci
       - run: npm run check:format
 
   Tests:
     docker:
-      - image: cimg/node:23.7.0
+      - image: cimg/node:23.9.0
     parameters:
       project:
         type: string
@@ -70,15 +70,15 @@ jobs:
           path: reports/junit
   Attest:
     docker:
-      - image: cimg/node:23.7.0
+      - image: cimg/node:23.9.0
     steps:
       - checkout
       - run: npm ci
       - run: npm run test:type-benches
 
   BuildTarball:
     docker:
-      - image: cimg/node:23.7.0
+      - image: cimg/node:23.9.0
     steps:
       - checkout
       - run: npm run ci:precheck
@@ -97,7 +97,7 @@ jobs:
       react:
         type: string
     docker:
-      - image: cimg/node:23.7.0-browsers
+      - image: cimg/node:23.9.0-browsers
     steps:
       - checkout
       - attach_workspace:
@@ -138,7 +138,7 @@ jobs:
       externalPackage:
         type: string
     docker:
-      - image: cimg/node:23.7.0
+      - image: cimg/node:23.9.0
     steps:
       - checkout
       - attach_workspace:

CHANGELOG.md

@@ -471,6 +471,12 @@
 
 - [#12384](https://github.com/apollographql/apollo-client/pull/12384) [`6aa6fd3`](https://github.com/apollographql/apollo-client/commit/6aa6fd316cfdb31ebbe3e3133cca2965604e7ca1) Thanks [@jerelmiller](https://github.com/jerelmiller)! - Don't emit a partial cache result from `cache-only` queries when `returnPartialData` is `false`.
 
+## 3.13.5
+
+### Patch Changes
+
+- [#12461](https://github.com/apollographql/apollo-client/pull/12461) [`12c8d06`](https://github.com/apollographql/apollo-client/commit/12c8d06f1ef7cfbece8e3a63b7ad09d91334f663) Thanks [@jerelmiller](https://github.com/jerelmiller)! - Fix an issue where a `cache-first` query would return the result for previous variables when a cache update is issued after simultaneously changing variables and skipping the query.
+
 ## 3.13.4
 
 ### Patch Changes

docs/source/_sidebar.yaml

@@ -35,6 +35,8 @@ items:
         href: ./data/error-handling
       - label: Document transforms
         href: ./data/document-transforms
+      - label: Deferring response data
+        href: ./data/defer
       - label: Best practices
         href: ./data/operation-best-practices
   - label: Caching

docs/source/data/defer.mdx

@@ -1,6 +1,7 @@
 ---
 title: "Using the @defer directive in Apollo Client"
 description: Receive query response data incrementally
+minVersion: 3.7.0
 ---
 
 > **The `@defer` directive is currently at the [General Availability stage](/resources/product-launch-stages/#general-availability) in Apollo Client, and is available by installing `@apollo/client@latest`.** If you have feedback on it, please let us know via [GitHub issues](https://github.com/apollographql/apollo-client/issues/new?assignees=&labels=&template=bug.md).

src/core/QueryInfo.ts

@@ -74,6 +74,7 @@ export class QueryInfo {
   variables?: Record<string, any>;
   stopped = false;
 
+  private cancelWatch?: () => void;
   private cache: ApolloCache;
 
   constructor(
@@ -103,6 +104,8 @@ export class QueryInfo {
   }): this {
     if (!equal(query.variables, this.variables)) {
       this.lastDiff = void 0;
+      // Ensure we don't continue to receive cache updates for old variables
+      this.cancel();
     }
 
     Object.assign(this, {
@@ -283,20 +286,17 @@ export class QueryInfo {
 
       // Cancel the pending notify timeout
       this.reset();
-
       this.cancel();
-      // Revert back to the no-op version of cancel inherited from
-      // QueryInfo.prototype.
-      this.cancel = QueryInfo.prototype.cancel;
 
       const oq = this.observableQuery;
       if (oq) oq.stopPolling();
     }
   }
 
-  // This method is a no-op by default, until/unless overridden by the
-  // updateWatch method.
-  private cancel() {}
+  private cancel() {
+    this.cancelWatch?.();
+    this.cancelWatch = void 0;
+  }
 
   private lastWatch?: Cache.WatchOptions;
 
@@ -317,7 +317,7 @@ export class QueryInfo {
 
     if (!this.lastWatch || !equal(watchOptions, this.lastWatch)) {
       this.cancel();
-      this.cancel = this.cache.watch((this.lastWatch = watchOptions));
+      this.cancelWatch = this.cache.watch((this.lastWatch = watchOptions));
     }
   }
 

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

@@ -1505,6 +1505,99 @@ describe("useQuery Hook", () => {
 
       await expect(takeSnapshot).not.toRerender();
     });
+
+    // https://github.com/apollographql/apollo-client/issues/12458
+    it("returns correct result when cache updates after changing variables and skipping query", async () => {
+      interface Data {
+        user: {
+          __typename: "User";
+          id: number;
+          name: string;
+        };
+      }
+
+      const query: TypedDocumentNode<Data, { id: number }> = gql`
+        query ($id: ID!) {
+          user(id: $id) {
+            id
+            name
+          }
+        }
+      `;
+
+      const client = new ApolloClient({
+        link: ApolloLink.empty(),
+        cache: new InMemoryCache(),
+      });
+
+      using _disabledAct = disableActEnvironment();
+      const { takeSnapshot, rerender } = await renderHookToSnapshotStream(
+        ({ id, skip }) => useQuery(query, { skip, variables: { id } }),
+        {
+          initialProps: { id: 1, skip: true },
+          wrapper: ({ children }) => (
+            <ApolloProvider client={client}>{children}</ApolloProvider>
+          ),
+        }
+      );
+
+      await expect(takeSnapshot()).resolves.toEqualQueryResult({
+        data: undefined,
+        error: undefined,
+        called: false,
+        loading: false,
+        networkStatus: NetworkStatus.ready,
+        previousData: undefined,
+        variables: { id: 1 },
+      });
+
+      client.writeQuery({
+        query,
+        variables: { id: 1 },
+        data: { user: { __typename: "User", id: 1, name: "User 1" } },
+      });
+      await rerender({ id: 1, skip: false });
+
+      await expect(takeSnapshot()).resolves.toEqualQueryResult({
+        data: { user: { __typename: "User", id: 1, name: "User 1" } },
+        called: true,
+        loading: false,
+        networkStatus: NetworkStatus.ready,
+        previousData: undefined,
+        variables: { id: 1 },
+      });
+
+      await rerender({ id: 2, skip: true });
+
+      await expect(takeSnapshot()).resolves.toEqualQueryResult({
+        data: undefined,
+        error: undefined,
+        called: false,
+        loading: false,
+        networkStatus: NetworkStatus.ready,
+        previousData: { user: { __typename: "User", id: 1, name: "User 1" } },
+        variables: { id: 2 },
+      });
+
+      client.writeQuery({
+        query,
+        variables: { id: 2 },
+        data: { user: { __typename: "User", id: 2, name: "User 2" } },
+      });
+
+      await rerender({ id: 2, skip: false });
+
+      await expect(takeSnapshot()).resolves.toEqualQueryResult({
+        data: { user: { __typename: "User", id: 2, name: "User 2" } },
+        called: true,
+        loading: false,
+        networkStatus: NetworkStatus.ready,
+        previousData: { user: { __typename: "User", id: 1, name: "User 1" } },
+        variables: { id: 2 },
+      });
+
+      await expect(takeSnapshot).not.toRerender();
+    });
   });
 
   it("can provide options.client without ApolloProvider", async () => {