feat: add vike-react-apollo (#134)

README.md

@@ -8,6 +8,10 @@
   - Docs: [README.md](packages/vike-react-query#readme)
   - Version history: [CHANGELOG.md](packages/vike-react-query/CHANGELOG.md)
   - Source code: [packages/vike-react-query/](packages/vike-react-query)
+- `vike-react-apollo` ([Apollo GraphQL](https://www.apollographql.com/docs/react) integration)
+  - Docs: [README.md](packages/vike-react-apollo#readme)
+  - Version history: [CHANGELOG.md](packages/vike-react-apollo/CHANGELOG.md)
+  - Source code: [packages/vike-react-apollo/](packages/vike-react-apollo)
 
 > [!NOTE]
 > The source code is [small, simple, and highly polished](https://vike.dev/vike-react#under-the-hood). Contributing is easy and welcome, see [CONTRIBUTING.md](CONTRIBUTING.md) to get started.

examples/apollo/.gitignore

@@ -0,0 +1,2 @@
+/node_modules/
+/dist/

examples/apollo/.test-dev.test.ts

@@ -0,0 +1,2 @@
+import { testRun } from './.testRun'
+testRun('pnpm run dev')

examples/apollo/.test-preview.test.ts

@@ -0,0 +1,2 @@
+import { testRun } from './.testRun'
+testRun('pnpm run preview')

examples/apollo/.testRun.ts

@@ -0,0 +1,41 @@
+export { testRun }
+
+import { test, expect, run, fetchHtml, page, getServerUrl, autoRetry } from '@brillout/test-e2e'
+
+function testRun(cmd: `pnpm run ${'dev' | 'preview'}`) {
+  run(cmd)
+
+  const content = 'United States'
+  const loading = 'Loading contries...'
+  test('HTML', async () => {
+    const html = await fetchHtml('/')
+    expect(getTitle(html)).toBe('My Vike + React App')
+    // fetchHtml() awaits the stream
+    expect(html).toContain(content)
+  })
+  test('DOM', async () => {
+    await page.goto(getServerUrl() + '/')
+    const body = await page.textContent('body')
+    // Playwright seems to await the HTML stream
+    expect(body).not.toContain(loading)
+    expect(body).toContain(content)
+    await testCounter()
+  })
+}
+
+function getTitle(html: string) {
+  const title = html.match(/<title>(.*?)<\/title>/i)?.[1]
+  return title
+}
+
+async function testCounter() {
+  // autoRetry() for awaiting client-side code loading & executing
+  await autoRetry(
+    async () => {
+      expect(await page.textContent('button')).toBe('Counter 0')
+      await page.click('button')
+      expect(await page.textContent('button')).toContain('Counter 1')
+    },
+    { timeout: 5 * 1000 }
+  )
+}

examples/apollo/layouts/HeadDefault.tsx

@@ -0,0 +1,14 @@
+export default HeadDefault
+
+import React from 'react'
+import logoUrl from '../assets/logo.svg'
+
+function HeadDefault() {
+  return (
+    <>
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <meta name="description" content="Demo showcasing Vike + React" />
+      <link rel="icon" href={logoUrl} />
+    </>
+  )
+}

examples/apollo/layouts/LayoutDefault.tsx

@@ -0,0 +1,72 @@
+export default LayoutDefault
+
+import './style.css'
+import React from 'react'
+import logoUrl from '../assets/logo.svg'
+
+function LayoutDefault({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        maxWidth: 900,
+        margin: 'auto'
+      }}
+    >
+      <Sidebar>
+        <Logo />
+      </Sidebar>
+      <Content>{children}</Content>
+    </div>
+  )
+}
+
+function Sidebar({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      id="sidebar"
+      style={{
+        padding: 20,
+        flexShrink: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        lineHeight: '1.8em',
+        borderRight: '2px solid #eee'
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+function Content({ children }: { children: React.ReactNode }) {
+  return (
+    <div id="page-container">
+      <div
+        id="page-content"
+        style={{
+          padding: 20,
+          paddingBottom: 50,
+          minHeight: '100vh'
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+function Logo() {
+  return (
+    <div
+      style={{
+        marginTop: 20,
+        marginBottom: 10
+      }}
+    >
+      <a href="/">
+        <img src={logoUrl} height={64} width={64} />
+      </a>
+    </div>
+  )
+}

examples/apollo/layouts/style.css

@@ -0,0 +1,29 @@
+/* Links */
+a {
+  text-decoration: none;
+}
+#sidebar a {
+  padding: 2px 10px;
+  margin-left: -10px;
+}
+#sidebar a.is-active {
+  background-color: #eee;
+}
+
+/* Reset */
+body {
+  margin: 0;
+  font-family: sans-serif;
+}
+* {
+  box-sizing: border-box;
+}
+
+/* Page Transition Anmiation */
+#page-content {
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+}
+body.page-is-transitioning #page-content {
+  opacity: 0;
+}

examples/apollo/package.json

@@ -0,0 +1,23 @@
+{
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite build && vite preview"
+  },
+  "dependencies": {
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "@vitejs/plugin-react": "^4.2.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "^5.3.3",
+    "vike": "^0.4.178",
+    "vike-react": "^0.4.17",
+    "vike-react-apollo": "^0.0.1",
+    "@apollo/client": "^3.10.8",
+    "@apollo/client-react-streaming": "^0.11.2",
+    "graphql": "^16.9.0",
+    "vite": "^5.1.1"
+  },
+  "type": "module"
+}

examples/apollo/pages/+ApolloClient.ts

@@ -0,0 +1,9 @@
+import { ApolloClient, InMemoryCache } from '@apollo/client-react-streaming'
+import type { PageContext } from 'vike/types'
+
+// Apollo GraphQL Client with artificial delay: https://gist.github.com/brillout/7d7db0fd6ce55b3b5e8f7ec893eeda01
+export default (pageContext: PageContext) =>
+  new ApolloClient({
+    uri: 'https://countries.trevorblades.com',
+    cache: new InMemoryCache()
+  })

examples/apollo/pages/+config.ts

@@ -0,0 +1,15 @@
+import type { Config } from 'vike/types'
+import Layout from '../layouts/LayoutDefault'
+import Head from '../layouts/HeadDefault'
+import vikeReact from 'vike-react/config'
+import vikeReactApollo from 'vike-react-apollo/config'
+
+// Default configs (can be overridden by pages)
+export default {
+  Layout,
+  Head,
+  // <title>
+  title: 'My Vike + React App',
+  extends: [vikeReact, vikeReactApollo],
+  passToClient: ['routeParams']
+} satisfies Config

examples/apollo/pages/_error/+Page.tsx

@@ -0,0 +1,23 @@
+export default Page
+
+import React from 'react'
+import { usePageContext } from 'vike-react/usePageContext'
+
+function Page() {
+  const { is404 } = usePageContext()
+  if (is404) {
+    return (
+      <>
+        <h1>404 Page Not Found</h1>
+        <p>This page could not be found.</p>
+      </>
+    )
+  } else {
+    return (
+      <>
+        <h1>500 Internal Server Error</h1>
+        <p>Something went wrong.</p>
+      </>
+    )
+  }
+}

examples/apollo/pages/index/+Page.tsx

@@ -0,0 +1,26 @@
+export default Page
+
+import React from 'react'
+import { Counter } from './Counter'
+import { Countries } from './Countries'
+
+function Page() {
+  return (
+    <>
+      <h1>My Vike + React app</h1>
+      This page is:
+      <ul>
+        <li>Rendered to HTML.</li>
+        <li>
+          Interactive while loading. <Counter />
+        </li>
+      </ul>
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ullamcorper neque magna, a dapibus turpis
+        volutpat eget. Praesent et aliquam nisi. Integer congue nec ligula et sollicitudin.
+      </div>
+      <br />
+      <Countries />
+    </>
+  )
+}

examples/apollo/pages/index/Counter.tsx

@@ -0,0 +1,9 @@
+export { Counter }
+
+import React, { useState } from 'react'
+
+function Counter() {
+  const [count, setCount] = useState(0)
+
+  return <button onClick={() => setCount((count) => count + 1)}>Counter {count}</button>
+}

examples/apollo/pages/index/Countries.tsx

@@ -0,0 +1,24 @@
+export { Countries }
+
+import { gql, useSuspenseQuery } from '@apollo/client/index.js'
+import React from 'react'
+import { withFallback } from 'vike-react-apollo'
+
+const Countries = withFallback(() => {
+  const { data } = useSuspenseQuery<{ countries: { code: string; name: string }[] }>(gql`
+    {
+      countries {
+        code
+        name
+      }
+    }
+  `)
+
+  return (
+    <ul>
+      {data.countries.map((country) => (
+        <li key={country.code}>{country.name}</li>
+      ))}
+    </ul>
+  )
+})

examples/apollo/readme.md

@@ -0,0 +1,8 @@
+Example of using `vike-react-apollo`.
+
+```bash
+git clone [email protected]:vikejs/vike-react
+cd vike-react/examples/apollo/
+npm install
+npm run dev
+```

examples/apollo/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "module": "ES2020",
+    "moduleResolution": "Node",
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": ["vite/client"],
+    "jsx": "react",
+    "skipLibCheck": true,
+    "esModuleInterop": true
+  }
+}

examples/apollo/vite.config.ts

@@ -0,0 +1,7 @@
+import react from '@vitejs/plugin-react'
+import vike from 'vike/plugin'
+import { UserConfig } from 'vite'
+
+export default {
+  plugins: [react(), vike()]
+} satisfies UserConfig

package.json

@@ -26,7 +26,8 @@
   "pnpm": {
     "overrides": {
       "vike-react": "link:./packages/vike-react/",
-      "vike-react-query": "link:./packages/vike-react-query/"
+      "vike-react-query": "link:./packages/vike-react-query/",
+      "vike-react-apollo": "link:./packages/vike-react-apollo/"
     }
   },
   "devDependencies": {

packages/vike-react-apollo/.gitignore

@@ -0,0 +1,2 @@
+/node_modules/
+/dist/