Simpler React + Apollo example

- JS instead of TS
- Remove unused npm packages
- Remove page layout + logo
- Move Apollo Client instantiation out of `hydrate()`

examples/react-apollo/.test-dev.spec.js

@@ -0,0 +1,2 @@
+const { testPages } = require("../.testPages");
+testPages("react", "npm run start");

examples/react-apollo/.test-prod.spec.js

@@ -0,0 +1,2 @@
+const { testPages } = require("../.testPages");
+testPages("react", "npm run prod");

examples/react-apollo/package.json

@@ -1,7 +1,7 @@
 {
   "scripts": {
     "start": "npm run dev",
-    "dev": "ts-node ./server",
+    "dev": "node ./server",
     "prod": "npm run build && npm run prod:serve",
     "// Build for production": "",
     "build": "npm run build:vite && npm run build:prerender",
@@ -12,12 +12,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.3.12",
-    "@mdx-js/mdx": "^1.6.22",
-    "@mdx-js/react": "^1.6.22",
-    "@types/express": "^4.17.11",
-    "@types/node": "^14.14.35",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.2",
+    "@babel/core": "^7.13.10",
     "@vitejs/plugin-react-refresh": "^1.3.1",
     "cross-env": "^7.0.3",
     "cross-fetch": "^3.1.2",
@@ -26,10 +21,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "serve": "^11.3.2",
-    "ts-node": "^9.1.1",
-    "typescript": "^4.2.3",
     "vite": "2.1.2",
-    "vite-plugin-mdx": "3.2.2",
     "vite-plugin-ssr": "0.1.0-beta.17"
   }
 }

examples/react-apollo/pages/_default/PageLayout.css → examples/react-apollo/pages/App.css

@@ -3,13 +3,11 @@
 body {
   margin: 0;
   font-family: sans-serif;
+  padding: 3rem;
 }
 * {
   box-sizing: border-box;
 }
