feat: add Apollo Server integration and update GraphQL Yoga configuration for improved functionality

Author: productdevbook

package.json

@@ -71,6 +71,7 @@
     "nitropack": "^2.11.13"
   },
   "dependencies": {
+    "@apollo/utils.withrequired": "^3.0.0",
     "@as-integrations/h3": "^2.0.0",
     "@graphql-codegen/core": "^4.0.2",
     "@graphql-codegen/typescript": "^4.1.6",
@@ -102,6 +103,7 @@
     "@types/node": "^20.19.7",
     "bumpp": "^10.2.0",
     "changelogen": "^0.6.2",
+    "crossws": "0.3.5",
     "eslint": "^9.31.0",
     "graphql": "^16.11.0",
     "graphql-yoga": "^5.15.1",

playground-nuxt/server/graphql/yoga.config.ts

@@ -1,18 +1,6 @@
 // Custom GraphQL Yoga configuration
-export default defineYogaConfig({
+export default defineGraphQLConfig({
   // Custom context enhancer - adds additional properties to GraphQL context
-  context: async ({ request }) => {
-    const event = request.$$event
-
-    return {
-      event,
-      request,
-      storage: useStorage(),
-      // Add custom context properties
-      startTime: Date.now(),
-      userAgent: event?.node?.req?.headers?.['user-agent'] || 'unknown',
-    }
-  },
 
   // Additional yoga options can be added here
   // See: https://the-guild.dev/graphql/yoga-server/docs

pnpm-lock.yaml

@@ -56,7 +56,6 @@ export default defineNitroModule({
       else if (typeof rollupConfig.external === 'function') {
         const originalExternal = rollupConfig.external
         rollupConfig.external = (id, parent, isResolved) => {
-          console.log('Checking external:', id, parent, isResolved)
           if (codegenExternals.some(external => id.includes(external))) {
             return true
           }
@@ -167,7 +166,6 @@ export default defineNitroModule({
         from: 'nitro-graphql/utils/define',
         imports: [
           'defineResolver',
-          'defineYogaConfig',
           'defineMutation',
           'defineQuery',
           'defineSubscription',

src/index.ts

@@ -1,11 +1,19 @@
+/*
+This file Copy from 'https://github.com/apollo-server-integrations/apollo-server-integration-h3/blob/main/src/index.ts'
+
+There is a bug, after it is fixed, the will be used again
+
+*/
+
 import type { BaseContext } from '@apollo/server'
 import { defs } from '#nitro-internal-virtual/server-defs'
 import { resolvers } from '#nitro-internal-virtual/server-resolvers'
 import { ApolloServer } from '@apollo/server'
 import { ApolloServerPluginLandingPageLocalDefault } from '@apollo/server/plugin/landingPage/default'
-import { startServerAndCreateH3Handler } from '@as-integrations/h3'
+// TODO: fix bug
+// import { startServerAndCreateH3Handler } from '@as-integrations/h3'
 import { mergeResolvers, mergeTypeDefs } from '@graphql-tools/merge'
-import { defineEventHandler } from 'h3'
+import { startServerAndCreateH3Handler } from '../utils/apollo'
 
 function createMergedSchema() {
   try {
@@ -24,19 +32,24 @@ function createMergedSchema() {
   }
 }
 
-const { typeDefs, resolvers: mergedResolvers } = createMergedSchema()
+let apolloServer: ApolloServer<BaseContext>
 
-const apolloServer = new ApolloServer<BaseContext>({
-  typeDefs,
-  resolvers: mergedResolvers,
-  introspection: true,
-  plugins: [
-    ApolloServerPluginLandingPageLocalDefault({ embed: true }),
-  ],
-})
-const handler = startServerAndCreateH3Handler(apolloServer, {
+function createApolloServer() {
+  if (!apolloServer) {
+    const { typeDefs, resolvers: mergedResolvers } = createMergedSchema()
+
+    apolloServer = new ApolloServer<BaseContext>({
+      typeDefs,
+      resolvers: mergedResolvers,
+      introspection: true,
+      plugins: [
+        ApolloServerPluginLandingPageLocalDefault({ embed: true }),
+      ],
+    })
+  }
+  return apolloServer
+}
+
+export default startServerAndCreateH3Handler(createApolloServer, {
   context: async event => ({ event }),
 })
-export default defineEventHandler((event) => {
-  return handler(event)
-})

src/routes/apollo-server.ts

@@ -0,0 +1,133 @@
+import type {
+  ApolloServer,
+  BaseContext,
+  ContextFunction,
+  HTTPGraphQLRequest,
+} from '@apollo/server'
+import type { WithRequired } from '@apollo/utils.withrequired'
+import type { Hooks } from 'crossws'
+import type {
+  EventHandler,
+  H3Event,
+  HTTPMethod,
+  RequestHeaders,
+} from 'h3'
+import { HeaderMap } from '@apollo/server'
+import {
+  eventHandler,
+  getHeaders,
+  isMethod,
+  readBody,
+  setHeaders,
+} from 'h3'
+
+export interface H3ContextFunctionArgument {
+  event: H3Event
+}
+
+export interface H3HandlerOptions<TContext extends BaseContext> {
+  context?: ContextFunction<[H3ContextFunctionArgument], TContext>
+  websocket?: Partial<Hooks>
+}
+
+export function startServerAndCreateH3Handler(
+  server: ApolloServer<BaseContext> | (() => ApolloServer<BaseContext>),
+  options?: H3HandlerOptions<BaseContext>,
+): EventHandler
+export function startServerAndCreateH3Handler<TContext extends BaseContext>(
+  server: ApolloServer<TContext> | (() => ApolloServer<TContext>),
+  options: WithRequired<H3HandlerOptions<TContext>, 'context'>,
+): EventHandler
+export function startServerAndCreateH3Handler<TContext extends BaseContext>(
+  server: ApolloServer<TContext> | (() => ApolloServer<TContext>),
+  options?: H3HandlerOptions<TContext>,
+): EventHandler {
+  const apolloServer = typeof server === 'function' ? server() : server
+  apolloServer.startInBackgroundHandlingStartupErrorsByLoggingAndFailingAllRequests()
+
+  const defaultContext: ContextFunction<
+    [H3ContextFunctionArgument],
+    any
+  > = () => Promise.resolve({})
+
+  const contextFunction: ContextFunction<
+    [H3ContextFunctionArgument],
+    TContext
+  > = options?.context ?? defaultContext
+
+  return eventHandler({
+    handler: async (event) => {
+      // Apollo-server doesn't handle OPTIONS calls, so we have to do this on our own
+      // https://github.com/apollographql/apollo-server/blob/fa82c1d5299c4803f9ef8ae7fa2e367eadd8c0e6/packages/server/src/runHttpQuery.ts#L182-L192
+      if (isMethod(event, 'OPTIONS')) {
+        // send 204 response
+
+        return null
+      }
+
+      try {
+        const graphqlRequest = await toGraphqlRequest(event)
+        const { body, headers, status }
+          = await apolloServer.executeHTTPGraphQLRequest({
+            httpGraphQLRequest: graphqlRequest,
+            context: () => contextFunction({ event }),
+          })
+
+        if (body.kind === 'chunked') {
+          throw new Error('Incremental delivery not implemented')
+        }
+
+        setHeaders(event, Object.fromEntries(headers))
+        event.res.statusCode = status || 200
+        return body.string
+      }
+      catch (error) {
+        if (error instanceof SyntaxError) {
+          // This is what the apollo test suite expects
+          event.res.statusCode = 400
+          return error.message
+        }
+        else {
+          throw error
+        }
+      }
+    },
+    websocket: options?.websocket,
+  })
+}
+
+async function toGraphqlRequest(event: H3Event): Promise<HTTPGraphQLRequest> {
+  return {
+    method: event.req.method || 'POST',
+    headers: normalizeHeaders(getHeaders(event)),
+    search: normalizeQueryString(event.req.url),
+    body: await normalizeBody(event),
+  }
+}
+
+function normalizeHeaders(headers: RequestHeaders): HeaderMap {
+  const headerMap = new HeaderMap()
+  for (const [key, value] of Object.entries(headers)) {
+    if (Array.isArray(value)) {
+      headerMap.set(key, value.join(','))
+    }
+    else if (value) {
+      headerMap.set(key, value)
+    }
+  }
+  return headerMap
+}
+
+function normalizeQueryString(url: string | undefined): string {
+  if (!url) {
+    return ''
+  }
+  return url.split('?')[1] || ''
+}
+
+async function normalizeBody(event: H3Event): Promise<unknown> {
+  const PayloadMethods: HTTPMethod[] = ['PATCH', 'POST', 'PUT', 'DELETE']
+  if (isMethod(event, PayloadMethods)) {
+    return await readBody(event)
+  }
+}