From 814e92dc07ada0e3c9fc4e67e1847f9b339c70bf Mon Sep 17 00:00:00 2001
From: alessia <alessia@apollographql.com>
Date: Fri, 26 May 2023 15:54:36 -0400
Subject: [PATCH 01/21] wip

---
 examples/app-dir-experiments/package.json     |   2 +-
 examples/hack-the-supergraph-ssr/package.json |   2 +-
 examples/polls-demo/app/cc/apollo-wrapper.tsx |   5 +-
 examples/polls-demo/app/cc/loading.tsx        |   5 -
 examples/polls-demo/app/cc/poll-cc.tsx        |  36 +++++-
 examples/polls-demo/package.json              |   2 +-
 package/package.json                          |   5 +-
 package/src/ssr/ApolloRehydrateSymbols.tsx    |  11 +-
 package/src/ssr/NextSSRApolloClient.tsx       | 110 ++++++++++++++++++
 package/src/ssr/NextSSRInMemoryCache.tsx      |  34 +++---
 package/src/ssr/RehydrationContext.tsx        |  19 +--
 package/src/ssr/dataTransport.ts              |   7 +-
 package/src/ssr/hooks.ts                      |   5 +
 package/src/ssr/index.ts                      |   3 +-
 package/src/ssr/types.tsx                     |   8 +-
 yarn.lock                                     |  58 +++++----
 16 files changed, 245 insertions(+), 67 deletions(-)
 delete mode 100644 examples/polls-demo/app/cc/loading.tsx
 create mode 100644 package/src/ssr/NextSSRApolloClient.tsx

diff --git a/examples/app-dir-experiments/package.json b/examples/app-dir-experiments/package.json
index 971ac0f0..0910bb58 100644
--- a/examples/app-dir-experiments/package.json
+++ b/examples/app-dir-experiments/package.json
@@ -10,7 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@apollo/client": "3.8.0-alpha.13",
+    "@apollo/client": "3.8.0-alpha.15",
     "@apollo/experimental-nextjs-app-support": "workspace:^",
     "@apollo/server": "^4.6.0",
     "@as-integrations/next": "^1.3.0",
diff --git a/examples/hack-the-supergraph-ssr/package.json b/examples/hack-the-supergraph-ssr/package.json
index adbd8e87..ec3c8b8f 100644
--- a/examples/hack-the-supergraph-ssr/package.json
+++ b/examples/hack-the-supergraph-ssr/package.json
@@ -10,7 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@apollo/client": "3.8.0-alpha.13",
+    "@apollo/client": "3.8.0-alpha.15",
     "@apollo/experimental-nextjs-app-support": "workspace:^",
     "@apollo/space-kit": "^9.11.0",
     "@chakra-ui/next-js": "^2.1.2",
diff --git a/examples/polls-demo/app/cc/apollo-wrapper.tsx b/examples/polls-demo/app/cc/apollo-wrapper.tsx
index e59dfcac..58175285 100644
--- a/examples/polls-demo/app/cc/apollo-wrapper.tsx
+++ b/examples/polls-demo/app/cc/apollo-wrapper.tsx
@@ -1,12 +1,13 @@
 "use client";
 
 import {
-  ApolloClient,
   ApolloLink,
   HttpLink,
   SuspenseCache,
+  InMemoryCache,
 } from "@apollo/client";
 import {
+  NextSSRApolloClient,
   ApolloNextAppProvider,
   NextSSRInMemoryCache,
   SSRMultipartLink,
@@ -17,7 +18,7 @@ function makeClient() {
     uri: "https://fragrant-shadow-9470.fly.dev/",
   });
 
