feat: add WebSocket support for GraphQL subscriptions

package.json

@@ -98,11 +98,19 @@
   "peerDependencies": {
     "@apollo/server": "^5.0.0",
     "graphql": "^16.11.0",
+    "graphql-sse": "^2.6.0",
+    "graphql-ws": "^6.0.6",
     "nitro": "^3.0.1-alpha.0"
   },
   "peerDependenciesMeta": {
     "@apollo/server": {
       "optional": true
+    },
+    "graphql-sse": {
+      "optional": true
+    },
+    "graphql-ws": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -143,6 +151,8 @@
     "crossws": "catalog:",
     "eslint": "catalog:",
     "graphql": "catalog:",
+    "graphql-sse": "catalog:",
+    "graphql-ws": "catalog:",
     "graphql-yoga": "catalog:",
     "nitro": "catalog:",
     "tsdown": "catalog:",

playgrounds/apollo/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "nitro-graphql-apollo",
+  "name": "apollo-playground",
   "private": true,
   "scripts": {
     "dev": "nitro dev",

playgrounds/nitro/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "nitro-graphql-example",
+  "name": "nitro-playground",
   "private": true,
   "scripts": {
     "dev": "nitro dev",

playgrounds/vite/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "nitro-app",
+  "name": "vite-playground",
   "type": "module",
   "private": true,
   "scripts": {

playgrounds/vite/src/app.ts

@@ -75,15 +75,15 @@ export function setupApp(element: HTMLButtonElement) {
   graphqlLink.onmouseleave = () => graphqlLink.style.transform = 'scale(1)'
 
   const graphqlLogo = document.createElement('img')
-  graphqlLogo.src = 'https://graphql.org/img/logo.svg'
+  graphqlLogo.src = 'https://github.com/productdevbook/nitro-graphql/raw/main/.docs/public/logo.svg'
   graphqlLogo.alt = 'GraphQL'
   graphqlLogo.style.cssText = 'width: 48px; height: 48px; display: block;'
   graphqlLink.appendChild(graphqlLogo)
 
   logosContainer.append(nitroLink, viteLink, graphqlLink)
 
   const mainTitle = document.createElement('h1')
-  mainTitle.textContent = 'GraphQL Demo'
+  mainTitle.textContent = 'Nitro GraphQL Demo'
   mainTitle.style.cssText = styles.mainTitle
 
   leftPanel.append(logosContainer, mainTitle)

playgrounds/webhook/.gitignore

@@ -0,0 +1,8 @@
+node_modules
+dist
+.data
+.nitro
+.cache
+.output
+.env
+.env.local

playgrounds/webhook/.prettierrc

@@ -0,0 +1 @@
+{}

playgrounds/webhook/README.md

@@ -0,0 +1,125 @@
+# Nitro + Vite + GraphQL
+
+A modern full-stack starter template combining [Vite](https://vitejs.dev/), [Nitro](https://v3.nitro.build/), and [GraphQL](https://github.com/productdevbook/nitro-graphql).
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/productdevbook/vite-nitro-graphql?file=server%2Fgraphql%2Fuser%2FgetUser.resolver.ts)
+
+## Features
+
+- ⚡️ **Vite** - Lightning fast frontend build tool
+- 🚀 **Nitro** - Universal server framework
+- 🔺 **GraphQL** - Type-safe API with [nitro-graphql](https://github.com/productdevbook/nitro-graphql)
+- 📦 **TypeScript** - Full type safety
+- 🎨 **Interactive Demo** - Built-in GraphQL playground
+- 🪶 **Lightweight** - Tree-shakeable, minimal bundle size
+- 🌐 **Universal** - Deploy anywhere Nitro supports
+- 🔄 **End-to-End Type Safety** - From GraphQL schema to client
+- 📦 **Tiny Bundle** - Optimized by nitro-graphql's tree-shaking capabilities
+
+## Tech Stack
+
+- **Frontend**: Vite + TypeScript
+- **Backend**: Nitro v3
+- **API**: GraphQL Yoga + nitro-graphql
+- **Schema**: Code-first GraphQL with `.graphql` files
+
+## Getting Started
+
+### Install dependencies
+
+```bash
+npm install
+# or
+pnpm install
+```
+
+### Development
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) to see the interactive demo.
+
+### Build
+
+```bash
+npm run build
+```
+
+### Preview
+
+```bash
+npm run preview
+```
+
+## Project Structure
+
+```
+├── server/
+│   └── graphql/
+│       ├── config.ts          # GraphQL configuration
+│       ├── schema.ts           # Schema definition
+│       └── user/
+│           ├── user.graphql    # User type schema
+│           ├── getUser.resolver.ts
+│           ├── createUser.resolver.ts
+│           └── userStore.ts    # Mock data
+├── src/
+│   ├── main.ts                 # App entry point
+│   └── app.ts                  # Demo UI
+└── index.html
+```
+
+## GraphQL API
+
+The demo includes a simple User API with:
+
+### Queries
+
+```graphql
+query GetUser($id: ID!) {
+  getUser(id: $id) {
+    id
+    email
+    name
+    createdAt
+  }
+}
+```
+
+### Mutations
+
+```graphql
+mutation CreateUser($input: CreateUserInput!) {
+  createUser(input: $input) {
+    id
+    email
+    name
+    createdAt
+  }
+}
+```
+
+## Deployment
+
+This starter supports all Nitro deployment presets. Check the [Nitro deployment documentation](https://v3.nitro.build/deploy) for more details.
+
+```bash
+# Build for production
+npm run build
+
+# Deploy to your favorite platform
+# Vercel, Netlify, Cloudflare Workers, AWS, etc.
+```
+
+## Learn More
+
+- [Vite Documentation](https://vitejs.dev/)
+- [Nitro Documentation](https://v3.nitro.build/)
+- [nitro-graphql](https://github.com/productdevbook/nitro-graphql)
+- [GraphQL](https://graphql.org/)
+
+## License
+
+MIT

playgrounds/webhook/graphql.config.ts

@@ -0,0 +1,14 @@
+import type { IGraphQLConfig } from 'graphql-config'
+
+export default <IGraphQLConfig> {
+  projects: {
+    default: {
+      schema: [
+        './.nitro/graphql/schema.graphql',
+      ],
+      documents: [
+        './graphql/**/*.{graphql,js,ts,jsx,tsx}',
+      ],
+    },
+  },
+}

playgrounds/webhook/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link rel="icon" type="image/svg+xml" href="/nitro.svg" />
+    <title>Nitro + Vite + GraphQL</title>
+    <style>
+      @import "/src/assets/main.css";
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import "/src/main.ts";
+    </script>
+  </body>
+</html>

playgrounds/webhook/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "webhook-playground",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite dev",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vitejs/devtools": "catalog:",
+    "graphql": "catalog:",
+    "graphql-ws": "catalog:",
+    "graphql-yoga": "catalog:",
+    "nitro-graphql": "link:../.."
+  },
+  "devDependencies": {
+    "nitro": "catalog:",
+    "vite": "catalog:"
+  }
+}

playgrounds/webhook/server.ts

@@ -0,0 +1,5 @@
+export default {
+  fetch(req: Request) {
+    console.log(`[${req.method}] ${req.url}`)
+  },
+}

playgrounds/webhook/server/api/hello.ts

@@ -0,0 +1 @@
+export default () => 'API Works!'

playgrounds/webhook/server/graphql/config.ts

@@ -0,0 +1,16 @@
+// Example GraphQL config file please change it to your needs
+// import * as tables from '../drizzle/schema/index'
+// import { useDatabase } from '../utils/useDb'
+import { defineGraphQLConfig } from 'nitro-graphql/define'
+
+export default defineGraphQLConfig({
+// graphql-yoga example config
+// context: () => {
+//   return {
+//     context: {
+//       useDatabase,
+//       tables,
+//     },
+//   }
+// },
+})

playgrounds/webhook/server/graphql/context.d.ts

@@ -0,0 +1,18 @@
+// Example context definition - please change it to your needs
+// import type { Database } from '../utils/useDb'
+
+declare module 'nitro/h3' {
+  interface H3EventContext {
+    // Add your custom context properties here
+    // useDatabase: () => Database
+    // tables: typeof import('../drizzle/schema')
+    // auth?: {
+    //   user?: {
+    //     id: string
+    //     role: 'admin' | 'user'
+    //   }
+    // }
+  }
+}
+
+export {}

playgrounds/webhook/server/graphql/schema.ts

@@ -0,0 +1,3 @@
+export default defineSchema({
+
+})

playgrounds/webhook/server/graphql/user/createUser.resolver.ts

@@ -0,0 +1,22 @@
+import { defineMutation } from 'nitro-graphql/define'
+import { pubsub } from './pubsub'
+import { mockUsers } from './userStore'
+
+export const data = defineMutation({
+  createUser: (_parent, args) => {
+    const newUser = {
+      id: String(mockUsers.length + 1),
+      email: args.input.email,
+      name: args.input.name,
+      createdAt: new Date().toISOString(),
+    }
+
+    mockUsers.push(newUser)
+
+    // Publish event for subscription
+    pubsub.publish('USER_CREATED', newUser)
+    console.log('[Mutation] User created and published:', newUser.email)
+
+    return newUser
+  },
+})

playgrounds/webhook/server/graphql/user/getUser.resolver.ts

@@ -0,0 +1,10 @@
+import { defineQuery } from 'nitro-graphql/define'
+import { mockUsers } from './userStore'
+
+export const data = defineQuery({
+  getUser: (_parent, args) => {
+    console.log(args)
+    const user = mockUsers.find(u => u.id === args.id)
+    return user || null
+  },
+})