docs

.changeset/green-badgers-work.md

@@ -8,13 +8,15 @@ The execution of subsequent GraphQL resolvers is now aborted if the incoming HTT
 This reduces the load of your API in case incoming requests with deep GraphQL operation selection sets are canceled.
 
 ```ts
-import { createYoga, useExecutionCancellation } from 'graphql-yoga'
+import { createYoga, useExecutionCancelation } from 'graphql-yoga'
 
 const yoga = createYoga({
-  plugins: [useExecutionCancellation()]
+  plugins: [useExecutionCancelation()]
 })
 ```
 
+[Learn more in our docs](https://graphql-yoga.com/docs/features/execution-cancelation)
+
 **Action Required** In order to benefit from this new feature, you need to update your integration setup for Fastify, Koa and Hapi.
 
 ```diff

examples/graphql-ws/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "check": "tsc --pretty --noEmit",
+    "dev": "cross-env NODE_ENV=development ts-node-dev --exit-child --respawn src/index.ts",
     "start": "ts-node src/index.ts"
   },
   "dependencies": {
@@ -13,7 +14,9 @@
     "ws": "8.13.0"
   },
   "devDependencies": {
+    "cross-env": "7.0.3",
     "ts-node": "10.9.1",
+    "ts-node-dev": "2.0.0",
     "typescript": "5.1.6"
   }
 }

examples/request-cancelation/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "example-request-cancelation",
+  "version": "0.0.0",
+  "description": "",
+  "author": "Laurin Quast <[email protected]>",
+  "license": "MIT",
+  "private": true,
+  "module": "commonjs",
+  "keywords": [],
+  "scripts": {
+    "check": "tsc --pretty --noEmit",
+    "dev": "cross-env NODE_ENV=development ts-node-dev --exit-child --respawn src/main.ts",
+    "start": "ts-node src/main.ts"
+  },
+  "dependencies": {
+    "graphql": "16.6.0",
+    "graphql-yoga": "5.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.16.16",
+    "@whatwg-node/fetch": "^0.9.17",
+    "cross-env": "7.0.3",
+    "ts-node": "10.9.1",
+    "ts-node-dev": "2.0.0",
+    "typescript": "5.1.6"
+  }
+}

examples/request-cancelation/src/main.ts

@@ -0,0 +1,61 @@
+import { createServer } from 'node:http';
+import { createLogger, createSchema, createYoga, useExecutionCancelation } from 'graphql-yoga';
+
+const logger = createLogger('debug');
+
+const schema = createSchema({
+  typeDefs: /* GraphQL */ `
+    type Query {
+      user: User
+    }
+
+    type User {
+      id: ID!
+      name: String!
+      bestFriend: User
+    }
+  `,
+  resolvers: {
+    Query: {
+      async user(_, __, { request }) {
+        logger.info('resolving user');
+        await new Promise((resolve, reject) => {
+          const timeout = setTimeout(resolve, 5000);
+          request.signal.addEventListener('abort', () => {
+            clearTimeout(timeout);
+            reject(request.signal.reason);
+          });
+        });
+        logger.info('resolved user');
+
+        return {
+          id: '1',
+          name: 'Chewie',
+        };
+      },
+    },
+    User: {
+      bestFriend() {
+        logger.info('resolving user best friend');
+
+        return {
+          id: '2',
+          name: 'Han Solo',
+        };
+      },
+    },
+  },
+});
+
+// Provide your schema
+const yoga = createYoga({
+  plugins: [useExecutionCancelation()],
+  schema,
+  logging: logger,
+});
+
+// Start the server and explore http://localhost:4000/graphql
+const server = createServer(yoga);
+server.listen(4000, () => {
+  console.info('Server is running on http://localhost:4000/graphql');
+});

examples/request-cancelation/tsconfig.json

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

website/src/pages/docs/features/_meta.ts

@@ -3,6 +3,7 @@ export default {
   graphiql: 'GraphiQL',
   context: 'GraphQL Context',
   'error-masking': 'Error Masking',
+  'execution-cancelation': 'Execution Cancelation',
   introspection: 'Introspection',
   subscriptions: 'Subscriptions',
   'file-uploads': 'File Uploads',