-  return new ApolloClient({
+  return new NextSSRApolloClient({
     cache: new NextSSRInMemoryCache(),
     link:
       typeof window === "undefined"
diff --git a/examples/polls-demo/app/cc/loading.tsx b/examples/polls-demo/app/cc/loading.tsx
deleted file mode 100644
index 999450c4..00000000
--- a/examples/polls-demo/app/cc/loading.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { PollSkeleton } from "@/components/poll";
-
-export default function Loading() {
-  return <PollSkeleton />;
-}
diff --git a/examples/polls-demo/app/cc/poll-cc.tsx b/examples/polls-demo/app/cc/poll-cc.tsx
index 7522b0c8..7a673030 100644
--- a/examples/polls-demo/app/cc/poll-cc.tsx
+++ b/examples/polls-demo/app/cc/poll-cc.tsx
@@ -1,7 +1,14 @@
 "use client";
-
-import { useSuspenseQuery } from "@apollo/experimental-nextjs-app-support/ssr";
-import { useMutation } from "@apollo/client";
+import { Suspense } from "react";
+import {
+  useReadQuery,
+  useSuspenseQuery,
+} from "@apollo/experimental-nextjs-app-support/ssr";
+import {
+  useMutation,
+  useBackgroundQuery_experimental as useBackgroundQuery,
+} from "@apollo/client";
+import { QueryReference } from "@apollo/client/react/cache/QueryReference";
 import { Poll as PollInner } from "@/components/poll";
 
 import { useState, useCallback } from "react";
@@ -9,15 +16,32 @@ import { useState, useCallback } from "react";
 import {
   AnswerPollDocument,
   GetPollDocument,
+  GetPollQuery,
 } from "@/components/poll/documents.generated";
 
 export const Poll = () => {
-  const [showResults, setShowResults] = useState(false);
-
-  const { data } = useSuspenseQuery(GetPollDocument, {
+  const [queryRef] = useBackgroundQuery(GetPollDocument, {
     variables: { id: "1", delay: 0 },
   });
 
+  return (
+    <>
+      <h1>Testing 1234...</h1>
+      <Suspense fallback={<>Loading...</>}>
+        <PollWrapper queryRef={queryRef} />
+      </Suspense>
+    </>
+  );
+};
+
+const PollWrapper = ({
+  queryRef,
+}: {
+  queryRef: QueryReference<GetPollQuery>;
+}) => {
+  const { data } = useReadQuery(queryRef);
+  // console.log({ data });
+  const [showResults, setShowResults] = useState(false);
   const [mutate, { loading: mutationLoading }] =
     useMutation(AnswerPollDocument);
 
diff --git a/examples/polls-demo/package.json b/examples/polls-demo/package.json
index 0d601b5c..253b78a3 100644
--- a/examples/polls-demo/package.json
+++ b/examples/polls-demo/package.json
@@ -34,10 +34,10 @@
     "typescript": "5.0.4"
   },
   "devDependencies": {
-    "@graphql-codegen/typed-document-node": "^4.0.1",
     "@graphql-codegen/cli": "3.3.1",
     "@graphql-codegen/client-preset": "3.0.1",
     "@graphql-codegen/near-operation-file-preset": "^2.5.0",
+    "@graphql-codegen/typed-document-node": "^4.0.1",
     "@graphql-codegen/typescript": "3.0.4",
     "@graphql-codegen/typescript-resolvers": "3.2.1"
   }
diff --git a/package/package.json b/package/package.json
index bfda3076..ba3c7a87 100644
--- a/package/package.json
+++ b/package/package.json
@@ -13,7 +13,6 @@
     "rsc",
     "app-router",
     "app"
-
   ],
   "exports": {
     "./ssr": "./dist/ssr/index.js",
@@ -45,7 +44,7 @@
   },
   "packageManager": "yarn@3.5.0",
   "devDependencies": {
-    "@apollo/client": "3.8.0-alpha.13",
+    "@apollo/client": "3.8.0-alpha.15",
     "@total-typescript/shoehorn": "^0.1.0",
     "@tsconfig/recommended": "^1.0.1",
     "@typescript-eslint/eslint-plugin": "latest",
@@ -60,7 +59,7 @@
     "vitest": "^0.30.1"
   },
   "peerDependencies": {
-    "@apollo/client": ">= 3.8.0-alpha.13",
+    "@apollo/client": ">= 3.8.0-alpha.15",
     "next": "^13.4.1",
     "react": "^18"
   },
diff --git a/package/src/ssr/ApolloRehydrateSymbols.tsx b/package/src/ssr/ApolloRehydrateSymbols.tsx
index 5a83c98e..9414ccde 100644
--- a/package/src/ssr/ApolloRehydrateSymbols.tsx
+++ b/package/src/ssr/ApolloRehydrateSymbols.tsx
@@ -1,5 +1,9 @@
 import { SuperJSONResult } from "superjson/dist/types";
-import { RehydrationCache, ResultsCache } from "./types";
+import {
+  RehydrationCache,
+  ResultsCache,
+  BackgroundQueriesCache,
+} from "./types";
 import type { DataTransport } from "./dataTransport";
 
 declare global {
@@ -7,8 +11,13 @@ declare global {
     [ApolloRehydrationCache]?: RehydrationCache;
     [ApolloResultCache]?: ResultsCache;
     [ApolloSSRDataTransport]?: DataTransport<SuperJSONResult>;
+    // TODO: types
+    [ApolloBackgroundQueryTransport]?: BackgroundQueriesCache;
   }
 }
 export const ApolloRehydrationCache = Symbol.for("ApolloRehydrationCache");
 export const ApolloResultCache = Symbol.for("ApolloResultCache");
 export const ApolloSSRDataTransport = Symbol.for("ApolloSSRDataTransport");
+export const ApolloBackgroundQueryTransport = Symbol.for(
+  "ApolloBackgroundQueryTransport"
+);
diff --git a/package/src/ssr/NextSSRApolloClient.tsx b/package/src/ssr/NextSSRApolloClient.tsx
new file mode 100644
index 00000000..7792d990
--- /dev/null
+++ b/package/src/ssr/NextSSRApolloClient.tsx
@@ -0,0 +1,110 @@
+import { Trie } from "@wry/trie";
+import {
+  ApolloClient,
+  ApolloClientOptions,
+  OperationVariables,
+  WatchQueryOptions,
+} from "@apollo/client";
+import { canUseWeakMap } from "@apollo/client/utilities";
+import { canonicalStringify } from "@apollo/client/cache";
+import { RehydrationContextValue } from "./types";
+import { registerLateInitializingQueue } from "./lateInitializingQueue";
+import {
+  ApolloBackgroundQueryTransport,
+  ApolloResultCache,
+} from "./ApolloRehydrateSymbols";
+
+// uBQ: we want to skip it in the browser until data comes in
+// the first time it renders on the client, if we don't yet have data,
+// we tell it to wait for the existing request
+// watchQuery:
+//    watchQuery on the server doesn't do anything new except transport to the
+//    client which query + variables are in flight
+// on the client - the data comes in, creates the fake in-flight observable to
+// force the cache to wait for the pending request
+
+export class NextSSRApolloClient<
+  TCacheShape
+> extends ApolloClient<TCacheShape> {
+  private rehydrationContext: Pick<
+    RehydrationContextValue,
+    "incomingBackgroundQueries"
+  > & { uninitialized?: boolean } = {
+    incomingBackgroundQueries: [],
+    uninitialized: true,
+  };
+
+  private backgroundQueriesAndResults = new Map<any[], any>();
+
+  constructor(options: ApolloClientOptions<TCacheShape>) {
+    super(options);
+
+    this.registerWindowHook();
+  }
+  private cacheKeys = new Trie<any[]>(
+    canUseWeakMap,
+    (cacheKey: any[]) => cacheKey
+  );
+  private registerWindowHook() {
+    let stableCacheKey: any[] | undefined;
+    if (typeof window !== "undefined") {
+      // shared variables - could be a trie
+
+      if (Array.isArray(window[ApolloBackgroundQueryTransport] || [])) {
+        console.log("background query transport");
+        registerLateInitializingQueue(
+          ApolloBackgroundQueryTransport,
+          (options) => {
+            const cacheKey = [
+              options.query,
+              canonicalStringify(options.variables),
+            ].concat();
+
+            stableCacheKey = this.cacheKeys.lookupArray(cacheKey);
+
+            // instead of null, set an observable in the map...
+            this.backgroundQueriesAndResults.set(stableCacheKey, "testing 123");
+          }
+        );
+      }
+
+      if (Array.isArray(window[ApolloResultCache] || [])) {
+        console.log("result cache");
+        registerLateInitializingQueue(ApolloResultCache, (data) => {
+          console.log("cb 2", data);
+          if (stableCacheKey) {
+            console.log(this.backgroundQueriesAndResults.get(stableCacheKey));
+            // call obserable with result
+          }
+        });
+      }
+    }
+  }
+
+  // cache has the queue of incoming results
+  // instead of calling this.write in the nextssrinmemorycache, we'd resolve the
+  // fake observable with the real result data
+  watchQuery<
+    T = any,
+    TVariables extends OperationVariables = OperationVariables
+  >(options: WatchQueryOptions<TVariables, T>) {
+    if (typeof window == "undefined") {
+      // @ts-ignore
+      this.rehydrationContext.incomingBackgroundQueries.push(options);
+    }
+    if (typeof window !== "undefined") {
+      console.log("inside watchQuery");
+    }
+    return super.watchQuery(options);
+  }
+
+  setRehydrationContext(rehydrationContext: RehydrationContextValue) {
+    if (this.rehydrationContext.uninitialized) {
+      rehydrationContext.incomingBackgroundQueries.push(
+        ...this.rehydrationContext.incomingBackgroundQueries
+      );
+    }
+    this.rehydrationContext = rehydrationContext;
+    this.rehydrationContext.uninitialized = false;
+  }
+}
diff --git a/package/src/ssr/NextSSRInMemoryCache.tsx b/package/src/ssr/NextSSRInMemoryCache.tsx
index ac4e2edd..ac46d89b 100644
--- a/package/src/ssr/NextSSRInMemoryCache.tsx
+++ b/package/src/ssr/NextSSRInMemoryCache.tsx
@@ -4,9 +4,9 @@ import {
   Cache,
   Reference,
 } from "@apollo/client";
-import { ApolloResultCache } from "./ApolloRehydrateSymbols";
 import { RehydrationContextValue } from "./types";
-import { registerLateInitializingQueue } from "./lateInitializingQueue";
+// import { ApolloResultCache } from "./ApolloRehydrateSymbols";
+// import { registerLateInitializingQueue } from "./lateInitializingQueue";
 
 export class NextSSRInMemoryCache extends InMemoryCache {
   private rehydrationContext: Pick<
@@ -19,23 +19,25 @@ export class NextSSRInMemoryCache extends InMemoryCache {
   constructor(config?: InMemoryCacheConfig) {
     super(config);
 
-    this.registerWindowHook();
-  }
-  private registerWindowHook() {
-    if (typeof window !== "undefined") {
-      if (Array.isArray(window[ApolloResultCache] || [])) {
-        registerLateInitializingQueue(ApolloResultCache, (data) =>
-          this.write(data)
-        );
-      } else {
-        throw new Error(
-          "On the client side, only one instance of `NextSSRInMemoryCache` can be created!"
-        );
-      }
-    }
+    // this.registerWindowHook();
   }
+  // this could be removed here and moved over/merged with the other register window hook fn
+  // private registerWindowHook() {
+  //   if (typeof window !== "undefined") {
+  //     if (Array.isArray(window[ApolloResultCache] || [])) {
+  //       registerLateInitializingQueue(ApolloResultCache, (data) =>
+  //         this.write(data)
+  //       );
+  //     } else {
+  //       throw new Error(
+  //         "On the client side, only one instance of `NextSSRInMemoryCache` can be created!"
+  //       );
+  //     }
+  //   }
+  // }
 
   write(options: Cache.WriteOptions<any, any>): Reference | undefined {
+    console.log("write");
     if (typeof window == "undefined") {
       this.rehydrationContext.incomingResults.push(options);
     }
diff --git a/package/src/ssr/RehydrationContext.tsx b/package/src/ssr/RehydrationContext.tsx
index a2f5d26f..22ae7114 100644
--- a/package/src/ssr/RehydrationContext.tsx
+++ b/package/src/ssr/RehydrationContext.tsx
@@ -5,6 +5,7 @@ import { ServerInsertedHTMLContext } from "next/navigation";
 import { RehydrationContextValue } from "./types";
 import { registerDataTransport, transportDataToJS } from "./dataTransport";
 import invariant from "ts-invariant";
+import { NextSSRApolloClient } from "./NextSSRApolloClient";
 
 const ApolloRehydrationContext = React.createContext<
   RehydrationContextValue | undefined
@@ -13,19 +14,18 @@ const ApolloRehydrationContext = React.createContext<
 export const RehydrationContextProvider = ({
   children,
 }: React.PropsWithChildren) => {
-  const { cache } = useApolloClient();
+  const client = useApolloClient();
   const rehydrationContext = React.useRef<RehydrationContextValue>();
   if (typeof window == "undefined") {
     if (!rehydrationContext.current) {
       rehydrationContext.current = buildApolloRehydrationContext();
     }
-
-    if (cache instanceof NextSSRInMemoryCache) {
-      cache.setRehydrationContext(rehydrationContext.current);
-    } else {
-      throw new Error(
-        "When using Next SSR, you must use the `NextSSRInMemoryCache`"
-      );
+    if (client instanceof NextSSRApolloClient) {
+      console.log("SET HYDRATION CONTEXT");
+      client.setRehydrationContext(rehydrationContext.current);
+    }
+    if (client.cache instanceof NextSSRInMemoryCache) {
+      client.cache.setRehydrationContext(rehydrationContext.current);
     }
   } else {
     registerDataTransport();
@@ -61,6 +61,7 @@ function buildApolloRehydrationContext(): RehydrationContextValue {
     transportValueData: {},
     transportedValues: {},
     incomingResults: [],
+    incomingBackgroundQueries: [],
     RehydrateOnClient() {
       rehydrationContext.currentlyInjected = false;
       if (
@@ -85,6 +86,7 @@ function buildApolloRehydrationContext(): RehydrationContextValue {
           )
         ),
         results: rehydrationContext.incomingResults,
+        backgroundQueries: rehydrationContext.incomingBackgroundQueries,
       });
       Object.assign(
         rehydrationContext.transportedValues,
@@ -92,6 +94,7 @@ function buildApolloRehydrationContext(): RehydrationContextValue {
       );
       rehydrationContext.transportValueData = {};
       rehydrationContext.incomingResults = [];
+      rehydrationContext.incomingBackgroundQueries = [];
       return (
         <script
           dangerouslySetInnerHTML={{
diff --git a/package/src/ssr/dataTransport.ts b/package/src/ssr/dataTransport.ts
index 323ec193..69c65e8d 100644
--- a/package/src/ssr/dataTransport.ts
+++ b/package/src/ssr/dataTransport.ts
@@ -3,10 +3,11 @@ import {
   ApolloSSRDataTransport,
   ApolloRehydrationCache,
   ApolloResultCache,
+  ApolloBackgroundQueryTransport,
 } from "./ApolloRehydrateSymbols";
 import { RehydrationCache } from "./types";
 import { registerLateInitializingQueue } from "./lateInitializingQueue";
-import { Cache } from "@apollo/client";
+import { Cache, WatchQueryOptions } from "@apollo/client";
 import invariant from "ts-invariant";
 
 export type DataTransport<T> = Array<T> | { push(...args: T[]): void };
@@ -14,6 +15,7 @@ export type DataTransport<T> = Array<T> | { push(...args: T[]): void };
 type DataToTransport = {
   rehydrate: RehydrationCache;
   results: Cache.WriteOptions[];
+  backgroundQueries: WatchQueryOptions[];
 };
 
 /**
@@ -35,6 +37,9 @@ export function registerDataTransport() {
     const parsed = SuperJSON.deserialize<DataToTransport>(data);
     invariant.debug(`received data from the server:`, parsed);
     Object.assign((window[ApolloRehydrationCache] ??= {}), parsed.rehydrate);
+    (window[ApolloBackgroundQueryTransport] ??= []).push(
+      ...parsed.backgroundQueries
+    );
     (window[ApolloResultCache] ??= []).push(...parsed.results);
   });
 }
diff --git a/package/src/ssr/hooks.ts b/package/src/ssr/hooks.ts
index c4502c88..c11542e4 100644
--- a/package/src/ssr/hooks.ts
+++ b/package/src/ssr/hooks.ts
@@ -2,6 +2,7 @@
 import {
   useFragment_experimental,
   useSuspenseQuery_experimental,
+  useReadQuery_experimental,
   useQuery as orig_useQuery,
 } from "@apollo/client";
 import { useTransportValue } from "./useTransportValue";
@@ -21,6 +22,10 @@ export const useSuspenseQuery = wrap(useSuspenseQuery_experimental, [
   "data",
   "networkStatus",
 ]);
+export const useReadQuery = wrap(useReadQuery_experimental, [
+  "data",
+  "networkStatus",
+]);
 
 function wrap<T extends (...args: any[]) => any>(
   useFn: T,
diff --git a/package/src/ssr/index.ts b/package/src/ssr/index.ts
index d36d0d13..0bb8e822 100644
--- a/package/src/ssr/index.ts
+++ b/package/src/ssr/index.ts
@@ -1,6 +1,7 @@
 export { ApolloNextAppProvider } from "./ApolloNextAppProvider";
 export { NextSSRInMemoryCache } from "./NextSSRInMemoryCache";
-export { useFragment, useQuery, useSuspenseQuery } from "./hooks";
+export { NextSSRApolloClient } from "./NextSSRApolloClient";
+export { useFragment, useQuery, useSuspenseQuery, useReadQuery } from "./hooks";
 export { SSRMultipartLink } from "./SSRMultipartLink";
 export { AccumulateMultipartResponsesLink as DebounceMultipartResponsesLink } from "./AccumulateMultipartResponsesLink";
 export { RemoveMultipartDirectivesLink } from "./RemoveMultipartDirectivesLink";
diff --git a/package/src/ssr/types.tsx b/package/src/ssr/types.tsx
index 6d554151..000274cb 100644
--- a/package/src/ssr/types.tsx
+++ b/package/src/ssr/types.tsx
@@ -1,9 +1,10 @@
-import { Cache } from "@apollo/client";
+import { Cache, WatchQueryOptions } from "@apollo/client";
 import React from "react";
 import { DataTransport } from "./dataTransport";
 
 export type RehydrationCache = Record<string, unknown>;
 export type ResultsCache = DataTransport<Cache.WriteOptions>;
+export type BackgroundQueriesCache = DataTransport<WatchQueryOptions>;
 
 export interface RehydrationContextValue {
   /**
@@ -33,6 +34,11 @@ export interface RehydrationContextValue {
    * be replayed on the client.
    */
   incomingResults: Cache.WriteOptions[];
+  /**
+   * Background queries that are initialized on the server and can be safely
+   * ignored (i.e. not run a second time) on the client.
+   */
+  incomingBackgroundQueries: WatchQueryOptions[];
   /**
    * Tracks if the `RehydrateOnClient` component is currently
    * injected into the `ServerInsertedHTMLHook`.
diff --git a/yarn.lock b/yarn.lock
index b425ba50..5269ebf0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -31,17 +31,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@apollo/client@npm:3.8.0-alpha.13":
-  version: 3.8.0-alpha.13
-  resolution: "@apollo/client@npm:3.8.0-alpha.13"
+"@apollo/client@npm:3.8.0-alpha.15":
+  version: 3.8.0-alpha.15
+  resolution: "@apollo/client@npm:3.8.0-alpha.15"
   dependencies:
     "@graphql-typed-document-node/core": ^3.1.1
-    "@wry/context": ^0.7.0
-    "@wry/equality": ^0.5.0
-    "@wry/trie": ^0.3.0
+    "@wry/context": ^0.7.3
+    "@wry/equality": ^0.5.6
+    "@wry/trie": ^0.4.3
     graphql-tag: ^2.12.6
     hoist-non-react-statics: ^3.3.2
-    optimism: ^0.17.0
+    optimism: ^0.17.4
     prop-types: ^15.7.2
     response-iterator: ^0.2.6
     symbol-observable: ^4.0.0
@@ -63,7 +63,7 @@ __metadata:
       optional: true
     subscriptions-transport-ws:
       optional: true
-  checksum: c451551240affd272482db54a6566bfd78d66f0fdc8b3085dd332f5761bc8fd113b3f39093fb2ab8aa9feb05b821e1410ccded4898d8e627a9f5dc9d5a893cbf
+  checksum: 568b9284c42e50dd4b88625f8549258f4036306e12b1c691f5d2d1f5a4323fbd78432c8daf0a50c51d6bf380feb0b4d8c665508234bdb6fed3e6c5284c4a3833
   languageName: node
   linkType: hard
 
@@ -71,7 +71,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@apollo/experimental-nextjs-app-support@workspace:package"
   dependencies:
-    "@apollo/client": 3.8.0-alpha.13
+    "@apollo/client": 3.8.0-alpha.15
     "@total-typescript/shoehorn": ^0.1.0
     "@tsconfig/recommended": ^1.0.1
     "@typescript-eslint/eslint-plugin": latest
@@ -87,7 +87,7 @@ __metadata:
     typescript: ^5.0.2
     vitest: ^0.30.1
   peerDependencies:
-    "@apollo/client": ">= 3.8.0-alpha.13"
+    "@apollo/client": ">= 3.8.0-alpha.15"
     next: ^13.4.1
     react: ^18
   languageName: unknown
@@ -4538,12 +4538,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@wry/equality@npm:^0.5.0":
-  version: 0.5.3
-  resolution: "@wry/equality@npm:0.5.3"
+"@wry/context@npm:^0.7.3":
+  version: 0.7.3
+  resolution: "@wry/context@npm:0.7.3"
+  dependencies:
+    tslib: ^2.3.0
+  checksum: 91c1e9eee9046c48ff857d60dcbb59f22246ce0f9bb2d9b190e0555227e7ba3f86024032cc057f3f5141d3bee93fc6b2a15ce2c79fa512569d3432eb8e1af02b
+  languageName: node
+  linkType: hard
+
+"@wry/equality@npm:^0.5.6":
+  version: 0.5.6
+  resolution: "@wry/equality@npm:0.5.6"
   dependencies:
     tslib: ^2.3.0
-  checksum: 7ea8ded51462911217183b93cc3ffbb4d18dc02a62d4a79e0d9983463739bf54106aaeb25649bf33168120bd044b61d135018bfcf4fefad8099c13eac9238aa6
+  checksum: 9addf8891bdff5e23eecff03641846e7a56c1de3c9362c25e69c0b2ee3303e74b22e9a0376920283cd9d3bdd1bada12df54be5eaa29c2d801d33d94992672e14
   languageName: node
   linkType: hard
 
@@ -4556,6 +4565,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@wry/trie@npm:^0.4.3":
+  version: 0.4.3
+  resolution: "@wry/trie@npm:0.4.3"
+  dependencies:
+    tslib: ^2.3.0
+  checksum: 106e021125cfafd22250a6631a0438a6a3debae7bd73f6db87fe42aa0757fe67693db0dfbe200ae1f60ba608c3e09ddb8a4e2b3527d56ed0a7e02aa0ee4c94e1
+  languageName: node
+  linkType: hard
+
 "@zag-js/element-size@npm:0.3.2":
   version: 0.3.2
   resolution: "@zag-js/element-size@npm:0.3.2"
@@ -4777,7 +4795,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "app-dir@workspace:examples/app-dir-experiments"
   dependencies:
-    "@apollo/client": 3.8.0-alpha.13
+    "@apollo/client": 3.8.0-alpha.15
     "@apollo/experimental-nextjs-app-support": "workspace:^"
     "@apollo/server": ^4.6.0
     "@as-integrations/next": ^1.3.0
@@ -7604,7 +7622,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "hack-the-supergraph-ssr@workspace:examples/hack-the-supergraph-ssr"
   dependencies:
-    "@apollo/client": 3.8.0-alpha.13
+    "@apollo/client": 3.8.0-alpha.15
     "@apollo/experimental-nextjs-app-support": "workspace:^"
     "@apollo/space-kit": ^9.11.0
     "@chakra-ui/next-js": ^2.1.2
@@ -9418,14 +9436,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"optimism@npm:^0.17.0":
-  version: 0.17.1
-  resolution: "optimism@npm:0.17.1"
+"optimism@npm:^0.17.4":
+  version: 0.17.4
+  resolution: "optimism@npm:0.17.4"
   dependencies:
     "@wry/context": ^0.7.0
     "@wry/trie": ^0.3.0
     tslib: ^2.3.0
-  checksum: 15e34e9b1ffef876cdc403cceb3e3dec6728dfd61ebc4538ef4ba92019f756030c433738c4d294a8ccb3b3d5a7a08c7de836d494e9d87876050b96e01ec9b72f
+  checksum: 465c3f6d12dfb39b47e1a8437472b0cdf37d1135094265c54446d991f1c70360814e2a435ceb7d09cf529b98c07283c30ef8869305fabec51b3376208b1f75a2
   languageName: node
   linkType: hard
 

From dca3d813a0ef29ef34aeb43f955ee35ba4d23307 Mon Sep 17 00:00:00 2001
From: alessia <alessia@apollographql.com>
Date: Wed, 31 May 2023 11:57:08 -0400
Subject: [PATCH 02/21] wip 2

---
 package/src/ssr/NextSSRApolloClient.tsx  | 83 +++++++++++++++++-------
 package/src/ssr/NextSSRInMemoryCache.tsx | 18 -----
 package/src/ssr/RehydrationContext.tsx   |  1 -
 3 files changed, 59 insertions(+), 43 deletions(-)

diff --git a/package/src/ssr/NextSSRApolloClient.tsx b/package/src/ssr/NextSSRApolloClient.tsx
index 7792d990..c1d7dbe6 100644
--- a/package/src/ssr/NextSSRApolloClient.tsx
+++ b/package/src/ssr/NextSSRApolloClient.tsx
@@ -1,11 +1,15 @@
 import { Trie } from "@wry/trie";
 import {
+  Observable,
+  ObservableQuery,
   ApolloClient,
   ApolloClientOptions,
   OperationVariables,
   WatchQueryOptions,
 } from "@apollo/client";
+import { print } from "graphql";
 import { canUseWeakMap } from "@apollo/client/utilities";
+import { QueryManager } from "@apollo/client/core/QueryManager";
 import { canonicalStringify } from "@apollo/client/cache";
 import { RehydrationContextValue } from "./types";
 import { registerLateInitializingQueue } from "./lateInitializingQueue";
@@ -34,48 +38,55 @@ export class NextSSRApolloClient<
     uninitialized: true,
   };
 
-  private backgroundQueriesAndResults = new Map<any[], any>();
-
   constructor(options: ApolloClientOptions<TCacheShape>) {
     super(options);
 
     this.registerWindowHook();
   }
-  private cacheKeys = new Trie<any[]>(
-    canUseWeakMap,
-    (cacheKey: any[]) => cacheKey
-  );
+  private resolveFakeQueries = new Map<string, any>();
+  // private cacheKeys = new Trie<any[]>(
+  //   canUseWeakMap,
+  //   (cacheKey: any[]) => cacheKey
+  // );
   private registerWindowHook() {
-    let stableCacheKey: any[] | undefined;
-    if (typeof window !== "undefined") {
-      // shared variables - could be a trie
+    // need to access this.QueryManager["inFlightLinkObservables"]
 
+    // let stableCacheKey: any[] | undefined;
+    if (typeof window !== "undefined") {
       if (Array.isArray(window[ApolloBackgroundQueryTransport] || [])) {
-        console.log("background query transport");
         registerLateInitializingQueue(
           ApolloBackgroundQueryTransport,
           (options) => {
+            console.log("cb 1");
+            // apply document transforms to add __typename up here
+            // check with Jerel about applying the transform up here so we get
+            // the same object back
             const cacheKey = [
-              options.query,
-              canonicalStringify(options.variables),
-            ].concat();
-
-            stableCacheKey = this.cacheKeys.lookupArray(cacheKey);
+              print(options.query),
+              // canonicalStringify(options.variables),
+            ].toString();
 
             // instead of null, set an observable in the map...
-            this.backgroundQueriesAndResults.set(stableCacheKey, "testing 123");
+            this.resolveFakeQueries.set(cacheKey, "testing 123");
+            console.log(print(options.query));
           }
         );
       }
 
       if (Array.isArray(window[ApolloResultCache] || [])) {
-        console.log("result cache");
         registerLateInitializingQueue(ApolloResultCache, (data) => {
           console.log("cb 2", data);
-          if (stableCacheKey) {
-            console.log(this.backgroundQueriesAndResults.get(stableCacheKey));
-            // call obserable with result
-          }
+          const cacheKey = [
+            print(data.query),
+            // canonicalStringify(data.variables),
+          ].toString();
+          // const stableCacheKey = this.cacheKeys.lookupArray(cacheKey);
+          // if (stableCacheKey) {
+          console.log(print(data.query));
+          console.log([...this.resolveFakeQueries.keys()][0] === cacheKey);
+          console.log(this.resolveFakeQueries.get(cacheKey));
+          // call observable with result
+          // }
         });
       }
     }
@@ -88,13 +99,37 @@ export class NextSSRApolloClient<
     T = any,
     TVariables extends OperationVariables = OperationVariables
   >(options: WatchQueryOptions<TVariables, T>) {
+    console.log("watchQuery");
     if (typeof window == "undefined") {
+      console.log("watchQuery server");
       // @ts-ignore
       this.rehydrationContext.incomingBackgroundQueries.push(options);
     }
-    if (typeof window !== "undefined") {
-      console.log("inside watchQuery");
-    }
+    // else if (
+    //   typeof window !== "undefined" &&
+    //   this.rehydrationContext.uninitialized
+    // )
+    // {
+    //   // console.log(this.rehydrationContext.uninitialized);
+    //   // console.log("inside watchQuery", options);
+    //   const cacheKey = [
+    //     options.query,
+    //     canonicalStringify(options.variables),
+    //   ].concat();
+    //   const stableCacheKey = this.cacheKeys.lookupArray(cacheKey);
+    //   this.resolveFakeQueries.set(stableCacheKey, "testing 123");
+    //   // @ts-ignore
+    //   // const observable: ObservableQuery<T, TVariables> = new Observable(
+    //   //   (observer) => () => true
+    //   // );
+    //   // const observable = new ObservableQuery<T, TVariables>({
+    //   //   queryManager: new QueryManager(),
+    //   //   queryInfo,
+    //   //   options,
+    //   // });
+    //   return observable;
+    // } else {
+    // }
     return super.watchQuery(options);
   }
 
diff --git a/package/src/ssr/NextSSRInMemoryCache.tsx b/package/src/ssr/NextSSRInMemoryCache.tsx
index ac46d89b..837877a6 100644
--- a/package/src/ssr/NextSSRInMemoryCache.tsx
+++ b/package/src/ssr/NextSSRInMemoryCache.tsx
@@ -5,8 +5,6 @@ import {
   Reference,
 } from "@apollo/client";
 import { RehydrationContextValue } from "./types";
-// import { ApolloResultCache } from "./ApolloRehydrateSymbols";
-// import { registerLateInitializingQueue } from "./lateInitializingQueue";
 
 export class NextSSRInMemoryCache extends InMemoryCache {
   private rehydrationContext: Pick<
@@ -18,23 +16,7 @@ export class NextSSRInMemoryCache extends InMemoryCache {
   };
   constructor(config?: InMemoryCacheConfig) {
     super(config);
-
-    // this.registerWindowHook();
   }
-  // this could be removed here and moved over/merged with the other register window hook fn
-  // private registerWindowHook() {
-  //   if (typeof window !== "undefined") {
-  //     if (Array.isArray(window[ApolloResultCache] || [])) {
-  //       registerLateInitializingQueue(ApolloResultCache, (data) =>
-  //         this.write(data)
-  //       );
-  //     } else {
-  //       throw new Error(
-  //         "On the client side, only one instance of `NextSSRInMemoryCache` can be created!"
-  //       );
-  //     }
-  //   }
-  // }
 
   write(options: Cache.WriteOptions<any, any>): Reference | undefined {
     console.log("write");
diff --git a/package/src/ssr/RehydrationContext.tsx b/package/src/ssr/RehydrationContext.tsx
index 22ae7114..351aa09f 100644
--- a/package/src/ssr/RehydrationContext.tsx
+++ b/package/src/ssr/RehydrationContext.tsx
@@ -21,7 +21,6 @@ export const RehydrationContextProvider = ({
       rehydrationContext.current = buildApolloRehydrationContext();
     }
     if (client instanceof NextSSRApolloClient) {
-      console.log("SET HYDRATION CONTEXT");
       client.setRehydrationContext(rehydrationContext.current);
     }
     if (client.cache instanceof NextSSRInMemoryCache) {

From 3a212525358d9069c7267bba09961f1499e3fb6a Mon Sep 17 00:00:00 2001
From: alessia <alessia@apollographql.com>
Date: Wed, 7 Jun 2023 11:01:57 -0400
Subject: [PATCH 03/21] wip 3

---
 examples/app-dir-experiments/package.json     |   2 +-
 examples/hack-the-supergraph-ssr/package.json |   2 +-
 examples/polls-demo/app/cc/poll-cc.tsx        |  10 +-
 examples/polls-demo/package.json              |   1 +
 package/package.json                          |   4 +-
 package/src/ssr/NextSSRApolloClient.tsx       | 147 +++++++++++-------
 package/src/ssr/hooks.ts                      |  15 +-
 yarn.lock                                     |  17 +-
 8 files changed, 117 insertions(+), 81 deletions(-)

diff --git a/examples/app-dir-experiments/package.json b/examples/app-dir-experiments/package.json
index 0910bb58..ddd03eb2 100644
--- a/examples/app-dir-experiments/package.json
+++ b/examples/app-dir-experiments/package.json
@@ -10,7 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@apollo/client": "3.8.0-alpha.15",
+    "@apollo/client": "0.0.0-pr-10954-20230606145830",
     "@apollo/experimental-nextjs-app-support": "workspace:^",
     "@apollo/server": "^4.6.0",
     "@as-integrations/next": "^1.3.0",
diff --git a/examples/hack-the-supergraph-ssr/package.json b/examples/hack-the-supergraph-ssr/package.json
index ec3c8b8f..8a267ca3 100644
--- a/examples/hack-the-supergraph-ssr/package.json
+++ b/examples/hack-the-supergraph-ssr/package.json
@@ -10,7 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@apollo/client": "3.8.0-alpha.15",
+    "@apollo/client": "0.0.0-pr-10954-20230606145830",
     "@apollo/experimental-nextjs-app-support": "workspace:^",
     "@apollo/space-kit": "^9.11.0",
     "@chakra-ui/next-js": "^2.1.2",
diff --git a/examples/polls-demo/app/cc/poll-cc.tsx b/examples/polls-demo/app/cc/poll-cc.tsx
index 7a673030..2ca0cff6 100644
--- a/examples/polls-demo/app/cc/poll-cc.tsx
+++ b/examples/polls-demo/app/cc/poll-cc.tsx
@@ -1,13 +1,7 @@
 "use client";
 import { Suspense } from "react";
-import {
-  useReadQuery,
-  useSuspenseQuery,
-} from "@apollo/experimental-nextjs-app-support/ssr";
-import {
-  useMutation,
-  useBackgroundQuery_experimental as useBackgroundQuery,
-} from "@apollo/client";
+import { useReadQuery } from "@apollo/experimental-nextjs-app-support/ssr";
+import { useMutation, useBackgroundQuery } from "@apollo/client";
 import { QueryReference } from "@apollo/client/react/cache/QueryReference";
 import { Poll as PollInner } from "@/components/poll";
 
diff --git a/examples/polls-demo/package.json b/examples/polls-demo/package.json
index 253b78a3..ba914370 100644
--- a/examples/polls-demo/package.json
+++ b/examples/polls-demo/package.json
@@ -12,6 +12,7 @@
     "codegen": "graphql-codegen --config codegen.ts"
   },
   "dependencies": {
+    "@apollo/client": "0.0.0-pr-10954-20230606145830",
     "@apollo/experimental-nextjs-app-support": "workspace:^",
     "@apollo/server": "^4.7.0",
     "@as-integrations/next": "^1.3.0",
diff --git a/package/package.json b/package/package.json
index ba3c7a87..d2c578d4 100644
--- a/package/package.json
+++ b/package/package.json
@@ -44,7 +44,7 @@
   },
   "packageManager": "yarn@3.5.0",
   "devDependencies": {
-    "@apollo/client": "3.8.0-alpha.15",
+    "@apollo/client": "0.0.0-pr-10954-20230606145830",
     "@total-typescript/shoehorn": "^0.1.0",
     "@tsconfig/recommended": "^1.0.1",
     "@typescript-eslint/eslint-plugin": "latest",
@@ -59,7 +59,7 @@
     "vitest": "^0.30.1"
   },
   "peerDependencies": {
-    "@apollo/client": ">= 3.8.0-alpha.15",
+    "@apollo/client": ">= 3.8.0-alpha.13",
     "next": "^13.4.1",
     "react": "^18"
   },
diff --git a/package/src/ssr/NextSSRApolloClient.tsx b/package/src/ssr/NextSSRApolloClient.tsx
index c1d7dbe6..c617a673 100644
--- a/package/src/ssr/NextSSRApolloClient.tsx
+++ b/package/src/ssr/NextSSRApolloClient.tsx
@@ -1,6 +1,4 @@
-import { Trie } from "@wry/trie";
 import {
-  Observable,
   ObservableQuery,
   ApolloClient,
   ApolloClientOptions,
@@ -8,8 +6,7 @@ import {
   WatchQueryOptions,
 } from "@apollo/client";
 import { print } from "graphql";
-import { canUseWeakMap } from "@apollo/client/utilities";
-import { QueryManager } from "@apollo/client/core/QueryManager";
+// import { canUseWeakMap } from "@apollo/client/utilities";
 import { canonicalStringify } from "@apollo/client/cache";
 import { RehydrationContextValue } from "./types";
 import { registerLateInitializingQueue } from "./lateInitializingQueue";
@@ -44,30 +41,50 @@ export class NextSSRApolloClient<
     this.registerWindowHook();
   }
   private resolveFakeQueries = new Map<string, any>();
-  // private cacheKeys = new Trie<any[]>(
-  //   canUseWeakMap,
-  //   (cacheKey: any[]) => cacheKey
-  // );
-  private registerWindowHook() {
-    // need to access this.QueryManager["inFlightLinkObservables"]
 
-    // let stableCacheKey: any[] | undefined;
+  private registerWindowHook() {
     if (typeof window !== "undefined") {
       if (Array.isArray(window[ApolloBackgroundQueryTransport] || [])) {
         registerLateInitializingQueue(
           ApolloBackgroundQueryTransport,
           (options) => {
             console.log("cb 1");
-            // apply document transforms to add __typename up here
-            // check with Jerel about applying the transform up here so we get
-            // the same object back
+
+            const transformedDocument =
+              this.documentTransform.transformDocument(options.query);
+
+            // doc transforms will add __typename but won't remove directives
+            // need to pass the result of transformed document into
+            const { serverQuery } =
+              this["queryManager"].getDocumentInfo(transformedDocument);
+
+            // ^ this has a property called serverQuery -> this will be stripped
+            // of directives incl defer, nonreactive, connection, etc.
             const cacheKey = [
-              print(options.query),
-              // canonicalStringify(options.variables),
+              serverQuery,
+              canonicalStringify(options.variables),
             ].toString();
 
-            // instead of null, set an observable in the map...
-            this.resolveFakeQueries.set(cacheKey, "testing 123");
+            const queryId = this["queryManager"].generateQueryId();
+            const queryInfo = this["queryManager"].getQuery(queryId).init({
+              document: options.query,
+              variables: options.variables,
+            });
+            const observable = new ObservableQuery({
+              queryManager: this["queryManager"],
+              queryInfo,
+              options,
+            });
+            this.resolveFakeQueries.set(cacheKey, observable);
+            // const byVariables =
+            //   this["queryManager"].inFlightLinkObservables.get(serverQuery) ||
+            //   new Map();
+
+            // this["queryManager"].inFlightLinkObservables.set(
+            //   serverQuery,
+            //   byVariables
+            // );
+
             console.log(print(options.query));
           }
         );
@@ -76,17 +93,26 @@ export class NextSSRApolloClient<
       if (Array.isArray(window[ApolloResultCache] || [])) {
         registerLateInitializingQueue(ApolloResultCache, (data) => {
           console.log("cb 2", data);
+
+          const transformedDocument = this.documentTransform.transformDocument(
+            data.query
+          );
+
+          const { serverQuery } =
+            this["queryManager"].getDocumentInfo(transformedDocument);
+
           const cacheKey = [
-            print(data.query),
-            // canonicalStringify(data.variables),
+            serverQuery,
+            canonicalStringify(data.variables),
           ].toString();
-          // const stableCacheKey = this.cacheKeys.lookupArray(cacheKey);
-          // if (stableCacheKey) {
-          console.log(print(data.query));
-          console.log([...this.resolveFakeQueries.keys()][0] === cacheKey);
-          console.log(this.resolveFakeQueries.get(cacheKey));
+
+          const fakeObservable = this.resolveFakeQueries.get(cacheKey);
+          // console.log(this.resolveFakeQueries.get(cacheKey));
+          console.log("result", data.result, fakeObservable);
+          fakeObservable.updateLastResult(data.result);
+
           // call observable with result
-          // }
+          console.log(data.result);
         });
       }
     }
@@ -99,38 +125,55 @@ export class NextSSRApolloClient<
     T = any,
     TVariables extends OperationVariables = OperationVariables
   >(options: WatchQueryOptions<TVariables, T>) {
-    console.log("watchQuery");
     if (typeof window == "undefined") {
       console.log("watchQuery server");
       // @ts-ignore
       this.rehydrationContext.incomingBackgroundQueries.push(options);
+      return super.watchQuery(options);
     }
-    // else if (
-    //   typeof window !== "undefined" &&
-    //   this.rehydrationContext.uninitialized
-    // )
-    // {
-    //   // console.log(this.rehydrationContext.uninitialized);
-    //   // console.log("inside watchQuery", options);
-    //   const cacheKey = [
-    //     options.query,
-    //     canonicalStringify(options.variables),
-    //   ].concat();
-    //   const stableCacheKey = this.cacheKeys.lookupArray(cacheKey);
-    //   this.resolveFakeQueries.set(stableCacheKey, "testing 123");
-    //   // @ts-ignore
-    //   // const observable: ObservableQuery<T, TVariables> = new Observable(
-    //   //   (observer) => () => true
-    //   // );
-    //   // const observable = new ObservableQuery<T, TVariables>({
-    //   //   queryManager: new QueryManager(),
-    //   //   queryInfo,
-    //   //   options,
-    //   // });
-    //   return observable;
-    // } else {
+    console.log(
+      "watchQuery",
+      this.rehydrationContext.incomingBackgroundQueries
+    );
+    // const transformedDocument = this.documentTransform.transformDocument(
+    //   options.query
+    // );
+
+    // const { serverQuery } =
+    //   this["queryManager"].getDocumentInfo(transformedDocument);
+
+    // const cacheKey = [
+    //   serverQuery,
+    //   canonicalStringify(options.variables),
+    // ].toString();
+
+    // const fakeObservable = this.resolveFakeQueries.get(cacheKey);
+    // console.log({ fakeObservable });
+
+    // if (typeof window !== "undefined" && fakeObservable) {
+    //   console.log("inside return fake obs");
+    //   return fakeObservable;
     // }
-    return super.watchQuery(options);
+    // if the query + variables are in this.resolveFakeQueries
+    // return the fake ObservableQuery
+
+    // const queryId = this["queryManager"].generateQueryId();
+    const queryId = "FOO";
+    const queryInfo = this["queryManager"].getQuery(queryId).init({
+      document: options.query,
+      variables: options.variables,
+    });
+    const observable = new ObservableQuery({
+      queryManager: this["queryManager"],
+      queryInfo,
+      options,
+    });
+    console.log("returning obs");
+    // this["queryManager"].fetchConcastWithInfo = () => {
+    //   console.log("doo doo");
+    // };
+    return observable;
+    // return super.watchQuery(options);
   }
 
   setRehydrationContext(rehydrationContext: RehydrationContextValue) {
diff --git a/package/src/ssr/hooks.ts b/package/src/ssr/hooks.ts
index c11542e4..c6fc3806 100644
--- a/package/src/ssr/hooks.ts
+++ b/package/src/ssr/hooks.ts
@@ -1,13 +1,13 @@
 "use client";
 import {
-  useFragment_experimental,
-  useSuspenseQuery_experimental,
-  useReadQuery_experimental,
+  useFragment as orig_useFragment,
+  useSuspenseQuery as orig_useSuspenseQuery,
+  useReadQuery as orig_useReadQuery,
   useQuery as orig_useQuery,
 } from "@apollo/client";
 import { useTransportValue } from "./useTransportValue";
 
-export const useFragment = wrap(useFragment_experimental, [
+export const useFragment = wrap(orig_useFragment, [
   "data",
   "complete",
   "missing",
@@ -18,14 +18,11 @@ export const useQuery = wrap(orig_useQuery, [
   "networkStatus",
   "called",
 ]);
-export const useSuspenseQuery = wrap(useSuspenseQuery_experimental, [
-  "data",
-  "networkStatus",
-]);
-export const useReadQuery = wrap(useReadQuery_experimental, [
+export const useSuspenseQuery = wrap(orig_useSuspenseQuery, [
   "data",
   "networkStatus",
 ]);
+export const useReadQuery = wrap(orig_useReadQuery, ["data", "networkStatus"]);
 
 function wrap<T extends (...args: any[]) => any>(
   useFn: T,
diff --git a/yarn.lock b/yarn.lock
index 5269ebf0..f723174d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -31,9 +31,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@apollo/client@npm:3.8.0-alpha.15":
-  version: 3.8.0-alpha.15
-  resolution: "@apollo/client@npm:3.8.0-alpha.15"
+"@apollo/client@npm:0.0.0-pr-10954-20230606145830":
+  version: 0.0.0-pr-10954-20230606145830
+  resolution: "@apollo/client@npm:0.0.0-pr-10954-20230606145830"
   dependencies:
     "@graphql-typed-document-node/core": ^3.1.1
     "@wry/context": ^0.7.3
@@ -63,7 +63,7 @@ __metadata:
       optional: true
     subscriptions-transport-ws:
       optional: true
-  checksum: 568b9284c42e50dd4b88625f8549258f4036306e12b1c691f5d2d1f5a4323fbd78432c8daf0a50c51d6bf380feb0b4d8c665508234bdb6fed3e6c5284c4a3833
+  checksum: 194dbdd3204901c1cf481db355d6e60b05bc4739ad91622bb5bdb983e348d67870a6f59e6223cb915eb91ab156b57d9d89b57d315f68ae05827a45db003a9e8d
   languageName: node
   linkType: hard
 
@@ -71,7 +71,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@apollo/experimental-nextjs-app-support@workspace:package"
   dependencies:
-    "@apollo/client": 3.8.0-alpha.15
+    "@apollo/client": 0.0.0-pr-10954-20230606145830
     "@total-typescript/shoehorn": ^0.1.0
     "@tsconfig/recommended": ^1.0.1
     "@typescript-eslint/eslint-plugin": latest
@@ -87,7 +87,7 @@ __metadata:
     typescript: ^5.0.2
     vitest: ^0.30.1
   peerDependencies:
-    "@apollo/client": ">= 3.8.0-alpha.15"
+    "@apollo/client": ">= 3.8.0-alpha.13"
     next: ^13.4.1
     react: ^18
   languageName: unknown
@@ -4762,6 +4762,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "apollo-next-13-demo@workspace:examples/polls-demo"
   dependencies:
+    "@apollo/client": 0.0.0-pr-10954-20230606145830
     "@apollo/experimental-nextjs-app-support": "workspace:^"
     "@apollo/server": ^4.7.0
     "@as-integrations/next": ^1.3.0
@@ -4795,7 +4796,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "app-dir@workspace:examples/app-dir-experiments"
   dependencies:
-    "@apollo/client": 3.8.0-alpha.15
+    "@apollo/client": 0.0.0-pr-10954-20230606145830
     "@apollo/experimental-nextjs-app-support": "workspace:^"
     "@apollo/server": ^4.6.0
     "@as-integrations/next": ^1.3.0
@@ -7622,7 +7623,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "hack-the-supergraph-ssr@workspace:examples/hack-the-supergraph-ssr"
   dependencies:
-    "@apollo/client": 3.8.0-alpha.15
+    "@apollo/client": 0.0.0-pr-10954-20230606145830
     "@apollo/experimental-nextjs-app-support": "workspace:^"
     "@apollo/space-kit": ^9.11.0
     "@chakra-ui/next-js": ^2.1.2

From 433171b54db50a1d0de5b004b63f40028ebb9ccb Mon Sep 17 00:00:00 2001
From: Lenz Weber-Tronic <lorenz.weber-tronic@apollographql.com>
Date: Fri, 9 Jun 2023 15:35:47 +0200
Subject: [PATCH 04/21] ensure rehydration context is injected when calling
 `useBackgroundQuery`

---
 package/src/ssr/hooks.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/package/src/ssr/hooks.ts b/package/src/ssr/hooks.ts
index c6fc3806..a939f52c 100644
--- a/package/src/ssr/hooks.ts
+++ b/package/src/ssr/hooks.ts
@@ -4,8 +4,10 @@ import {
   useSuspenseQuery as orig_useSuspenseQuery,
   useReadQuery as orig_useReadQuery,
   useQuery as orig_useQuery,
+  useBackgroundQuery as orig_useBackgroundQuery,
 } from "@apollo/client";
 import { useTransportValue } from "./useTransportValue";
+import { useRehydrationContext } from "./RehydrationContext";
 
 export const useFragment = wrap(orig_useFragment, [
   "data",
@@ -23,6 +25,10 @@ export const useSuspenseQuery = wrap(orig_useSuspenseQuery, [
   "networkStatus",
 ]);
 export const useReadQuery = wrap(orig_useReadQuery, ["data", "networkStatus"]);
+export const useBackgroundQuery: typeof orig_useBackgroundQuery = (...args) => {
+  useRehydrationContext();
+  return orig_useBackgroundQuery(...args);
+};
 
 function wrap<T extends (...args: any[]) => any>(
   useFn: T,

From ca132acf0acfe55a6238a152ed0208088339a4ac Mon Sep 17 00:00:00 2001
From: Lenz Weber-Tronic <lorenz.weber-tronic@apollographql.com>
Date: Fri, 9 Jun 2023 15:36:26 +0200
Subject: [PATCH 05/21] prevent accidental early bailout

---
 package/src/ssr/RehydrationContext.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/package/src/ssr/RehydrationContext.tsx b/package/src/ssr/RehydrationContext.tsx
index 351aa09f..225c0bbf 100644
--- a/package/src/ssr/RehydrationContext.tsx
+++ b/package/src/ssr/RehydrationContext.tsx
@@ -22,10 +22,10 @@ export const RehydrationContextProvider = ({
     }
     if (client instanceof NextSSRApolloClient) {
       client.setRehydrationContext(rehydrationContext.current);
-    }
+    } // else error?
     if (client.cache instanceof NextSSRInMemoryCache) {
       client.cache.setRehydrationContext(rehydrationContext.current);
-    }
+    } // else error?
   } else {
     registerDataTransport();
   }
@@ -65,7 +65,8 @@ function buildApolloRehydrationContext(): RehydrationContextValue {
       rehydrationContext.currentlyInjected = false;
       if (
         !Object.keys(rehydrationContext.transportValueData).length &&
-        !Object.keys(rehydrationContext.incomingResults).length
+        !Object.keys(rehydrationContext.incomingResults).length &&
+        !Object.keys(rehydrationContext.incomingBackgroundQueries).length
       )
         return <></>;
       invariant.debug(
@@ -76,6 +77,10 @@ function buildApolloRehydrationContext(): RehydrationContextValue {
         "transporting results",
         rehydrationContext.incomingResults
       );
+      invariant.debug(
+        "transporting incomingBackgroundQueries",
+        rehydrationContext.incomingBackgroundQueries
+      );
 
       const __html = transportDataToJS({
         rehydrate: Object.fromEntries(

From 305f0b70771e7aff269a01a26de6994fabc723d7 Mon Sep 17 00:00:00 2001
From: Lenz Weber-Tronic <lorenz.weber-tronic@apollographql.com>
Date: Fri, 9 Jun 2023 15:37:55 +0200
Subject: [PATCH 06/21] enforce object identity for multiple queries with the
 same printed text to ensure identity in
 `QueryManager.inFlightLinkObservables`

---
 package/src/ssr/NextSSRApolloClient.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/package/src/ssr/NextSSRApolloClient.tsx b/package/src/ssr/NextSSRApolloClient.tsx
index c617a673..7e7227bd 100644
--- a/package/src/ssr/NextSSRApolloClient.tsx
+++ b/package/src/ssr/NextSSRApolloClient.tsx
@@ -24,6 +24,8 @@ import {
 // on the client - the data comes in, creates the fake in-flight observable to
 // force the cache to wait for the pending request
 
+const seenDocuments = new Map<string, DocumentNode>();
+
 export class NextSSRApolloClient<
   TCacheShape
 > extends ApolloClient<TCacheShape> {
@@ -36,7 +38,18 @@ export class NextSSRApolloClient<
   };
 
   constructor(options: ApolloClientOptions<TCacheShape>) {
-    super(options);
+    super({
+      ...options,
+      documentTransform: new DocumentTransform((document) => {
+        const stringified = print(document);
+        if (seenDocuments.has(stringified)) {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          return seenDocuments.get(stringified)!;
+        }
+        seenDocuments.set(stringified, document);
+        return document;
+      }),
+    });
 
     this.registerWindowHook();
   }

From 01f320c2847a743543de166caad6e3e7898f16ec Mon Sep 17 00:00:00 2001
From: Lenz Weber-Tronic <lorenz.weber-tronic@apollographql.com>
Date: Fri, 9 Jun 2023 15:42:08 +0200
Subject: [PATCH 07/21] enable debug logging, update import

---
 examples/polls-demo/app/cc/apollo-wrapper.tsx | 3 +++
 examples/polls-demo/app/cc/poll-cc.tsx        | 7 +++++--
 package/src/ssr/index.ts                      | 8 +++++++-
 package/src/ssr/types.tsx                     | 2 +-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/examples/polls-demo/app/cc/apollo-wrapper.tsx b/examples/polls-demo/app/cc/apollo-wrapper.tsx
index 58175285..0386f7ee 100644
--- a/examples/polls-demo/app/cc/apollo-wrapper.tsx
+++ b/examples/polls-demo/app/cc/apollo-wrapper.tsx
@@ -13,6 +13,9 @@ import {
   SSRMultipartLink,
 } from "@apollo/experimental-nextjs-app-support/ssr";
 
+import { setVerbosity } from "ts-invariant";
+setVerbosity("debug");
+
 function makeClient() {
   const httpLink = new HttpLink({
     uri: "https://fragrant-shadow-9470.fly.dev/",
diff --git a/examples/polls-demo/app/cc/poll-cc.tsx b/examples/polls-demo/app/cc/poll-cc.tsx
index 2ca0cff6..ff63b81d 100644
--- a/examples/polls-demo/app/cc/poll-cc.tsx
+++ b/examples/polls-demo/app/cc/poll-cc.tsx
@@ -1,7 +1,10 @@
 "use client";
 import { Suspense } from "react";
-import { useReadQuery } from "@apollo/experimental-nextjs-app-support/ssr";
-import { useMutation, useBackgroundQuery } from "@apollo/client";
+import {
+  useReadQuery,
+  useBackgroundQuery,
+} from "@apollo/experimental-nextjs-app-support/ssr";
+import { useMutation } from "@apollo/client";
 import { QueryReference } from "@apollo/client/react/cache/QueryReference";
 import { Poll as PollInner } from "@/components/poll";
 
diff --git a/package/src/ssr/index.ts b/package/src/ssr/index.ts
index 0bb8e822..a6dc03a3 100644
--- a/package/src/ssr/index.ts
+++ b/package/src/ssr/index.ts
@@ -1,7 +1,13 @@
 export { ApolloNextAppProvider } from "./ApolloNextAppProvider";
 export { NextSSRInMemoryCache } from "./NextSSRInMemoryCache";
 export { NextSSRApolloClient } from "./NextSSRApolloClient";
-export { useFragment, useQuery, useSuspenseQuery, useReadQuery } from "./hooks";
+export {
+  useFragment,
+  useQuery,
+  useSuspenseQuery,
+  useReadQuery,
+  useBackgroundQuery,
+} from "./hooks";
 export { SSRMultipartLink } from "./SSRMultipartLink";
 export { AccumulateMultipartResponsesLink as DebounceMultipartResponsesLink } from "./AccumulateMultipartResponsesLink";
 export { RemoveMultipartDirectivesLink } from "./RemoveMultipartDirectivesLink";
diff --git a/package/src/ssr/types.tsx b/package/src/ssr/types.tsx
index 000274cb..4c3fd2dd 100644
--- a/package/src/ssr/types.tsx
+++ b/package/src/ssr/types.tsx
@@ -38,7 +38,7 @@ export interface RehydrationContextValue {
    * Background queries that are initialized on the server and can be safely
    * ignored (i.e. not run a second time) on the client.
    */
-  incomingBackgroundQueries: WatchQueryOptions[];
+  incomingBackgroundQueries: WatchQueryOptions<any, any>[];
   /**
    * Tracks if the `RehydrateOnClient` component is currently
    * injected into the `ServerInsertedHTMLHook`.

From 8d38550efcc40da15056ab9e9a00f8d770325032 Mon Sep 17 00:00:00 2001
From: Lenz Weber-Tronic <lorenz.weber-tronic@apollographql.com>
Date: Fri, 9 Jun 2023 15:43:45 +0200
Subject: [PATCH 08/21] naive data transport logic without cleanup

---
 package/src/ssr/NextSSRApolloClient.tsx | 174 ++++++++++--------------
 1 file changed, 72 insertions(+), 102 deletions(-)

diff --git a/package/src/ssr/NextSSRApolloClient.tsx b/package/src/ssr/NextSSRApolloClient.tsx
index 7e7227bd..5426f7a1 100644
--- a/package/src/ssr/NextSSRApolloClient.tsx
+++ b/package/src/ssr/NextSSRApolloClient.tsx
@@ -1,9 +1,12 @@
 import {
-  ObservableQuery,
   ApolloClient,
   ApolloClientOptions,
   OperationVariables,
   WatchQueryOptions,
+  Observable,
+  FetchResult,
+  DocumentNode,
+  DocumentTransform,
 } from "@apollo/client";
 import { print } from "graphql";
 // import { canUseWeakMap } from "@apollo/client/utilities";
@@ -53,7 +56,27 @@ export class NextSSRApolloClient<
 
     this.registerWindowHook();
   }
-  private resolveFakeQueries = new Map<string, any>();
+  private resolveFakeQueries = new Map<string, (result: FetchResult) => void>();
+
+  private identifyUniqueQuery(options: {
+    query: DocumentNode;
+    variables?: unknown;
+  }) {
+    const transformedDocument = this.documentTransform.transformDocument(
+      options.query
+    );
+
+    // doc transforms will add __typename but won't remove directives
+    // need to pass the result of transformed document into
+    const { serverQuery } =
+      this["queryManager"].getDocumentInfo(transformedDocument);
+
+    const canonicalVariables = canonicalStringify(options.variables);
+
+    const cacheKey = [serverQuery, canonicalVariables].toString();
+
+    return { query: serverQuery, cacheKey, varJson: canonicalVariables };
+  }
 
   private registerWindowHook() {
     if (typeof window !== "undefined") {
@@ -63,42 +86,35 @@ export class NextSSRApolloClient<
           (options) => {
             console.log("cb 1");
 
-            const transformedDocument =
-              this.documentTransform.transformDocument(options.query);
-
-            // doc transforms will add __typename but won't remove directives
-            // need to pass the result of transformed document into
-            const { serverQuery } =
-              this["queryManager"].getDocumentInfo(transformedDocument);
-
-            // ^ this has a property called serverQuery -> this will be stripped
-            // of directives incl defer, nonreactive, connection, etc.
-            const cacheKey = [
-              serverQuery,
-              canonicalStringify(options.variables),
-            ].toString();
-
-            const queryId = this["queryManager"].generateQueryId();
-            const queryInfo = this["queryManager"].getQuery(queryId).init({
-              document: options.query,
-              variables: options.variables,
-            });
-            const observable = new ObservableQuery({
-              queryManager: this["queryManager"],
-              queryInfo,
-              options,
-            });
-            this.resolveFakeQueries.set(cacheKey, observable);
-            // const byVariables =
-            //   this["queryManager"].inFlightLinkObservables.get(serverQuery) ||
-            //   new Map();
-
-            // this["queryManager"].inFlightLinkObservables.set(
-            //   serverQuery,
-            //   byVariables
-            // );
-
-            console.log(print(options.query));
+            const { query, varJson, cacheKey } =
+              this.identifyUniqueQuery(options);
+
+            const byVariables =
+              this["queryManager"].inFlightLinkObservables.get(query) ||
+              new Map();
+
+            this["queryManager"].inFlightLinkObservables.set(
+              query,
+              byVariables
+            );
+
+            if (!byVariables.has(varJson)) {
+              console.log("adding myself");
+              const promise = new Promise<FetchResult>((r) => {
+                this.resolveFakeQueries.set(cacheKey, r);
+              });
+
+              byVariables.set(
+                varJson,
+                new Observable<FetchResult>((observer) => {
+                  promise.then((result) => {
+                    console.log("resolving fake query with result", result);
+                    observer.next(result);
+                    observer.complete();
+                  });
+                })
+              );
+            }
           }
         );
       }
@@ -107,25 +123,15 @@ export class NextSSRApolloClient<
         registerLateInitializingQueue(ApolloResultCache, (data) => {
           console.log("cb 2", data);
 
-          const transformedDocument = this.documentTransform.transformDocument(
-            data.query
-          );
-
-          const { serverQuery } =
-            this["queryManager"].getDocumentInfo(transformedDocument);
-
-          const cacheKey = [
-            serverQuery,
-            canonicalStringify(data.variables),
-          ].toString();
-
-          const fakeObservable = this.resolveFakeQueries.get(cacheKey);
-          // console.log(this.resolveFakeQueries.get(cacheKey));
-          console.log("result", data.result, fakeObservable);
-          fakeObservable.updateLastResult(data.result);
-
-          // call observable with result
-          console.log(data.result);
+          const { cacheKey } = this.identifyUniqueQuery(data);
+          const resolve = this.resolveFakeQueries.get(cacheKey);
+          if (resolve) {
+            console.log("resolving", data);
+            resolve({
+              data: data.result,
+            });
+            this.resolveFakeQueries.delete(cacheKey);
+          }
         });
       }
     }
@@ -138,55 +144,19 @@ export class NextSSRApolloClient<
     T = any,
     TVariables extends OperationVariables = OperationVariables
   >(options: WatchQueryOptions<TVariables, T>) {
+    console.log("watchQuery, before", [
+      ...this["queryManager"].inFlightLinkObservables.entries(),
+    ]);
     if (typeof window == "undefined") {
       console.log("watchQuery server");
-      // @ts-ignore
       this.rehydrationContext.incomingBackgroundQueries.push(options);
-      return super.watchQuery(options);
     }
-    console.log(
-      "watchQuery",
-      this.rehydrationContext.incomingBackgroundQueries
-    );
-    // const transformedDocument = this.documentTransform.transformDocument(
-    //   options.query
-    // );
-
-    // const { serverQuery } =
-    //   this["queryManager"].getDocumentInfo(transformedDocument);
-
-    // const cacheKey = [
-    //   serverQuery,
-    //   canonicalStringify(options.variables),
-    // ].toString();
-
-    // const fakeObservable = this.resolveFakeQueries.get(cacheKey);
-    // console.log({ fakeObservable });
-
-    // if (typeof window !== "undefined" && fakeObservable) {
-    //   console.log("inside return fake obs");
-    //   return fakeObservable;
-    // }
-    // if the query + variables are in this.resolveFakeQueries
-    // return the fake ObservableQuery
-
-    // const queryId = this["queryManager"].generateQueryId();
-    const queryId = "FOO";
-    const queryInfo = this["queryManager"].getQuery(queryId).init({
-      document: options.query,
-      variables: options.variables,
-    });
-    const observable = new ObservableQuery({
-      queryManager: this["queryManager"],
-      queryInfo,
-      options,
-    });
-    console.log("returning obs");
-    // this["queryManager"].fetchConcastWithInfo = () => {
-    //   console.log("doo doo");
-    // };
-    return observable;
-    // return super.watchQuery(options);
+
+    const result = super.watchQuery(options);
+    console.log("watchQuery, after", [
+      ...this["queryManager"].inFlightLinkObservables.entries(),
+    ]);
+    return result;
   }
 
   setRehydrationContext(rehydrationContext: RehydrationContextValue) {

From 9a8a967ac1c93ec6362d4b753b5a27cd13cfe5a5 Mon Sep 17 00:00:00 2001
From: alessia <alessia@apollographql.com>
Date: Wed, 14 Jun 2023 11:41:31 -0400
Subject: [PATCH 09/21] feat: set fetchCancelFn for fake query

---
 package/src/ssr/NextSSRApolloClient.tsx  | 74 ++++++++++++------------
 package/src/ssr/NextSSRInMemoryCache.tsx |  1 -
 2 files changed, 36 insertions(+), 39 deletions(-)

diff --git a/package/src/ssr/NextSSRApolloClient.tsx b/package/src/ssr/NextSSRApolloClient.tsx
index 5426f7a1..be33d179 100644
--- a/package/src/ssr/NextSSRApolloClient.tsx
+++ b/package/src/ssr/NextSSRApolloClient.tsx
@@ -9,7 +9,6 @@ import {
   DocumentTransform,
 } from "@apollo/client";
 import { print } from "graphql";
-// import { canUseWeakMap } from "@apollo/client/utilities";
 import { canonicalStringify } from "@apollo/client/cache";
 import { RehydrationContextValue } from "./types";
 import { registerLateInitializingQueue } from "./lateInitializingQueue";
@@ -18,15 +17,6 @@ import {
   ApolloResultCache,
 } from "./ApolloRehydrateSymbols";
 
-// uBQ: we want to skip it in the browser until data comes in
-// the first time it renders on the client, if we don't yet have data,
-// we tell it to wait for the existing request
-// watchQuery:
-//    watchQuery on the server doesn't do anything new except transport to the
-//    client which query + variables are in flight
-// on the client - the data comes in, creates the fake in-flight observable to
-// force the cache to wait for the pending request
-
 const seenDocuments = new Map<string, DocumentNode>();
 
 export class NextSSRApolloClient<
@@ -43,6 +33,8 @@ export class NextSSRApolloClient<
   constructor(options: ApolloClientOptions<TCacheShape>) {
     super({
       ...options,
+      // TODO: the memoization in `documentTransform` can be removed once
+      // https://github.com/apollographql/apollo-client/pull/10968 is merged.
       documentTransform: new DocumentTransform((document) => {
         const stringified = print(document);
         if (seenDocuments.has(stringified)) {
@@ -56,7 +48,10 @@ export class NextSSRApolloClient<
 
     this.registerWindowHook();
   }
-  private resolveFakeQueries = new Map<string, (result: FetchResult) => void>();
+  private resolveFakeQueries = new Map<
+    string,
+    [(result: FetchResult) => void, (reason: any) => void]
+  >();
 
   private identifyUniqueQuery(options: {
     query: DocumentNode;
@@ -66,8 +61,8 @@ export class NextSSRApolloClient<
       options.query
     );
 
-    // doc transforms will add __typename but won't remove directives
-    // need to pass the result of transformed document into
+    // Calling `transformDocument` will add __typename but won't remove client
+    // directives, so we need to get the `serverQuery`.
     const { serverQuery } =
       this["queryManager"].getDocumentInfo(transformedDocument);
 
@@ -84,8 +79,6 @@ export class NextSSRApolloClient<
         registerLateInitializingQueue(
           ApolloBackgroundQueryTransport,
           (options) => {
-            console.log("cb 1");
-
             const { query, varJson, cacheKey } =
               this.identifyUniqueQuery(options);
 
@@ -99,21 +92,39 @@ export class NextSSRApolloClient<
             );
 
             if (!byVariables.has(varJson)) {
-              console.log("adding myself");
-              const promise = new Promise<FetchResult>((r) => {
-                this.resolveFakeQueries.set(cacheKey, r);
+              const promise = new Promise<FetchResult>((resolve, reject) => {
+                this.resolveFakeQueries.set(cacheKey, [resolve, reject]);
               });
 
               byVariables.set(
                 varJson,
                 new Observable<FetchResult>((observer) => {
-                  promise.then((result) => {
-                    console.log("resolving fake query with result", result);
-                    observer.next(result);
-                    observer.complete();
-                  });
+                  promise
+                    .then((result) => {
+                      observer.next(result);
+                      observer.complete();
+                    })
+                    .catch((err) => {
+                      observer.error(err);
+                    });
                 })
               );
+
+              const cleanupCancelFn = () =>
+                this["queryManager"].fetchCancelFns.delete(cacheKey);
+
+              const [_, reject] = this.resolveFakeQueries.get(cacheKey) ?? [];
+
+              this["queryManager"].fetchCancelFns.set(
+                cacheKey,
+                (reason: unknown) => {
+                  cleanupCancelFn();
+                  if (reject) {
+                    this.resolveFakeQueries.delete(cacheKey);
+                    reject(reason);
+                  }
+                }
+              );
             }
           }
         );
@@ -121,12 +132,10 @@ export class NextSSRApolloClient<
 
       if (Array.isArray(window[ApolloResultCache] || [])) {
         registerLateInitializingQueue(ApolloResultCache, (data) => {
-          console.log("cb 2", data);
-
           const { cacheKey } = this.identifyUniqueQuery(data);
-          const resolve = this.resolveFakeQueries.get(cacheKey);
+          const [resolve] = this.resolveFakeQueries.get(cacheKey) ?? [];
+
           if (resolve) {
-            console.log("resolving", data);
             resolve({
               data: data.result,
             });
@@ -137,25 +146,14 @@ export class NextSSRApolloClient<
     }
   }
 
-  // cache has the queue of incoming results
-  // instead of calling this.write in the nextssrinmemorycache, we'd resolve the
-  // fake observable with the real result data
   watchQuery<
     T = any,
     TVariables extends OperationVariables = OperationVariables
   >(options: WatchQueryOptions<TVariables, T>) {
-    console.log("watchQuery, before", [
-      ...this["queryManager"].inFlightLinkObservables.entries(),
-    ]);
     if (typeof window == "undefined") {
-      console.log("watchQuery server");
       this.rehydrationContext.incomingBackgroundQueries.push(options);
     }
-
     const result = super.watchQuery(options);
-    console.log("watchQuery, after", [
-      ...this["queryManager"].inFlightLinkObservables.entries(),
-    ]);
     return result;
   }
 
diff --git a/package/src/ssr/NextSSRInMemoryCache.tsx b/package/src/ssr/NextSSRInMemoryCache.tsx
index 837877a6..9d505c77 100644
--- a/package/src/ssr/NextSSRInMemoryCache.tsx
+++ b/package/src/ssr/NextSSRInMemoryCache.tsx
@@ -19,7 +19,6 @@ export class NextSSRInMemoryCache extends InMemoryCache {
   }
 
   write(options: Cache.WriteOptions<any, any>): Reference | undefined {
-    console.log("write");
     if (typeof window == "undefined") {
       this.rehydrationContext.incomingResults.push(options);
     }

From b9ffce2fe6950828f5772ba5e91a37d88e26cb37 Mon Sep 17 00:00:00 2001
From: alessia <alessia@apollographql.com>
Date: Wed, 14 Jun 2023 11:49:34 -0400
Subject: [PATCH 10/21] chore: update examples, error pages, README.md

---
 .../app-dir-experiments/app/ssr/ApolloWrapper.tsx | 10 +++-------
 .../hack-the-supergraph-ssr/app/ApolloWrapper.tsx | 10 +++-------
 examples/hack-the-supergraph-ssr/app/error.tsx    | 15 ++++++---------
 examples/polls-demo/app/cc/error.tsx              | 10 ++++++++--
 examples/polls-demo/app/cc/poll-cc.tsx            | 10 +++-------
 package/.eslintrc.js                              |  6 ++++++
 package/README.md                                 | 11 ++++++++---
 7 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/examples/app-dir-experiments/app/ssr/ApolloWrapper.tsx b/examples/app-dir-experiments/app/ssr/ApolloWrapper.tsx
index cb52c1f9..725586ef 100644
--- a/examples/app-dir-experiments/app/ssr/ApolloWrapper.tsx
+++ b/examples/app-dir-experiments/app/ssr/ApolloWrapper.tsx
@@ -1,14 +1,10 @@
 "use client";
 
-import {
-  ApolloClient,
-  ApolloLink,
-  HttpLink,
-  SuspenseCache,
-} from "@apollo/client";
+import { ApolloLink, HttpLink, SuspenseCache } from "@apollo/client";
 import {
   ApolloNextAppProvider,
   NextSSRInMemoryCache,
+  NextSSRApolloClient,
   SSRMultipartLink,
 } from "@apollo/experimental-nextjs-app-support/ssr";
 import { setVerbosity } from "ts-invariant";
@@ -21,7 +17,7 @@ function makeClient() {
     fetchOptions: { cache: "no-store" },
   });
 
-  return new ApolloClient({
+  return new NextSSRApolloClient({
     cache: new NextSSRInMemoryCache(),
     link:
       typeof window === "undefined"
diff --git a/examples/hack-the-supergraph-ssr/app/ApolloWrapper.tsx b/examples/hack-the-supergraph-ssr/app/ApolloWrapper.tsx
index 9eaa84a9..cbf84ec0 100644
--- a/examples/hack-the-supergraph-ssr/app/ApolloWrapper.tsx
+++ b/examples/hack-the-supergraph-ssr/app/ApolloWrapper.tsx
@@ -1,15 +1,11 @@
 "use client";
 import React from "react";
-import {
-  ApolloClient,
-  ApolloLink,
-  HttpLink,
-  SuspenseCache,
-} from "@apollo/client";
+import { ApolloLink, HttpLink, SuspenseCache } from "@apollo/client";
 import clientCookies from "js-cookie";
 import {
   ApolloNextAppProvider,
   NextSSRInMemoryCache,
+  NextSSRApolloClient,
   SSRMultipartLink,
 } from "@apollo/experimental-nextjs-app-support/ssr";
 import { setVerbosity } from "ts-invariant";
@@ -69,7 +65,7 @@ export function ApolloWrapper({
           ])
         : ApolloLink.from([delayLink, httpLink]);
 
-    return new ApolloClient({
+    return new NextSSRApolloClient({
       cache: new NextSSRInMemoryCache(),
       link,
     });
diff --git a/examples/hack-the-supergraph-ssr/app/error.tsx b/examples/hack-the-supergraph-ssr/app/error.tsx
index 686d12fa..1b836d61 100644
--- a/examples/hack-the-supergraph-ssr/app/error.tsx
+++ b/examples/hack-the-supergraph-ssr/app/error.tsx
@@ -4,16 +4,14 @@ import React from "react";
 import { Box, Heading, Text, VStack } from "@chakra-ui/react";
 
 export const Error = ({
-  children,
-  code,
   error,
-}: React.PropsWithChildren<{
-  code?: string;
-  error: { toString(): string };
-}>) => (
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) => (
   <VStack spacing="12">
     <VStack textAlign="center">
-      <Heading size="4xl">{code ?? "Unknown Error"}</Heading>
       <Heading fontSize="3xl">Houston, something went wrong on our end</Heading>
       <Text>Please review the information below for more details.</Text>
     </VStack>
@@ -25,10 +23,9 @@ export const Error = ({
         borderRadius="8px"
         borderColor="brand.light"
       >
-        <Text color="brand.error">{error.toString()}</Text>
+        <Text color="brand.error">Error: {error.message}</Text>
       </Box>
     )}
-    {children}
   </VStack>
 );
 
diff --git a/examples/polls-demo/app/cc/error.tsx b/examples/polls-demo/app/cc/error.tsx
index ba4be923..775d0917 100644
--- a/examples/polls-demo/app/cc/error.tsx
+++ b/examples/polls-demo/app/cc/error.tsx
@@ -1,5 +1,11 @@
 "use client";
 
-export default function Error(error: { toString(): string }) {
-  return <p>Error: {error.toString()}</p>;
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  return <p>Error: {error.message}</p>;
 }
diff --git a/examples/polls-demo/app/cc/poll-cc.tsx b/examples/polls-demo/app/cc/poll-cc.tsx
index ff63b81d..92708c26 100644
--- a/examples/polls-demo/app/cc/poll-cc.tsx
+++ b/examples/polls-demo/app/cc/poll-cc.tsx
@@ -22,12 +22,9 @@ export const Poll = () => {
   });
 
   return (
-    <>
-      <h1>Testing 1234...</h1>
-      <Suspense fallback={<>Loading...</>}>
-        <PollWrapper queryRef={queryRef} />
-      </Suspense>
-    </>
+    <Suspense fallback={<>Loading...</>}>
+      <PollWrapper queryRef={queryRef} />
+    </Suspense>
   );
 };
 
@@ -37,7 +34,6 @@ const PollWrapper = ({
   queryRef: QueryReference<GetPollQuery>;
 }) => {
   const { data } = useReadQuery(queryRef);
-  // console.log({ data });
   const [showResults, setShowResults] = useState(false);
   const [mutate, { loading: mutationLoading }] =
     useMutation(AnswerPollDocument);
diff --git a/package/.eslintrc.js b/package/.eslintrc.js
index 505b533b..a66876e0 100644
--- a/package/.eslintrc.js
+++ b/package/.eslintrc.js
@@ -20,5 +20,11 @@ module.exports = {
   rules: {
     "@typescript-eslint/no-explicit-any": "off",
     "react/prop-types": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        varsIgnorePattern: "^_",
+      },
+    ],
   },
 };
diff --git a/package/README.md b/package/README.md
index 78a43e92..a769d0a1 100644
--- a/package/README.md
+++ b/package/README.md
@@ -82,7 +82,6 @@ First, create a new file `app/ApolloWrapper.js`:
 // ^ this file needs the "use client" pragma
 
 import {
-  ApolloClient,
   ApolloLink,
   HttpLink,
   SuspenseCache,
@@ -90,6 +89,7 @@ import {
 import {
   ApolloNextAppProvider,
   NextSSRInMemoryCache,
+  NextSSRApolloClient,
   SSRMultipartLink,
 } from "@apollo/experimental-nextjs-app-support/ssr";
 
@@ -103,7 +103,7 @@ function makeClient() {
     fetchOptions: { cache: "no-store" },
   });
 
-  return new ApolloClient({
+  return new NextSSRApolloClient({
     // use the `NextSSRInMemoryCache`, not the normal `InMemoryCache`
     cache: new NextSSRInMemoryCache(),
     link:
@@ -164,7 +164,12 @@ export default function RootLayout({
 > ☝️ This will work even if your layout is a React Server Component and will also allow the children of the layout to be React Server Components.  
 > It just makes sure that all Client Components will have access to the same Apollo Client instance, shared through the `ApolloNextAppProvider`.
 
-Now you can use the hooks `useQuery`, `useSuspenseQuery`, `useFragment`, and `useApolloClient` from `"@apollo/experimental-nextjs-app-support/ssr"` in your Client components like you are used to.
+You can import the following Apollo Client hooks from `"@apollo/experimental-nextjs-app-support/ssr"` in your client components (make sure you are not importing these hooks from `@apollo/client` as this package wraps and re-exports them to support streaming SSR):
+- `useQuery`
+- `useSuspenseQuery`
+- `useBackgroundQuery`
+- `useReadQuery`
+- `useFragment`
 
 If you want to make the most of the streaming SSR features offered by React & the Next.js App Router, consider using the [`useSuspenseQuery`](https://www.apollographql.com/docs/react/api/react/hooks-experimental/#using-usesuspensequery_experimental) and [`useFragment`](https://www.apollographql.com/docs/react/api/react/hooks-experimental/#using-usefragment_experimental) hooks.
 

From a0c75a8d7ff3b432dcdb234e3b07bd95baea1990 Mon Sep 17 00:00:00 2001
From: alessia <alessia@apollographql.com>
Date: Thu, 15 Jun 2023 09:42:58 -0400
Subject: [PATCH 11/21] chore: use beta 3 everywhere

---
 examples/app-dir-experiments/package.json     |  2 +-
 examples/hack-the-supergraph-ssr/package.json |  2 +-
 examples/polls-demo/package.json              |  2 +-
 package/package.json                          |  4 ++--
 package/src/ssr/ApolloRehydrateSymbols.tsx    |  1 -
 yarn.lock                                     | 18 +++++++++---------
 6 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/examples/app-dir-experiments/package.json b/examples/app-dir-experiments/package.json
index af4cbbbf..1e0c24d6 100644
--- a/examples/app-dir-experiments/package.json
+++ b/examples/app-dir-experiments/package.json
@@ -10,7 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@apollo/client": ">=3.8.0-beta.2",
+    "@apollo/client": ">=3.8.0-beta.3",
     "@apollo/experimental-nextjs-app-support": "workspace:^",
     "@apollo/server": "^4.6.0",
     "@as-integrations/next": "^1.3.0",
diff --git a/examples/hack-the-supergraph-ssr/package.json b/examples/hack-the-supergraph-ssr/package.json
index 80227a09..9723d31e 100644
--- a/examples/hack-the-supergraph-ssr/package.json
+++ b/examples/hack-the-supergraph-ssr/package.json
@@ -10,7 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@apollo/client": ">=3.8.0-beta.2",
+    "@apollo/client": ">=3.8.0-beta.3",
     "@apollo/experimental-nextjs-app-support": "workspace:^",
     "@apollo/space-kit": "^9.11.0",
     "@chakra-ui/next-js": "^2.1.2",
diff --git a/examples/polls-demo/package.json b/examples/polls-demo/package.json
index bdb8fe38..91290115 100644
--- a/examples/polls-demo/package.json
+++ b/examples/polls-demo/package.json
@@ -12,7 +12,7 @@
     "codegen": "graphql-codegen --config codegen.ts"
   },
   "dependencies": {
-    "@apollo/client": ">=3.8.0-beta.2",
+    "@apollo/client": ">=3.8.0-beta.3",
     "@apollo/experimental-nextjs-app-support": "workspace:^",
     "@apollo/server": "^4.7.0",
     "@as-integrations/next": "^1.3.0",
diff --git a/package/package.json b/package/package.json
index c32148d1..30b2f008 100644
--- a/package/package.json
+++ b/package/package.json
@@ -44,7 +44,7 @@
   },
   "packageManager": "yarn@3.5.0",
   "devDependencies": {
-    "@apollo/client": ">=3.8.0-beta.2",
+    "@apollo/client": ">=3.8.0-beta.3",
     "@total-typescript/shoehorn": "^0.1.0",
     "@tsconfig/recommended": "^1.0.1",
     "@typescript-eslint/eslint-plugin": "latest",
@@ -59,7 +59,7 @@
     "vitest": "^0.30.1"
   },
   "peerDependencies": {
-    "@apollo/client": ">=3.8.0-beta.2",
+    "@apollo/client": ">=3.8.0-beta.3",
     "next": "^13.4.1",
     "react": "^18"
   },
diff --git a/package/src/ssr/ApolloRehydrateSymbols.tsx b/package/src/ssr/ApolloRehydrateSymbols.tsx
index 9414ccde..fd91fe1c 100644
--- a/package/src/ssr/ApolloRehydrateSymbols.tsx
+++ b/package/src/ssr/ApolloRehydrateSymbols.tsx
@@ -11,7 +11,6 @@ declare global {
     [ApolloRehydrationCache]?: RehydrationCache;
     [ApolloResultCache]?: ResultsCache;
     [ApolloSSRDataTransport]?: DataTransport<SuperJSONResult>;
-    // TODO: types
     [ApolloBackgroundQueryTransport]?: BackgroundQueriesCache;
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 12ba4542..4b08e096 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -31,9 +31,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@apollo/client@npm:>=3.8.0-beta.2":
-  version: 3.8.0-beta.2
-  resolution: "@apollo/client@npm:3.8.0-beta.2"
+"@apollo/client@npm:>=3.8.0-beta.3":
+  version: 3.8.0-beta.3
+  resolution: "@apollo/client@npm:3.8.0-beta.3"
   dependencies:
     "@graphql-typed-document-node/core": ^3.1.1
     "@wry/context": ^0.7.3
@@ -63,7 +63,7 @@ __metadata:
       optional: true
     subscriptions-transport-ws:
       optional: true
-  checksum: 2af797e1ac92ce5fcb09b8da4515fee3f4bbbbc3975475750a0de13841d27a02d60ff4e0be000bb955f15cf0ca116972f9c0f71696c6672c8b4b8b9f9a2446ed
+  checksum: 12a87b529ca7aeb2ddf60a46553cf2fda14b940fa1e1dee8d6cb43fe77827becd94c823dd824126453347cfbb8bd8542f77527b83884a32d52bc206886126e38
   languageName: node
   linkType: hard
 
@@ -71,7 +71,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@apollo/experimental-nextjs-app-support@workspace:package"
   dependencies:
-    "@apollo/client": ">=3.8.0-beta.2"
+    "@apollo/client": ">=3.8.0-beta.3"
     "@total-typescript/shoehorn": ^0.1.0
     "@tsconfig/recommended": ^1.0.1
     "@typescript-eslint/eslint-plugin": latest
@@ -87,7 +87,7 @@ __metadata:
     typescript: ^5.0.2
     vitest: ^0.30.1
   peerDependencies:
-    "@apollo/client": ">=3.8.0-beta.2"
+    "@apollo/client": ">=3.8.0-beta.3"
     next: ^13.4.1
     react: ^18
   languageName: unknown
@@ -4753,7 +4753,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "apollo-next-13-demo@workspace:examples/polls-demo"
   dependencies:
-    "@apollo/client": ">=3.8.0-beta.2"
+    "@apollo/client": ">=3.8.0-beta.3"
     "@apollo/experimental-nextjs-app-support": "workspace:^"
     "@apollo/server": ^4.7.0
     "@as-integrations/next": ^1.3.0
@@ -4787,7 +4787,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "app-dir@workspace:examples/app-dir-experiments"
   dependencies:
-    "@apollo/client": ">=3.8.0-beta.2"
+    "@apollo/client": ">=3.8.0-beta.3"
     "@apollo/experimental-nextjs-app-support": "workspace:^"
     "@apollo/server": ^4.6.0
     "@as-integrations/next": ^1.3.0
@@ -7614,7 +7614,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "hack-the-supergraph-ssr@workspace:examples/hack-the-supergraph-ssr"
   dependencies:
-    "@apollo/client": ">=3.8.0-beta.2"
+    "@apollo/client": ">=3.8.0-beta.3"
     "@apollo/experimental-nextjs-app-support": "workspace:^"
     "@apollo/space-kit": ^9.11.0
     "@chakra-ui/next-js": ^2.1.2

From 7f9c7af0507f68ec5db082804d76af3dfaec9cff Mon Sep 17 00:00:00 2001
From: alessia <alessia@apollographql.com>
Date: Thu, 15 Jun 2023 09:59:17 -0400
Subject: [PATCH 12/21] chore: fix double import and add ts-ignores for now

---
 examples/polls-demo/app/cc/apollo-wrapper.tsx | 3 ---
 package/src/ssr/hooks.ts                      | 2 ++
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/examples/polls-demo/app/cc/apollo-wrapper.tsx b/examples/polls-demo/app/cc/apollo-wrapper.tsx
index 981c8146..ba005d3f 100644
--- a/examples/polls-demo/app/cc/apollo-wrapper.tsx
+++ b/examples/polls-demo/app/cc/apollo-wrapper.tsx
@@ -21,9 +21,6 @@ if (process.env.NODE_ENV === "development") {
   loadErrorMessages();
 }
 
-import { setVerbosity } from "ts-invariant";
-setVerbosity("debug");
-
 function makeClient() {
   const httpLink = new HttpLink({
     uri: "https://fragrant-shadow-9470.fly.dev/",
diff --git a/package/src/ssr/hooks.ts b/package/src/ssr/hooks.ts
index a939f52c..0c4d4257 100644
--- a/package/src/ssr/hooks.ts
+++ b/package/src/ssr/hooks.ts
@@ -25,8 +25,10 @@ export const useSuspenseQuery = wrap(orig_useSuspenseQuery, [
   "networkStatus",
 ]);
 export const useReadQuery = wrap(orig_useReadQuery, ["data", "networkStatus"]);
+// @ts-ignore
 export const useBackgroundQuery: typeof orig_useBackgroundQuery = (...args) => {
   useRehydrationContext();
+  // @ts-ignore
   return orig_useBackgroundQuery(...args);
 };
 

From 789fc54b1cd87f8aa0a14eb924097aab44b56ba2 Mon Sep 17 00:00:00 2001
From: alessia <alessia@apollographql.com>
Date: Fri, 16 Jun 2023 11:29:23 -0400
Subject: [PATCH 13/21] fix: review feedback

---
 examples/polls-demo/app/cc/apollo-wrapper.tsx |  7 +----
 examples/polls-demo/app/cc/page.tsx           |  4 +--
 examples/polls-demo/app/cc/poll-cc.tsx        | 10 +++----
 package/src/ssr/NextSSRApolloClient.tsx       | 27 ++++++++++---------
 package/src/ssr/RehydrationContext.tsx        | 12 +++++++--
 5 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/examples/polls-demo/app/cc/apollo-wrapper.tsx b/examples/polls-demo/app/cc/apollo-wrapper.tsx
index ba005d3f..59fcb8c0 100644
--- a/examples/polls-demo/app/cc/apollo-wrapper.tsx
+++ b/examples/polls-demo/app/cc/apollo-wrapper.tsx
@@ -1,11 +1,6 @@
 "use client";
 
-import {
-  ApolloLink,
-  HttpLink,
-  SuspenseCache,
-  InMemoryCache,
-} from "@apollo/client";
+import { ApolloLink, HttpLink, SuspenseCache } from "@apollo/client";
 import {
   NextSSRApolloClient,
   ApolloNextAppProvider,
diff --git a/examples/polls-demo/app/cc/page.tsx b/examples/polls-demo/app/cc/page.tsx
index b295992c..6da0b3e7 100644
--- a/examples/polls-demo/app/cc/page.tsx
+++ b/examples/polls-demo/app/cc/page.tsx
@@ -1,7 +1,7 @@
-import { Poll } from "./poll-cc";
+import { PollWrapper } from "./poll-cc";
 
 export const dynamic = "force-dynamic";
 
 export default async function Home() {
-  return <Poll />;
+  return <PollWrapper />;
 }
diff --git a/examples/polls-demo/app/cc/poll-cc.tsx b/examples/polls-demo/app/cc/poll-cc.tsx
index 92708c26..0d669475 100644
--- a/examples/polls-demo/app/cc/poll-cc.tsx
+++ b/examples/polls-demo/app/cc/poll-cc.tsx
@@ -16,23 +16,19 @@ import {
   GetPollQuery,
 } from "@/components/poll/documents.generated";
 
-export const Poll = () => {
+export const PollWrapper = () => {
   const [queryRef] = useBackgroundQuery(GetPollDocument, {
     variables: { id: "1", delay: 0 },
   });
 
   return (
     <Suspense fallback={<>Loading...</>}>
-      <PollWrapper queryRef={queryRef} />
+      <Poll queryRef={queryRef} />
     </Suspense>
   );
 };
 
-const PollWrapper = ({
-  queryRef,
-}: {
-  queryRef: QueryReference<GetPollQuery>;
-}) => {
+const Poll = ({ queryRef }: { queryRef: QueryReference<GetPollQuery> }) => {
   const { data } = useReadQuery(queryRef);
   const [showResults, setShowResults] = useState(false);
   const [mutate, { loading: mutationLoading }] =
diff --git a/package/src/ssr/NextSSRApolloClient.tsx b/package/src/ssr/NextSSRApolloClient.tsx
index be33d179..e6b648bd 100644
--- a/package/src/ssr/NextSSRApolloClient.tsx
+++ b/package/src/ssr/NextSSRApolloClient.tsx
@@ -8,6 +8,7 @@ import {
   DocumentNode,
   DocumentTransform,
 } from "@apollo/client";
+import type { QueryManager } from "@apollo/client/core/QueryManager";
 import { print } from "graphql";
 import { canonicalStringify } from "@apollo/client/cache";
 import { RehydrationContextValue } from "./types";
@@ -19,6 +20,12 @@ import {
 
 const seenDocuments = new Map<string, DocumentNode>();
 
+function getQueryManager<TCacheShape>(
+  client: ApolloClient<unknown>
+): QueryManager<TCacheShape> {
+  return client["queryManager"];
+}
+
 export class NextSSRApolloClient<
   TCacheShape
 > extends ApolloClient<TCacheShape> {
@@ -60,11 +67,10 @@ export class NextSSRApolloClient<
     const transformedDocument = this.documentTransform.transformDocument(
       options.query
     );
-
+    const queryManager = getQueryManager<TCacheShape>(this);
     // Calling `transformDocument` will add __typename but won't remove client
     // directives, so we need to get the `serverQuery`.
-    const { serverQuery } =
-      this["queryManager"].getDocumentInfo(transformedDocument);
+    const { serverQuery } = queryManager.getDocumentInfo(transformedDocument);
 
     const canonicalVariables = canonicalStringify(options.variables);
 
@@ -82,14 +88,11 @@ export class NextSSRApolloClient<
             const { query, varJson, cacheKey } =
               this.identifyUniqueQuery(options);
 
+            const queryManager = getQueryManager<TCacheShape>(this);
             const byVariables =
-              this["queryManager"].inFlightLinkObservables.get(query) ||
-              new Map();
+              queryManager["inFlightLinkObservables"].get(query) || new Map();
 
-            this["queryManager"].inFlightLinkObservables.set(
-              query,
-              byVariables
-            );
+            queryManager["inFlightLinkObservables"].set(query, byVariables);
 
             if (!byVariables.has(varJson)) {
               const promise = new Promise<FetchResult>((resolve, reject) => {
@@ -109,13 +112,13 @@ export class NextSSRApolloClient<
                     });
                 })
               );
-
+              const queryManager = getQueryManager<TCacheShape>(this);
               const cleanupCancelFn = () =>
-                this["queryManager"].fetchCancelFns.delete(cacheKey);
+                queryManager["fetchCancelFns"].delete(cacheKey);
 
               const [_, reject] = this.resolveFakeQueries.get(cacheKey) ?? [];
 
-              this["queryManager"].fetchCancelFns.set(
+              queryManager["fetchCancelFns"].set(
                 cacheKey,
                 (reason: unknown) => {
                   cleanupCancelFn();
diff --git a/package/src/ssr/RehydrationContext.tsx b/package/src/ssr/RehydrationContext.tsx
index 225c0bbf..0ad93f14 100644
--- a/package/src/ssr/RehydrationContext.tsx
+++ b/package/src/ssr/RehydrationContext.tsx
@@ -22,10 +22,18 @@ export const RehydrationContextProvider = ({
     }
     if (client instanceof NextSSRApolloClient) {
       client.setRehydrationContext(rehydrationContext.current);
-    } // else error?
+    } else {
+      throw new Error(
+        "When using Next SSR, you must use the `NextSSRApolloClient`"
+      );
+    }
     if (client.cache instanceof NextSSRInMemoryCache) {
       client.cache.setRehydrationContext(rehydrationContext.current);
-    } // else error?
+    } else {
+      throw new Error(
+        "When using Next SSR, you must use the `NextSSRInMemoryCache`"
+      );
+    }
   } else {
     registerDataTransport();
   }

From 9a74dc607f20aa1239cfdeee31f0e0eb157b5e43 Mon Sep 17 00:00:00 2001
From: alessia <alessia@apollographql.com>
Date: Wed, 21 Jun 2023 16:03:07 -0400
Subject: [PATCH 14/21] fixes: use printedServerQuery to lookup in flight
 observable, call cache.write after resolve to avoid scenario where promise
 resolves without a query subscribing to the promise

---
 package/src/ssr/NextSSRApolloClient.tsx | 35 +++++++++++--------------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/package/src/ssr/NextSSRApolloClient.tsx b/package/src/ssr/NextSSRApolloClient.tsx
index e6b648bd..151c95d2 100644
--- a/package/src/ssr/NextSSRApolloClient.tsx
+++ b/package/src/ssr/NextSSRApolloClient.tsx
@@ -6,7 +6,6 @@ import {
   Observable,
   FetchResult,
   DocumentNode,
-  DocumentTransform,
 } from "@apollo/client";
 import type { QueryManager } from "@apollo/client/core/QueryManager";
 import { print } from "graphql";
@@ -18,8 +17,6 @@ import {
   ApolloResultCache,
 } from "./ApolloRehydrateSymbols";
 
-const seenDocuments = new Map<string, DocumentNode>();
-
 function getQueryManager<TCacheShape>(
   client: ApolloClient<unknown>
 ): QueryManager<TCacheShape> {
@@ -38,23 +35,11 @@ export class NextSSRApolloClient<
   };
 
   constructor(options: ApolloClientOptions<TCacheShape>) {
-    super({
-      ...options,
-      // TODO: the memoization in `documentTransform` can be removed once
-      // https://github.com/apollographql/apollo-client/pull/10968 is merged.
-      documentTransform: new DocumentTransform((document) => {
-        const stringified = print(document);
-        if (seenDocuments.has(stringified)) {
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          return seenDocuments.get(stringified)!;
-        }
-        seenDocuments.set(stringified, document);
-        return document;
-      }),
-    });
+    super(options);
 
     this.registerWindowHook();
   }
+
   private resolveFakeQueries = new Map<
     string,
     [(result: FetchResult) => void, (reason: any) => void]
@@ -88,11 +73,18 @@ export class NextSSRApolloClient<
             const { query, varJson, cacheKey } =
               this.identifyUniqueQuery(options);
 
+            if (!query) return;
+            const printedServerQuery = print(query);
             const queryManager = getQueryManager<TCacheShape>(this);
+
             const byVariables =
-              queryManager["inFlightLinkObservables"].get(query) || new Map();
+              queryManager["inFlightLinkObservables"].get(printedServerQuery) ||
+              new Map();
 
-            queryManager["inFlightLinkObservables"].set(query, byVariables);
+            queryManager["inFlightLinkObservables"].set(
+              printedServerQuery,
+              byVariables
+            );
 
             if (!byVariables.has(varJson)) {
               const promise = new Promise<FetchResult>((resolve, reject) => {
@@ -142,6 +134,11 @@ export class NextSSRApolloClient<
             resolve({
               data: data.result,
             });
+            // In order to avoid a scenario where the promise resolves without
+            // a query subscribing to the promise, we immediately call
+            // `cache.write` here.
+            // For more information, see: https://github.com/apollographql/apollo-client-nextjs/pull/38/files/388813a16e2ac5c62408923a1face9ae9417d92a#r1229870523
+            this.cache.write(data);
             this.resolveFakeQueries.delete(cacheKey);
           }
         });

From c49d481ff5c9bdd474c4b61ba65b610162ffe067 Mon Sep 17 00:00:00 2001
From: alessia <alessia@apollographql.com>
Date: Wed, 21 Jun 2023 16:34:49 -0400
Subject: [PATCH 15/21] - Move call to resolveFakeQueries.get inside
 fetchCancelFn. - Refactor `uninitialized` boolean, merge arrays instead.

---
 package/src/ssr/NextSSRApolloClient.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/package/src/ssr/NextSSRApolloClient.tsx b/package/src/ssr/NextSSRApolloClient.tsx
index 151c95d2..abaac106 100644
--- a/package/src/ssr/NextSSRApolloClient.tsx
+++ b/package/src/ssr/NextSSRApolloClient.tsx
@@ -29,9 +29,8 @@ export class NextSSRApolloClient<
   private rehydrationContext: Pick<
     RehydrationContextValue,
     "incomingBackgroundQueries"
-  > & { uninitialized?: boolean } = {
+  > = {
     incomingBackgroundQueries: [],
-    uninitialized: true,
   };
 
   constructor(options: ApolloClientOptions<TCacheShape>) {
@@ -108,12 +107,12 @@ export class NextSSRApolloClient<
               const cleanupCancelFn = () =>
                 queryManager["fetchCancelFns"].delete(cacheKey);
 
-              const [_, reject] = this.resolveFakeQueries.get(cacheKey) ?? [];
-
-              queryManager["fetchCancelFns"].set(
-                cacheKey,
-                (reason: unknown) => {
-                  cleanupCancelFn();
+                
+                queryManager["fetchCancelFns"].set(
+                  cacheKey,
+                  (reason: unknown) => {
+                    cleanupCancelFn();
+                    const [_, reject] = this.resolveFakeQueries.get(cacheKey) ?? [];
                   if (reject) {
                     this.resolveFakeQueries.delete(cacheKey);
                     reject(reason);
@@ -158,12 +157,13 @@ export class NextSSRApolloClient<
   }
 
   setRehydrationContext(rehydrationContext: RehydrationContextValue) {
-    if (this.rehydrationContext.uninitialized) {
+    if (
+      rehydrationContext.incomingBackgroundQueries !==
+      this.rehydrationContext.incomingBackgroundQueries
+    )
       rehydrationContext.incomingBackgroundQueries.push(
-        ...this.rehydrationContext.incomingBackgroundQueries
+        ...this.rehydrationContext.incomingBackgroundQueries.splice(0)
       );
-    }
     this.rehydrationContext = rehydrationContext;
-    this.rehydrationContext.uninitialized = false;
   }
 }

From bfb789dbf73c0fd5162351386fe1148a32dd52bc Mon Sep 17 00:00:00 2001
From: alessia <alessia@apollographql.com>
Date: Wed, 21 Jun 2023 16:38:45 -0400
Subject: [PATCH 16/21] chore: prettier formatting

---
 package/src/ssr/NextSSRApolloClient.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/package/src/ssr/NextSSRApolloClient.tsx b/package/src/ssr/NextSSRApolloClient.tsx
index abaac106..e8f280fd 100644
--- a/package/src/ssr/NextSSRApolloClient.tsx
+++ b/package/src/ssr/NextSSRApolloClient.tsx
@@ -107,12 +107,12 @@ export class NextSSRApolloClient<
               const cleanupCancelFn = () =>
                 queryManager["fetchCancelFns"].delete(cacheKey);
 
-                
-                queryManager["fetchCancelFns"].set(
-                  cacheKey,
-                  (reason: unknown) => {
-                    cleanupCancelFn();
-                    const [_, reject] = this.resolveFakeQueries.get(cacheKey) ?? [];
+              queryManager["fetchCancelFns"].set(
+                cacheKey,
+                (reason: unknown) => {
+                  cleanupCancelFn();
+                  const [_, reject] =
+                    this.resolveFakeQueries.get(cacheKey) ?? [];
                   if (reject) {
                     this.resolveFakeQueries.delete(cacheKey);
                     reject(reason);

From 037c8ba783feaf46f6e81d9fb3259142e9cdb67e Mon Sep 17 00:00:00 2001
From: alessia <alessia@apollographql.com>
Date: Wed, 21 Jun 2023 16:41:03 -0400
Subject: [PATCH 17/21] chore: add ApolloBackgroundQueryTransport to test
 helpers

---
 package/src/ssr/testHelpers.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/package/src/ssr/testHelpers.ts b/package/src/ssr/testHelpers.ts
index 787592e3..22434216 100644
--- a/package/src/ssr/testHelpers.ts
+++ b/package/src/ssr/testHelpers.ts
@@ -6,6 +6,7 @@ import {
   ApolloRehydrationCache,
   ApolloResultCache,
   ApolloSSRDataTransport,
+  ApolloBackgroundQueryTransport,
 } from "./ApolloRehydrateSymbols";
 
 /**
@@ -20,6 +21,7 @@ export function resetNextSSRApolloSingletons() {
   delete window[ApolloRehydrationCache];
   delete window[ApolloResultCache];
   delete window[ApolloSSRDataTransport];
+  delete window[ApolloBackgroundQueryTransport];
   delete window[ApolloClientSingleton];
   delete window[SuspenseCacheSingleton];
 }

From fa82b94c0189747b9463628c1c57b8d74803d1af Mon Sep 17 00:00:00 2001
From: alessia <alessia@apollographql.com>
Date: Wed, 21 Jun 2023 16:55:10 -0400
Subject: [PATCH 18/21] fix: call this.resolveFakeQueries in finally handler

---
 package/src/ssr/NextSSRApolloClient.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package/src/ssr/NextSSRApolloClient.tsx b/package/src/ssr/NextSSRApolloClient.tsx
index e8f280fd..ac88b411 100644
--- a/package/src/ssr/NextSSRApolloClient.tsx
+++ b/package/src/ssr/NextSSRApolloClient.tsx
@@ -100,6 +100,8 @@ export class NextSSRApolloClient<
                     })
                     .catch((err) => {
                       observer.error(err);
+                    }).finally(() => {
+                      this.resolveFakeQueries.delete(cacheKey);
                     });
                 })
               );
@@ -114,7 +116,6 @@ export class NextSSRApolloClient<
                   const [_, reject] =
                     this.resolveFakeQueries.get(cacheKey) ?? [];
                   if (reject) {
-                    this.resolveFakeQueries.delete(cacheKey);
                     reject(reason);
                   }
                 }
@@ -138,7 +139,6 @@ export class NextSSRApolloClient<
             // `cache.write` here.
             // For more information, see: https://github.com/apollographql/apollo-client-nextjs/pull/38/files/388813a16e2ac5c62408923a1face9ae9417d92a#r1229870523
             this.cache.write(data);
-            this.resolveFakeQueries.delete(cacheKey);
           }
         });
       }

From ed7894794abb19da740374d43410e8c84a0d0818 Mon Sep 17 00:00:00 2001
From: alessia <alessia@apollographql.com>
Date: Fri, 23 Jun 2023 10:41:02 -0400
Subject: [PATCH 19/21] chore: use beta 4

---
 examples/app-dir-experiments/package.json     |  2 +-
 examples/hack-the-supergraph-ssr/package.json |  2 +-
 examples/polls-demo/package.json              |  2 +-
 package/package.json                          |  4 ++--
 yarn.lock                                     | 18 +++++++++---------
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/examples/app-dir-experiments/package.json b/examples/app-dir-experiments/package.json
index 1e0c24d6..d9777b84 100644
--- a/examples/app-dir-experiments/package.json
+++ b/examples/app-dir-experiments/package.json
@@ -10,7 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@apollo/client": ">=3.8.0-beta.3",
+    "@apollo/client": ">=3.8.0-beta.4",
     "@apollo/experimental-nextjs-app-support": "workspace:^",
     "@apollo/server": "^4.6.0",
     "@as-integrations/next": "^1.3.0",
diff --git a/examples/hack-the-supergraph-ssr/package.json b/examples/hack-the-supergraph-ssr/package.json
index 9723d31e..0c9326bc 100644
--- a/examples/hack-the-supergraph-ssr/package.json
+++ b/examples/hack-the-supergraph-ssr/package.json
@@ -10,7 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@apollo/client": ">=3.8.0-beta.3",
+    "@apollo/client": ">=3.8.0-beta.4",
     "@apollo/experimental-nextjs-app-support": "workspace:^",
     "@apollo/space-kit": "^9.11.0",
     "@chakra-ui/next-js": "^2.1.2",
diff --git a/examples/polls-demo/package.json b/examples/polls-demo/package.json
index 91290115..bef66cd3 100644
--- a/examples/polls-demo/package.json
+++ b/examples/polls-demo/package.json
@@ -12,7 +12,7 @@
     "codegen": "graphql-codegen --config codegen.ts"
   },
   "dependencies": {
-    "@apollo/client": ">=3.8.0-beta.3",
+    "@apollo/client": ">=3.8.0-beta.4",
     "@apollo/experimental-nextjs-app-support": "workspace:^",
     "@apollo/server": "^4.7.0",
     "@as-integrations/next": "^1.3.0",
diff --git a/package/package.json b/package/package.json
index bffb434d..afbbba18 100644
--- a/package/package.json
+++ b/package/package.json
@@ -44,7 +44,7 @@
   },
   "packageManager": "yarn@3.5.0",
   "devDependencies": {
-    "@apollo/client": ">=3.8.0-beta.3",
+    "@apollo/client": ">=3.8.0-beta.4",
     "@total-typescript/shoehorn": "^0.1.0",
     "@tsconfig/recommended": "^1.0.1",
     "@typescript-eslint/eslint-plugin": "latest",
@@ -59,7 +59,7 @@
     "vitest": "^0.30.1"
   },
   "peerDependencies": {
-    "@apollo/client": ">=3.8.0-beta.3",
+    "@apollo/client": ">=3.8.0-beta.4",
     "next": "^13.4.1",
     "react": "^18"
   },
diff --git a/yarn.lock b/yarn.lock
index 4b08e096..d256403b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -31,9 +31,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@apollo/client@npm:>=3.8.0-beta.3":
-  version: 3.8.0-beta.3
-  resolution: "@apollo/client@npm:3.8.0-beta.3"
+"@apollo/client@npm:>=3.8.0-beta.4":
+  version: 3.8.0-beta.4
+  resolution: "@apollo/client@npm:3.8.0-beta.4"
   dependencies:
     "@graphql-typed-document-node/core": ^3.1.1
     "@wry/context": ^0.7.3
@@ -63,7 +63,7 @@ __metadata:
       optional: true
     subscriptions-transport-ws:
       optional: true
-  checksum: 12a87b529ca7aeb2ddf60a46553cf2fda14b940fa1e1dee8d6cb43fe77827becd94c823dd824126453347cfbb8bd8542f77527b83884a32d52bc206886126e38
+  checksum: 37f0cb2c195096221f979095c09bc3e60866ac2476cedfebeb856c908e603f9ba25c812ca4e5321d5f985ad48456c95d677ed94530aedaf8260546956dd86cec
   languageName: node
   linkType: hard
 
@@ -71,7 +71,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@apollo/experimental-nextjs-app-support@workspace:package"
   dependencies:
-    "@apollo/client": ">=3.8.0-beta.3"
+    "@apollo/client": ">=3.8.0-beta.4"
     "@total-typescript/shoehorn": ^0.1.0
     "@tsconfig/recommended": ^1.0.1
     "@typescript-eslint/eslint-plugin": latest
@@ -87,7 +87,7 @@ __metadata:
     typescript: ^5.0.2
     vitest: ^0.30.1
   peerDependencies:
-    "@apollo/client": ">=3.8.0-beta.3"
+    "@apollo/client": ">=3.8.0-beta.4"
     next: ^13.4.1
     react: ^18
   languageName: unknown
@@ -4753,7 +4753,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "apollo-next-13-demo@workspace:examples/polls-demo"
   dependencies:
-    "@apollo/client": ">=3.8.0-beta.3"
+    "@apollo/client": ">=3.8.0-beta.4"
     "@apollo/experimental-nextjs-app-support": "workspace:^"
     "@apollo/server": ^4.7.0
     "@as-integrations/next": ^1.3.0
@@ -4787,7 +4787,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "app-dir@workspace:examples/app-dir-experiments"
   dependencies:
-    "@apollo/client": ">=3.8.0-beta.3"
+    "@apollo/client": ">=3.8.0-beta.4"
     "@apollo/experimental-nextjs-app-support": "workspace:^"
     "@apollo/server": ^4.6.0
     "@as-integrations/next": ^1.3.0
@@ -7614,7 +7614,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "hack-the-supergraph-ssr@workspace:examples/hack-the-supergraph-ssr"
   dependencies:
-    "@apollo/client": ">=3.8.0-beta.3"
+    "@apollo/client": ">=3.8.0-beta.4"
     "@apollo/experimental-nextjs-app-support": "workspace:^"
     "@apollo/space-kit": ^9.11.0
     "@chakra-ui/next-js": ^2.1.2

From 867d5812951b586c6c8cc23fba07e82e0dd129bf Mon Sep 17 00:00:00 2001
From: alessia <alessia@apollographql.com>
Date: Fri, 23 Jun 2023 10:41:24 -0400
Subject: [PATCH 20/21] fix: remove ts-ignores in hooks.ts

---
 package/src/ssr/hooks.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/package/src/ssr/hooks.ts b/package/src/ssr/hooks.ts
index 0c4d4257..1852becd 100644
--- a/package/src/ssr/hooks.ts
+++ b/package/src/ssr/hooks.ts
@@ -25,10 +25,9 @@ export const useSuspenseQuery = wrap(orig_useSuspenseQuery, [
   "networkStatus",
 ]);
 export const useReadQuery = wrap(orig_useReadQuery, ["data", "networkStatus"]);
-// @ts-ignore
-export const useBackgroundQuery: typeof orig_useBackgroundQuery = (...args) => {
+
+export const useBackgroundQuery: typeof orig_useBackgroundQuery = (...args: [any, any]) => {
   useRehydrationContext();
-  // @ts-ignore
   return orig_useBackgroundQuery(...args);
 };
 

From 6462b2a8c2f1dfb24a66a34f77944cb1a9436546 Mon Sep 17 00:00:00 2001
From: alessia <alessia@apollographql.com>
Date: Fri, 23 Jun 2023 10:56:01 -0400
Subject: [PATCH 21/21] fix: call cleanupCancelFn in finally block

---
 package/src/ssr/NextSSRApolloClient.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/package/src/ssr/NextSSRApolloClient.tsx b/package/src/ssr/NextSSRApolloClient.tsx
index ac88b411..1158b2c3 100644
--- a/package/src/ssr/NextSSRApolloClient.tsx
+++ b/package/src/ssr/NextSSRApolloClient.tsx
@@ -89,6 +89,8 @@ export class NextSSRApolloClient<
               const promise = new Promise<FetchResult>((resolve, reject) => {
                 this.resolveFakeQueries.set(cacheKey, [resolve, reject]);
               });
+              const cleanupCancelFn = () =>
+                queryManager["fetchCancelFns"].delete(cacheKey);
 
               byVariables.set(
                 varJson,
@@ -100,14 +102,13 @@ export class NextSSRApolloClient<
                     })
                     .catch((err) => {
                       observer.error(err);
-                    }).finally(() => {
+                    })
+                    .finally(() => {
                       this.resolveFakeQueries.delete(cacheKey);
+                      cleanupCancelFn();
                     });
                 })
               );
-              const queryManager = getQueryManager<TCacheShape>(this);
-              const cleanupCancelFn = () =>
-                queryManager["fetchCancelFns"].delete(cacheKey);
 
               queryManager["fetchCancelFns"].set(
                 cacheKey,