Merge branch 'main' into renovate/cimg-node-20.x

.changeset/khaki-months-rhyme.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+ObservableQuery.getCurrentResult: skip the cache if the running query should not access the cache

.git-blame-ignore-revs

@@ -1,5 +1,6 @@
+# format "ObservableQuery" test
+0a67647b73abd94b706242f32b88d21a1400ad50
 # format "ObservableQuery" test (in #10597)
 104bf11765b1db50292f9656aa8fe48e2d749a83
-
 # Format "DisplayClientError.js" (#10909)
 0cb68364f2c3828badde8c74de44e9c1864fb6d4

.vscode/settings.json

@@ -7,5 +7,6 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "cSpell.enableFiletypes": [
     "mdx"
-  ]
+  ],
+  "jest.jestCommandLine": "node_modules/.bin/jest --config ./config/jest.config.js --ignoreProjects 'ReactDOM 17' --runInBand",
 }

config/bundlesize.ts

@@ -3,7 +3,7 @@ import { join } from "path";
 import { gzipSync } from "zlib";
 import bytes from "bytes";
 
-const gzipBundleByteLengthLimit = bytes("33.02KB");
+const gzipBundleByteLengthLimit = bytes("33.07KB");
 const minFile = join("dist", "apollo-client.min.cjs");
 const minPath = join(__dirname, "..", minFile);
 const gzipByteLen = gzipSync(readFileSync(minPath)).byteLength;

docs/source/data/queries.mdx

@@ -22,7 +22,7 @@ The `useQuery` [React hook](https://reactjs.org/docs/hooks-intro.html) is the pr
 
 Let's look at an example. First, we'll create a GraphQL query named `GET_DOGS`. Remember to wrap query strings in the `gql` function to parse them into query documents:
 
-```tsx title="index.js"
+```jsx title="index.js"
 import { gql, useQuery } from '@apollo/client';
 
 const GET_DOGS = gql`
@@ -37,7 +37,7 @@ const GET_DOGS = gql`
 
 Next, we'll create a component named `Dogs`. Inside it, we'll pass our `GET_DOGS` query to the `useQuery` hook:
 
-```tsx title="index.js"
+```jsx title="index.js"
 function Dogs({ onDogSelected }) {
   const { loading, error, data } = useQuery(GET_DOGS);
 

src/core/ObservableQuery.ts

@@ -28,6 +28,7 @@ import {
   FetchMoreQueryOptions,
   SubscribeToMoreOptions,
   NextFetchPolicyContext,
+  WatchQueryFetchPolicy,
 } from './watchQueryOptions';
 import { QueryInfo } from './QueryInfo';
 import { MissingFieldError } from '../cache';
@@ -86,6 +87,7 @@ export class ObservableQuery<
   private observers = new Set<Observer<ApolloQueryResult<TData>>>();
   private subscriptions = new Set<ObservableSubscription>();
 
+  private waitForOwnResult: boolean;
   private last?: Last<TData, TVariables>;
 
   private queryInfo: QueryInfo;
@@ -152,6 +154,7 @@ export class ObservableQuery<
     this.queryManager = queryManager;
 
     // active state
+    this.waitForOwnResult = skipCacheDataFor(options.fetchPolicy);
     this.isTornDown = false;
 
     const {
@@ -240,16 +243,19 @@ export class ObservableQuery<
     if (
       // These fetch policies should never deliver data from the cache, unless
       // redelivering a previously delivered result.
-      fetchPolicy === 'network-only' ||
-      fetchPolicy === 'no-cache' ||
-      fetchPolicy === 'standby' ||
+      skipCacheDataFor(fetchPolicy) ||
       // If this.options.query has @client(always: true) fields, we cannot
       // trust diff.result, since it was read from the cache without running
       // local resolvers (and it's too late to run resolvers now, since we must
       // return a result synchronously).
       this.queryManager.transform(this.options.query).hasForcedResolvers
     ) {
-      // Fall through.
+      // Fall through. 
+    } else if (this.waitForOwnResult) {
+      // This would usually be a part of `QueryInfo.getDiff()`. 
+      // which we skip in the waitForOwnResult case since we are not
+      // interested in the diff.
+      this.queryInfo['updateWatch']();
     } else {
       const diff = this.queryInfo.getDiff();
 
@@ -833,13 +839,22 @@ Did you mean to call refetch(variables) instead of refetch({ variables })?`);
       }
     }
 
+    this.waitForOwnResult &&= skipCacheDataFor(options.fetchPolicy);
+    const finishWaitingForOwnResult = () => {
+      if (this.concast === concast) {
+        this.waitForOwnResult = false;
+      }
+    };
+
     const variables = options.variables && { ...options.variables };
     const { concast, fromLink } = this.fetch(options, newNetworkStatus);
     const observer: Observer<ApolloQueryResult<TData>> = {
       next: result => {
+        finishWaitingForOwnResult();
         this.reportResult(result, variables);
       },
       error: error => {
+        finishWaitingForOwnResult();
         this.reportError(error, variables);
       },
     };
@@ -990,3 +1005,7 @@ export function logMissingFieldErrors(
     }`, missing);
   }
 }
+
+function skipCacheDataFor(fetchPolicy?: WatchQueryFetchPolicy /* `undefined` would mean `"cache-first"` */) {
+  return fetchPolicy === "network-only" || fetchPolicy === "no-cache" || fetchPolicy === "standby";
+}