-a {
-  text-decoration: none;
-}
 code {
   font-family: monospace;
   background-color: #eaeaea;

examples/react-apollo/pages/App.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { ApolloProvider } from "@apollo/client";
+import './App.css';
+
+export default App
+
+function App({ client, children }) {
+  return (
+    <ApolloProvider client={client}>
+      {children}
+    </ApolloProvider>
+  );
+}

examples/react-apollo/pages/_default/_default.page.client.tsx → examples/react-apollo/pages/_default/_default.page.client.jsx

@@ -1,23 +1,25 @@
 import ReactDOM from "react-dom";
 import React from "react";
 import { getPage } from "vite-plugin-ssr/client";
-import { ApolloClient, InMemoryCache } from '@apollo/client'
-import App from '../App';
+import { ApolloClient, InMemoryCache } from "@apollo/client";
+import App from "../App";
 
 hydrate();
 
 async function hydrate() {
   const { Page, pageProps } = await getPage();
 
-  const client = new ApolloClient({
-    uri: 'https://countries.trevorblades.com',
-    cache: new InMemoryCache().restore(pageProps.initialApolloState),
-  });
-
   ReactDOM.hydrate(
-    <App client={client}>
+    <App client={makeApolloClient()}>
       <Page {...pageProps} />
     </App>
     , document.getElementById("page-content")
   );
 }
+
+function makeApolloClient() {
+  return new ApolloClient({
+    uri: "https://countries.trevorblades.com",
+    cache: new InMemoryCache().restore(pageProps.initialApolloState),
+  });
+}

examples/react-apollo/pages/_default/_default.page.server.tsx → examples/react-apollo/pages/_default/_default.page.server.jsx

@@ -1,25 +1,11 @@
 import React from "react";
 import { html } from "vite-plugin-ssr";
-import { ApolloClient, NormalizedCacheObject } from '@apollo/client';
-import { getDataFromTree } from '@apollo/client/react/ssr';
-import App from '../App'
+import { getDataFromTree } from "@apollo/client/react/ssr";
+import App from "../App";
 
 export { render, addContextProps, setPageProps };
 
-type Page = (pageProps: any) => JSX.Element;
-type PageProps = any;
-type ContextProps = {
-  title?: string
-  client: ApolloClient<NormalizedCacheObject>
-  initialApolloState: NormalizedCacheObject
-  pageHtml: string
-};
-
-function render({
-  contextProps,
-}: {
-  contextProps: ContextProps;
-}) {
+function render({ contextProps }) {
   const title = contextProps.title || "Demo: vite-plugin-ssr";
 
   return html`<!DOCTYPE html>
@@ -33,15 +19,7 @@ function render({
     </html>`;
 }
 
-async function addContextProps({
-  Page,
-  pageProps,
-  contextProps
-}: {
-  Page: Page;
-  pageProps: PageProps;
-  contextProps: ContextProps;
-}) {
+async function addContextProps({ Page, pageProps, contextProps }) {
   let pageHtml, initialApolloState;
 
   const tree = <App client={contextProps.client}>
@@ -56,6 +34,6 @@ async function addContextProps({
   return { pageHtml, initialApolloState };
 }
 
-function setPageProps({ contextProps }: {contextProps: ContextProps}) {
+function setPageProps({ contextProps }) {
   return { initialApolloState: contextProps.initialApolloState };
 }

examples/react-apollo/pages/_error.page.tsx → examples/react-apollo/pages/_error.page.jsx

@@ -2,7 +2,7 @@ import React from "react";
 
 export { Page };
 
-function Page({ is404 }: { is404: boolean }) {
+function Page({ is404 }) {
   if (is404) {
     return (
       <>

examples/react-apollo/pages/index.page.tsx → examples/react-apollo/pages/index.page.jsx

@@ -4,7 +4,7 @@ import { gql, useQuery } from "@apollo/client";
 export default IndexPage;
 
 function IndexPage() {
-  const {data} = useQuery(gql`
+  const { data } = useQuery(gql`
     {
       countries {
         code
@@ -18,8 +18,8 @@ function IndexPage() {
       <h1>
         Welcome to <code>vite-plugin-ssr</code>
       </h1>
-      <p>This list of countries was fetched server-side using the Apollo client defined in <code>server/index.ts</code>.</p>
-      <p>The Apollo client on the server runs the query and stores the result in its cache. This cache is then passed to the client-side Apollo client defined in <code>pages/_default/_default.page.client.tsx</code> via <code>restore()</code></p>
+      <p>This list of countries was fetched server-side using the Apollo client defined in <code>server/index.js</code>.</p>
+      <p>The Apollo client on the server runs the query and stores the result in its cache. This cache is then passed to the client-side Apollo client defined in <code>pages/_default/_default.page.client.jsx</code> via <code>restore()</code></p>
       <p>It's important that the Apollo client on the server is instantiated on each request.</p>
       <ul>
         {data?.countries.map(country => (

examples/react-apollo/server/index.ts → examples/react-apollo/server/index.js

@@ -1,8 +1,8 @@
-import express from "express";
-import { createPageRender } from "vite-plugin-ssr";
-import * as vite from "vite";
-import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client';
-import fetch from 'cross-fetch'
+const express = require("express");
+const { createPageRender } = require("vite-plugin-ssr");
+const vite = require("vite");
+const { ApolloClient, createHttpLink, InMemoryCache } = require('@apollo/client');
+const fetch = require("cross-fetch");
 
 const isProduction = process.env.NODE_ENV === "production";
 const root = `${__dirname}/..`;
@@ -28,7 +28,7 @@ async function startServer() {
     const client = new ApolloClient({
       ssrMode: true,
       link: createHttpLink({
-        uri: 'https://countries.trevorblades.com',
+        uri: "https://countries.trevorblades.com",
         fetch,
       }),
       cache: new InMemoryCache(),

examples/react-apollo/vite.config.js

@@ -0,0 +1,9 @@
+const reactRefresh = require("@vitejs/plugin-react-refresh");
+const ssr = require("vite-plugin-ssr");
+
+const config = {
+  plugins: [reactRefresh(), ssr()],
+  clearScreen: false,
+};
+
+export default config;