RSC preloading mechanism prototype

packages/client-react-streaming/src/PreloadQuery.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+import { SimulatePreloadedQuery } from "./index.cc.js";
+import type { ApolloClient, QueryOptions } from "@apollo/client";
+import React from "react";
+
+export function PreloadQuery({
+  options,
+  getClient,
+  children,
+}: {
+  options: QueryOptions;
+  getClient: () => ApolloClient<any>;
+  children: ReactNode;
+}) {
+  const resultPromise = getClient().query({
+    ...options,
+    // TODO: create a second Client instance only for `PreloadQuery` calls
+    // We want to prevent "client" data from leaking into our "RSC" cache,
+    // as that data should always be strictly separated.
+    fetchPolicy: "no-cache",
+  });
+  return (
+    <SimulatePreloadedQuery options={options} result={resultPromise}>
+      {children}
+    </SimulatePreloadedQuery>
+  );
+}

packages/client-react-streaming/src/index.cc.ts

@@ -0,0 +1,58 @@
+"use client";
+
+import type { FetchResult, WatchQueryOptions } from "@apollo/client/index.js";
+import { useApolloClient } from "@apollo/client/index.js";
+import type { ApolloClient as WrappedApolloClient } from "./DataTransportAbstraction/WrappedApolloClient.js";
+import type { TransportIdentifier } from "./DataTransportAbstraction/DataTransportAbstraction.js";
+import type { QueryManager } from "@apollo/client/core/QueryManager.js";
+import type { ReactNode } from "react";
+
+const handledRequests = new WeakMap<WatchQueryOptions, TransportIdentifier>();
+
+export function SimulatePreloadedQuery({
+  options,
+  result,
+  children,
+}: {
+  options: WatchQueryOptions;
+  result: Promise<FetchResult>;
+  children: ReactNode;
+}) {
+  const client = useApolloClient() as WrappedApolloClient<any>;
+  if (!handledRequests.has(options)) {
+    const id =
+      `preloadedQuery:${(client["queryManager"] as QueryManager<any>).generateQueryId()}` as TransportIdentifier;
+    handledRequests.set(options, id);
+    client.onQueryStarted!({
+      type: "started",
+      id,
+      options,
+    });
+    result.then(
+      (result) => {
+        client.onQueryProgress!({
+          type: "data",
+          id,
+          result,
+        });
+        client.onQueryProgress!({
+          type: "complete",
+          id,
+        });
+      },
+      () => {
+        // TODO:
+        // This will restart the query in SSR **and** in the browser.
+        // Currently there is no way of transporting the result received in SSR to the browser.
+        // Layers over layers...
+        // Maybe instead we should just "fail" the simulated request on the SSR level
+        // and only have it re-attempt in the browser?
+        client.onQueryProgress!({
+          type: "error",
+          id,
+        });
+      }
+    );
+  }
+  return children;
+}

packages/client-react-streaming/src/index.rsc.ts

@@ -1,2 +1,3 @@
 export { registerApolloClient } from "./registerApolloClient.js";
 export * from "./index.shared.js";
+export { PreloadQuery } from "./PreloadQuery.js";

packages/client-react-streaming/tsup.config.ts

@@ -61,6 +61,10 @@ export default defineConfig((options) => {
       "src/ManualDataTransport/index.ts",
       "manual-transport.browser"
     ),
+    {
+      ...entry("browser", "src/index.cc.ts", "index.cc"),
+      treeshake: false, // would remove the "use client" directive
+    },
   ];
 });
 
@@ -74,5 +78,16 @@ const acModuleImports: Plugin = {
       }
       return { path: args.path, external: true };
     });
+    // handle "client component" boundary imports
+    build.onResolve({ filter: /.cc.js/ }, async (args) => {
+      console.log(args);
+      if (build.initialOptions.define["TSUP_FORMAT"] === '"cjs"') {
+        return {
+          path: args.path.replace(/\/.cc.js$/, "/.cc.cjs"),
+          external: true,
+        };
+      }
+      return { path: args.path, external: true };
+    });
   },
 };