apollographql · phryneas · Mar 6, 2024 · Feb 21, 2024 · Feb 21, 2024 · Feb 21, 2024
@@ -83,7 +83,7 @@ jobs:
       - run: yarn workspaces foreach --all --include "@integration-test/*" add @apollo/client@${{ matrix.version }}
 
       - name: Build libraries
-        run: yarn workspaces foreach --all -t --include "@apollo/*" --include @integration-test/nextjs run build
+        run: yarn workspaces foreach --all -t --include "@apollo/*" run build
 
       - name: "Next.js: Build"
         run: yarn workspace @integration-test/nextjs run build
@@ -94,3 +94,8 @@ jobs:
         run: yarn workspace @integration-test/experimental-react run build
       - name: "Experimentally patched React: Test"
         run: yarn workspace @integration-test/experimental-react run test | tee $GITHUB_STEP_SUMMARY; exit ${PIPESTATUS[0]}
+
+      - name: "Vite Streaming: Build"
+        run: yarn workspace @integration-test/vite-streaming run build
+      - name: "Vite Streaming: Test"
+        run: yarn workspace @integration-test/vite-streaming run test | tee $GITHUB_STEP_SUMMARY; exit ${PIPESTATUS[0]}
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <!--app-head-->
+</head>
+
+<body>
+  <div id="root"><!--app-html--></div>
+  <script type="module" src="/src/entry-client.jsx"></script>
+</body>
+
+</html>
@@ -0,0 +1,37 @@
+{
+  "name": "@integration-test/vite-streaming",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "prepare": "rm -rf node_modules/@apollo/client-react-streaming; mkdir node_modules/@apollo/client-react-streaming && cp -r ../../packages/client-react-streaming/{package.json,dist} node_modules/@apollo/client-react-streaming",
+    "dev": "yarn prepare; node server",
+    "build": "yarn prepare; npm run build:client && npm run build:server",
+    "build:client": "vite build --ssrManifest --outDir dist/client",
+    "build:server": "vite build --ssr src/entry-server.jsx --outDir dist/server",
+    "preview": "cross-env NODE_ENV=production node server",
+    "build-and-test": "yarn build && yarn test",
+    "test": "yarn playwright test"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.9.1",
+    "@apollo/client-react-streaming": "workspace:*",
+    "compression": "^1.7.4",
+    "express": "^4.18.2",
+    "graphql": "^16.8.1",
+    "graphql-tag": "^2.12.6",
+    "react": "18.3.0-canary-60a927d04-20240113",
+    "react-dom": "18.3.0-canary-60a927d04-20240113",
+    "sirv": "^2.0.4"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.39.0",
+    "@tsconfig/vite-react": "^3.0.0",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "cross-env": "^7.0.3",
+    "prettier": "^3.2.5",
+    "vite": "^5.0.10"
+  }
+}
@@ -0,0 +1,21 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+  webServer: {
+    command: "node server",
+    port: 3000,
+    timeout: 120 * 1000,
+    reuseExistingServer: !process.env.CI,
+    env: {
+      PORT: 3000,
+      NODE_ENV: "production",
+    },
+  },
+  timeout: 120 * 1000,
+  use: {
+    headless: true,
+    viewport: { width: 1280, height: 720 },
+    ignoreHTTPSErrors: true,
+  },
+  testDir: "src/",
+});
@@ -0,0 +1,101 @@
+import express from "express";
+import { renderToReadableStream } from "react-dom/server.edge";
+import { readFile } from "node:fs/promises";
+
+// Constants
+const isProduction = process.env.NODE_ENV === "production";
+const port = process.env.PORT || 5173;
+const base = process.env.BASE || "/";
+
+// Create http server
+const app = express();
+
+// Add Vite or respective production middlewares
+let vite;
+let bootstrapModules = [];
+let assets = [];
+if (!isProduction) {
+  const { createServer } = await import("vite");
+  vite = await createServer({
+    server: { middlewareMode: true, hmr: true },
+    appType: "custom",
+    base,
+  });
+  app.use(vite.middlewares);
+} else {
+  const compression = (await import("compression")).default;
+  const sirv = (await import("sirv")).default;
+  app.use(compression());
+  app.use(base, sirv("./dist/client", { extensions: [] }));
+  const index = await readFile("./dist/client/index.html", "utf-8");
+  for (const script of index.matchAll(
+    /<script type="module" \w+ src="(.*)">/g
+  )) {
+    bootstrapModules.push(script[1]);
+  }
+  for (const link of index.matchAll(
+    /<link rel="stylesheet" \w+ href="(.*)">/g
+  )) {
+    assets.push(link[1]);
+  }
+}
+
+console.log({
+  bootstrapModules,
+  assets,
+});
+
+app.use("*", async (req, res) => {
+  // The new wiring is a bit more involved.
+  res.socket.on("error", (error) => {
+    console.error("Fatal", error);
+  });
+
+  const { createTransport, render } =
+    /** @type {import('./src/entry-server.jsx.js')}*/ (
+      await (isProduction
+        ? import("./dist/server/entry-server.js")
+        : vite.ssrLoadModule("/src/entry-server.jsx"))
+    );
+
+  const { injectIntoStream, transformStream } = createTransport();
+
+  const App = render({
+    isProduction,
+    assets,
+    injectIntoStream,
+  });
+
+  const reactStream =
+    /** @type {ReadableStream & {allReady: Promise<void>}}  */ (
+      await renderToReadableStream(App, {
+        bootstrapModules,
+      })
+    );
+
+  await pipeReaderToResponse(
+    reactStream.pipeThrough(transformStream).getReader(),
+    res
+  );
+});
+
+async function pipeReaderToResponse(reader, res) {
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) {
+        res.end();
+        return;
+      } else {
+        res.write(value);
+      }
+    }
+  } catch (e) {
+    res.destroy(e);
+  }
+}
+
+// Start http server
+app.listen(port, () => {
+  console.log(`Server started at http://localhost:${port}`);
+});
@@ -0,0 +1,81 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+
+
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.card {
+  padding: 2em;
+}
@@ -0,0 +1,90 @@
+import { Suspense, useState } from "react";
+import "./App.css";
+import { ApolloClient, InMemoryCache } from "@apollo/client-react-streaming";
+import { SchemaLink } from "@apollo/client/link/schema/index.js";
+import {
+  gql,
+  ApolloLink,
+  Observable,
+  TypedDocumentNode,
+  useSuspenseQuery,
+} from "@apollo/client/index.js";
+import { schema } from "./schema";
+import { WrappedApolloProvider } from "./Transport";
+
+const delayLink = new ApolloLink((operation, forward) => {
+  return new Observable((observer) => {
+    const handle = setTimeout(() => {
+      forward(operation).subscribe(observer);
+    }, 1000);
+
+    return () => {
+      clearTimeout(handle);
+    };
+  });
+});
+
+const makeClient = () => {
+  return new ApolloClient({
+    cache: new InMemoryCache(),
+    link:
+      // we do not even have a graphql endpoint in the browser, so if this works, streaming works
+      typeof window === "undefined"
+        ? delayLink.concat(new SchemaLink({ schema }))
+        : undefined,
+  });
+};
+
+function App() {
+  return (
+    <>
+      <h1>Vite + React (patched) Streaming SSR + Apollo Client + Suspense</h1>
+      <div className="card">
+        <WrappedApolloProvider makeClient={makeClient}>
+          <Suspense fallback={<div>Loading...</div>}>
+            <Countries />
+            <Counter />
+          </Suspense>
+        </WrappedApolloProvider>
+      </div>
+    </>
+  );
+}
+
+const QUERY: TypedDocumentNode<{
+  products: Array<{ id: string; title: string }>;
+}> = gql`
+  query {
+    products {
+      id
+      title
+    }
+  }
+`;
+
+function Countries() {
+  const { data } = useSuspenseQuery(QUERY);
+
+  return (
+    <ul>
+      {data.products.map((product) => (
+        <li key={product.id}>{product.title}</li>
+      ))}
+    </ul>
+  );
+}
+
+/**
+ * Counter components to test that the client has hydrated and is interactive.
+ */
+function Counter() {
+  const [counter, setCounter] = useState(0);
+  return (
+    <>
+      <div data-testid="counter">{counter}</div>
+      <button onClick={() => setCounter((x) => x + 1)}>increment</button>
+    </>
+  );
+}
+
+export default App;