Handle changed suspense query options

.changeset/ten-cherries-clap.md

@@ -0,0 +1,5 @@
+---
+'@apollo/client': patch
+---
+
+`useSuspenseQuery` and `useBackgroundQuery` will now properly apply changes to its options between renders.

.size-limit.cjs

@@ -1,7 +1,7 @@
 const checks = [
   {
     path: "dist/apollo-client.min.cjs",
-    limit: "37750"
+    limit: "37925"
   },
   {
     path: "dist/main.cjs",

src/core/ObservableQuery.ts

@@ -592,6 +592,13 @@ Did you mean to call refetch(variables) instead of refetch({ variables })?`,
     return this.reobserve(newOptions);
   }
 
+  public silentSetOptions(
+    newOptions: Partial<WatchQueryOptions<TVariables, TData>>,
+  ) {
+    const mergedOptions = compact(this.options, newOptions || {});
+    assign(this.options, mergedOptions);
+  }
+
   /**
    * Update the variables of this observable query, and fetch the new results
    * if they've changed. Most users should prefer `refetch` instead of

src/react/cache/QueryReference.ts

@@ -1,3 +1,4 @@
+import { equal } from '@wry/equality';
 import type {
   ApolloError,
   ApolloQueryResult,
@@ -33,6 +34,15 @@ interface InternalQueryReferenceOptions {
   autoDisposeTimeoutMs?: number;
 }
 
+const OBSERVED_CHANGED_OPTIONS: Array<keyof WatchQueryOptions> = [
+  'canonizeResults',
+  'context',
+  'errorPolicy',
+  'fetchPolicy',
+  'refetchWritePolicy',
+  'returnPartialData',
+];
+
 export class InternalQueryReference<TData = unknown> {
   public result: ApolloQueryResult<TData>;
   public readonly key: CacheKey;
@@ -102,6 +112,35 @@ export class InternalQueryReference<TData = unknown> {
     return this.observable.options;
   }
 
+  didChangeOptions(watchQueryOptions: WatchQueryOptions) {
+    return OBSERVED_CHANGED_OPTIONS.some(
+      (option) =>
+        !equal(this.watchQueryOptions[option], watchQueryOptions[option])
+    );
+  }
+
+  applyOptions(watchQueryOptions: WatchQueryOptions) {
+    const { fetchPolicy: currentFetchPolicy } = this.watchQueryOptions;
+
+    // "standby" is used when `skip` is set to `true`. Detect when we've
+    // enabled the query (i.e. `skip` is `false`) to execute a network request.
+    if (
+      currentFetchPolicy === 'standby' &&
+      currentFetchPolicy !== watchQueryOptions.fetchPolicy
+    ) {
+      this.promise = this.observable.reobserve(watchQueryOptions);
+    } else {
+      this.observable.silentSetOptions(watchQueryOptions);
+
+      // Maintain the previous result in case the current result does not return
+      // a `data` property.
+      this.result = { ...this.result, ...this.observable.getCurrentResult() };
+      this.promise = createFulfilledPromise(this.result);
+    }
+
+    return this.promise;
+  }
+
   listen(listener: Listener<TData>) {
     // As soon as the component listens for updates, we know it has finished
     // suspending and is ready to receive updates, so we can remove the auto