docs: add a simple h3 example (#59)

README.md

@@ -31,7 +31,7 @@ import { ApolloServer } from '@apollo/server'
 import { startServerAndCreateH3Handler } from '@as-integrations/h3'
 
 const apollo = new ApolloServer({
-  // Specify server options here
+  // Specify server options like schema and resolvers here
 })
 
 export default startServerAndCreateH3Handler(apollo, {
@@ -45,26 +45,27 @@ export default startServerAndCreateH3Handler(apollo, {
 Create and configure an instance of Apollo Server as described in the [documentation](https://www.apollographql.com/docs/apollo-server/getting-started#step-6-create-an-instance-of-apolloserver) and then register it as a route handler in your `h3` application.
 
 ```js
-import { createApp, toNodeListener } from 'h3'
+import { createApp } from 'h3'
 import { ApolloServer } from '@apollo/server'
 import { startServerAndCreateH3Handler } from '@as-integrations/h3'
 
 const apollo = new ApolloServer({
-  // Specify server options here
+  // Specify server options like schema and resolvers here
 })
 
-const app = createApp()
+export const app = createApp()
 app.use(
   '/api',
   startServerAndCreateH3Handler(apollo, {
     // Optional: Specify context
     context: (event) => {...}
   })
 )
-
-createServer(toNodeListener(app)).listen(process.env.PORT || 3000)
 ```
 
+Then run your h3 server as usual, e.g. with `npx --yes listhen -w --open ./app.ts`.
+Visit http://localhost:3000/api in your browser to access the Apollo Sandbox.
+
 ## 💻 Development
 
 - Clone this repository

examples/simple.ts

@@ -0,0 +1,43 @@
+import { createApp } from 'h3'
+import { ApolloServer } from '@apollo/server'
+import { startServerAndCreateH3Handler } from '../src'
+
+const typeDefs = `#graphql
+  # This "Book" type defines the queryable fields for every book in our data source.
+  type Book {
+    title: String
+    author: String
+  }
+
+  # The "Query" type is special: it lists all of the available queries that
+  # clients can execute, along with the return type for each. In this
+  # case, the "books" query returns an array of zero or more Books (defined above).
+  type Query {
+    books: [Book]
+  }
+`
+
+// Resolvers define how to fetch the types defined in your schema.
+// This resolver returns simply a static list of books
+const resolvers = {
+  Query: {
+    books: () => [
+      {
+        title: 'The Awakening',
+        author: 'Kate Chopin',
+      },
+      {
+        title: 'City of Glass',
+        author: 'Paul Auster',
+      },
+    ],
+  },
+}
+
+const apollo = new ApolloServer({
+  typeDefs,
+  resolvers,
+})
+
+export const app = createApp()
+app.use('.', startServerAndCreateH3Handler(apollo, {}))

package.json

@@ -25,6 +25,7 @@
     "lint": "pnpm lint:eslint && pnpm lint:prettier",
     "lint:eslint": "eslint --ext .ts,.js,.vue,.graphql --ignore-path .gitignore --report-unused-disable-directives .",
     "lint:prettier": "prettier --check --ignore-path .gitignore . '!pnpm-lock.yaml'",
+    "example:simple": "listhen -w --open ./examples/simple.ts",
     "prepack": "unbuild",
     "release": "pnpm test && standard-version && git push --follow-tags && pnpm publish"
   },
@@ -47,6 +48,7 @@
     "graphql": "^16.8.1",
     "h3": "^1.11.1",
     "jest": "^29.7.0",
+    "listhen": "^1.7.2",
     "prettier": "^3.2.5",
     "standard-version": "^9.5.0",
     "ts-jest": "^29.1.2",