Add suspenseCache as a lazy hidden property on ApolloClient (#11053)

This removes `SuspenseCache` from the `Provider` options, and instead creates a `SuspenseCache` the first time it is requested by `getSuspenseCache`. It will be saved as a property on the `ApolloClient` instance, so those two instances will always be tied together.

Configuration options can now be passed in as part of the `ApolloClient` configuration:

```js
new ApolloClient({
  react: {
    suspense: {
      autoDisposeTimeoutMs: 60_000
    }
  }
})
```

Author: phryneas

src/testing/matchers/index.d.ts

@@ -4,7 +4,7 @@ import type {
   OperationVariables,
 } from '../../core/index.js';
 
-interface ApolloCustomMatchers<R = void> {
+interface ApolloCustomMatchers<R = void, T = {}> {
   /**
    * Used to determine if two GraphQL query documents are equal to each other by
    * comparing their printed values. The document must be parsed by `gql`.
@@ -14,18 +14,17 @@ interface ApolloCustomMatchers<R = void> {
   /**
    * Used to determine if the Suspense cache has a cache entry.
    */
-  toHaveSuspenseCacheEntryUsing(
-    client: ApolloClient<unknown>,
+  toHaveSuspenseCacheEntryUsing: T extends ApolloClient<any> ? ((
     query: DocumentNode,
     options?: {
       variables?: OperationVariables;
       queryKey?: string | number | any[];
     }
-  ): R;
+  ) => R) : { error: "matcher needs to be called on an ApolloClient instance" };
 }
 
 declare global {
   namespace jest {
-    interface Matchers<R = void> extends ApolloCustomMatchers<R> {}
+    interface Matchers<R = void, T = {}> extends ApolloCustomMatchers<R, T> {}
   }
 }

src/testing/matchers/toHaveSuspenseCacheEntryUsing.ts

@@ -1,31 +1,35 @@
 import type { MatcherFunction } from 'expect';
 import type { DocumentNode } from 'graphql';
-import type { ApolloClient, OperationVariables } from '../../core/index.js';
-import { SuspenseCache } from '../../react/index.js';
+import type { OperationVariables } from '../../core/index.js';
+import { ApolloClient } from '../../core/index.js';
 import { canonicalStringify } from '../../cache/index.js';
+import { getSuspenseCache } from '../../react/cache/index.js';
+import type { CacheKey } from '../../react/cache/types.js';
 
 export const toHaveSuspenseCacheEntryUsing: MatcherFunction<
   [
-    client: ApolloClient<unknown>,
     query: DocumentNode,
     options: {
       variables?: OperationVariables;
       queryKey?: string | number | any[];
     }
   ]
 > = function (
-  suspenseCache,
   client,
   query,
   { variables, queryKey = [] } = Object.create(null)
 ) {
-  if (!(suspenseCache instanceof SuspenseCache)) {
-    throw new Error('Actual must be an instance of `SuspenseCache`');
+  if (!(client instanceof ApolloClient)) {
+    throw new Error('Actual must be an instance of `ApolloClient`');
   }
 
-  const cacheKey = (
-    [client, query, canonicalStringify(variables)] as any[]
-  ).concat(queryKey);
+  const suspenseCache = getSuspenseCache(client);
+
+  const cacheKey: CacheKey = [
+    query,
+    canonicalStringify(variables),
+    ...([] as any[]).concat(queryKey),
+  ];
   const queryRef = suspenseCache['queryRefs'].lookupArray(cacheKey)?.current;
 
   return {