Deprecate '.start' and '.stop' methods for common package

.changeset/chilly-zebras-tell.md

@@ -0,0 +1,22 @@
+---
+'@graphql-yoga/common': minor
+---
+
+Deprecate `.start` and `.stop` in favor of more clear usage for Service Workers API which is used by Cloudflare Workers.
+Now Yoga implements `EventListenerObject` which has a `handleEvent` method that is an event listener function.
+
+NOTE: `.start` and `.stop` are going to be deprecated in the next major release.
+
+```ts
+import { createServer } from '@graphql-yoga/common'
+
+const yoga = createServer({
+  //...
+})
+
+//Before: yoga.start();
+self.addEventListener('fetch', yoga)
+
+//Before: yoga.stop();
+self.removeEventListener('fetch', yoga)
+```

examples/cloudflare-advanced/src/index.ts

@@ -77,7 +77,7 @@ const server = createServer({
           async *subscribe() {
             while (true) {
               yield { time: new Date().toISOString() }
-              await new Promise((resolve) => setTimeout(resolve, 1000))
+              await new Promise((resolve) => setTimeout(resolve, 1000, {}))
             }
           },
         },
@@ -102,4 +102,4 @@ const server = createServer({
   },
 })
 
-server.start()
+self.addEventListener('fetch', server)

examples/cloudflare-advanced/tsconfig.json

@@ -3,7 +3,7 @@
     "outDir": "./dist",
     "module": "esnext",
     "target": "esnext",
-    "lib": ["esnext", "webworker"],
+    "lib": ["esnext"],
     "moduleResolution": "node",
     "sourceMap": true,
     "skipLibCheck": true,

examples/cloudflare-modules/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "module": "esnext",
+    "target": "esnext",
+    "lib": ["esnext"],
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "test"]
+}

examples/file-upload-nexus/tsconfig.json

@@ -7,6 +7,6 @@
     "sourceMap": true,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
-    "lib": ["esnext", "dom"]
+    "lib": ["esnext"]
   }
 }

examples/file-upload/tsconfig.json

@@ -7,6 +7,6 @@
     "sourceMap": true,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
-    "lib": ["esnext", "dom"]
+    "lib": ["esnext"]
   }
 }

examples/service-worker/src/index.ts

@@ -2,4 +2,4 @@ import { createServer } from '@graphql-yoga/common'
 
 const server = createServer()
 
-server.start()
+self.addEventListener('fetch', server)

packages/common/src/server.ts

@@ -17,7 +17,6 @@ import { ExecutionResult, IResolvers, TypeSource } from '@graphql-tools/utils'
 import {
   GraphQLServerInject,
   YogaInitialContext,
-  FetchEvent,
   FetchAPI,
   GraphQLParams,
 } from './types.js'
@@ -205,7 +204,8 @@ export class YogaServer<
   TServerContext extends Record<string, any>,
   TUserContext extends Record<string, any>,
   TRootValue,
-> {
+> implements EventListenerObject
+{
   /**
    * Instance of envelop
    */
@@ -611,7 +611,7 @@ export class YogaServer<
 
   fetch: WindowOrWorkerGlobalScope['fetch'] = (
     input: RequestInfo,
-    init: RequestInit,
+    init?: RequestInit,
   ) => {
     let request: Request
     if (typeof input === 'string') {
@@ -623,15 +623,30 @@ export class YogaServer<
   }
 
   // FetchEvent is not available in all envs
-  private fetchEventListener = (event: FetchEvent) =>
-    event.respondWith(this.handleRequest(event.request, event as any))
+  handleEvent = (event: FetchEvent) => {
+    if (!event.respondWith || !event.request) {
+      throw new TypeError(`Expected FetchEvent, got ${event}`)
+    }
+    const response$ = this.handleRequest(event.request, event as any)
+    event.respondWith(response$)
+  }
 
+  /**
+   * @deprecated
+   * Will be removed in next major version
+   * Use self.addEventListener('fetch', yogaServer) instead
+   */
   start() {
-    self.addEventListener('fetch', this.fetchEventListener as EventListener)
+    self.addEventListener('fetch', this)
   }
 
+  /**
+   * @deprecated
+   * Will be removed in next major version
+   * Use self.removeEventListener('fetch', yogaServer) instead
+   */
   stop() {
-    self.removeEventListener('fetch', this.fetchEventListener as EventListener)
+    self.removeEventListener('fetch', this)
   }
 }
 

packages/common/src/types.ts

@@ -108,11 +108,6 @@ declare global {
   }
 }
 
-export type FetchEvent = Event & {
-  respondWith: (response: PromiseOrValue<Response>) => void
-  request: Request
-}
-
 export type FetchAPI = {
   /**
    * WHATWG compliant Request object constructor

tsconfig.json

@@ -9,7 +9,7 @@
     "experimentalDecorators": true,
     "module": "node16",
     "target": "es2018",
-    "lib": ["es6", "esnext", "es2015", "dom", "webworker"],
+    "lib": ["esnext", "webworker"],
     "suppressImplicitAnyIndexErrors": true,
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
@@ -35,5 +35,5 @@
     "jsx": "preserve"
   },
   "include": ["packages"],
-  "exclude": ["**/dist", "**/temp", "**/.bob"]
+  "exclude": ["**/dist", "**/temp", "**/.bob", "**/examples"]
 }

website/docs/integrations/integration-with-cloudflare-workers.mdx

@@ -38,7 +38,7 @@ import { createServer } from '@graphql-yoga/common'
 
 const server = createServer()
 
-server.start()
+self.addEventListener('fetch', server)
 ```
 
 > You can also check a full example on our GitHub repository [here](https://github.com/dotansimha/graphql-yoga/tree/master/examples/service-worker)