Add a queryKey option for useSuspenseQuery (#10700)

Co-authored-by: Ben Newman <ben@apollographql.com>

.changeset/curvy-monkeys-kneel.md

@@ -0,0 +1,5 @@
+---
+'@apollo/client': patch
+---
+
+Add a `queryKey` option to `useSuspenseQuery` that allows the hook to create a unique subscription instance.

config/bundlesize.ts

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

docs/shared/useSuspenseQuery-options.mdx

@@ -109,6 +109,23 @@ By default, the instance that's passed down via context is used, but you can pro
 </td>
 </tr>
 
+<tr>
+<td>
+
+###### `queryKey`
+
+`string | number | any[]`
+</td>
+
+<td>
+
+A unique identifier for the query. Each item in the array must be a stable identifier to prevent infinite fetches.
+
+This is useful when using the same query and variables combination in more than one component, otherwise the components may clobber each other. This can also be used to force the query to re-evaluate fresh.
+
+</td>
+</tr>
+
 <tr>
 <td colspan="2">
 
@@ -142,23 +159,6 @@ The default value is `cache-first`.
 <tr>
 <td>
 
-###### `nextFetchPolicy`
-
-`SuspenseQueryHookFetchPolicy`
-</td>
-
-<td>
-
-Specifies the [`fetchPolicy`](#fetchpolicy) to use for all executions of this query _after_ this execution.
-
-For example, you can use this to switch back to a `cache-first` fetch policy after using `cache-and-network` or `network-only` for a single execution.
-
-</td>
-</tr>
-
-<tr>
-<td>
-
 ###### `returnPartialData`
 
 `boolean`

src/react/cache/SuspenseCache.ts

@@ -1,16 +1,9 @@
 import { Trie } from '@wry/trie';
-import {
-  ApolloClient,
-  DocumentNode,
-  ObservableQuery,
-  OperationVariables,
-  TypedDocumentNode,
-} from '../../core';
-import { canonicalStringify } from '../../cache';
+import { ObservableQuery } from '../../core';
 import { canUseWeakMap } from '../../utilities';
 import { QuerySubscription } from './QuerySubscription';
 
-type CacheKey = [ApolloClient<unknown>, DocumentNode, string];
+type CacheKey = any[];
 
 interface SuspenseCacheOptions {
   /**
@@ -40,27 +33,21 @@ export class SuspenseCache {
   }
 
   getSubscription<TData = any>(
-    client: ApolloClient<unknown>,
-    query: DocumentNode | TypedDocumentNode<TData>,
-    variables: OperationVariables | undefined,
+    cacheKey: CacheKey,
     createObservable: () => ObservableQuery<TData>
   ) {
-    const cacheKey = this.cacheKeys.lookup(
-      client,
-      query,
-      canonicalStringify(variables)
-    );
+    const stableCacheKey = this.cacheKeys.lookupArray(cacheKey);
 
-    if (!this.subscriptions.has(cacheKey)) {
+    if (!this.subscriptions.has(stableCacheKey)) {
       this.subscriptions.set(
-        cacheKey,
+        stableCacheKey,
         new QuerySubscription(createObservable(), {
           autoDisposeTimeoutMs: this.options.autoDisposeTimeoutMs,
-          onDispose: () => this.subscriptions.delete(cacheKey),
+          onDispose: () => this.subscriptions.delete(stableCacheKey),
         })
       );
     }
 
-    return this.subscriptions.get(cacheKey)! as QuerySubscription<TData>;
+    return this.subscriptions.get(stableCacheKey)! as QuerySubscription<TData>;
   }
 }