feat: make GraphQL a peer dependency, support GraphQL v15.0 (#1356)

* feat: move 'graphql' to peerDependencies. Add support for v15 of 'graphql'

* feat: marking 'graphql' as an optional peer dependency

The 'graphql' code that is needed at runtime will be dynamically loaded. Existing static imports of
'graphql' are designated as type imports.

package.json

@@ -77,7 +77,6 @@
     "chalk": "4.1.1",
     "chokidar": "^3.4.2",
     "cookie": "^0.4.2",
-    "graphql": "^16.3.0",
     "headers-polyfill": "^3.0.4",
     "inquirer": "^8.2.0",
     "is-node-process": "^1.0.1",
@@ -116,6 +115,7 @@
     "eslint-plugin-prettier": "^3.4.0",
     "fs-extra": "^10.0.0",
     "fs-teardown": "^0.3.0",
+    "graphql": "^16.3.0",
     "jest": "26",
     "json-bigint": "^1.0.0",
     "lint-staged": "^11.0.1",
@@ -134,9 +134,13 @@
     "webpack-dev-server": "^3.11.2"
   },
   "peerDependencies": {
+    "graphql": "^15.0.0 || ^16.0.0",
     "typescript": ">= 4.2.x <= 4.7.x"
   },
   "peerDependenciesMeta": {
+    "graphql": {
+      "optional": true
+    },
     "typescript": {
       "optional": true
     }

src/context/errors.ts

@@ -1,4 +1,4 @@
-import { GraphQLError } from 'graphql'
+import type { GraphQLError } from 'graphql'
 import { ResponseTransformer } from '../response'
 import { jsonParse } from '../utils/internal/jsonParse'
 import { mergeRight } from '../utils/internal/mergeRight'

src/graphql.ts

@@ -1,4 +1,4 @@
-import { DocumentNode, OperationTypeNode } from 'graphql'
+import type { DocumentNode, OperationTypeNode } from 'graphql'
 import { ResponseResolver } from './handlers/RequestHandler'
 import {
   GraphQLHandler,
@@ -83,7 +83,7 @@ const standardGraphQLHandlers = {
    * })
    * @see {@link https://mswjs.io/docs/api/graphql/query `graphql.query()`}
    */
-  query: createScopedGraphQLHandler(OperationTypeNode.QUERY, '*'),
+  query: createScopedGraphQLHandler('query' as OperationTypeNode, '*'),
 
   /**
    * Captures a GraphQL mutation by a given name.
@@ -93,14 +93,14 @@ const standardGraphQLHandlers = {
    * })
    * @see {@link https://mswjs.io/docs/api/graphql/mutation `graphql.mutation()`}
    */
-  mutation: createScopedGraphQLHandler(OperationTypeNode.MUTATION, '*'),
+  mutation: createScopedGraphQLHandler('mutation' as OperationTypeNode, '*'),
 }
 
 function createGraphQLLink(url: Path): typeof standardGraphQLHandlers {
   return {
     operation: createGraphQLOperationHandler(url),
-    query: createScopedGraphQLHandler(OperationTypeNode.QUERY, url),
-    mutation: createScopedGraphQLHandler(OperationTypeNode.MUTATION, url),
+    query: createScopedGraphQLHandler('query' as OperationTypeNode, url),
+    mutation: createScopedGraphQLHandler('mutation' as OperationTypeNode, url),
   }
 }
 

src/handlers/GraphQLHandler.ts

@@ -1,4 +1,4 @@
-import { DocumentNode, OperationTypeNode } from 'graphql'
+import type { DocumentNode, OperationTypeNode } from 'graphql'
 import { SerializedResponse } from '../setupWorker/glossary'
 import { data } from '../context/data'
 import { extensions } from '../context/extensions'

src/utils/internal/parseGraphQLRequest.ts

@@ -1,8 +1,7 @@
-import {
+import type {
   DocumentNode,
   OperationDefinitionNode,
   OperationTypeNode,
-  parse,
 } from 'graphql'
 import { GraphQLVariables } from '../../handlers/GraphQLHandler'
 import { getPublicUrlFromRequest } from '../request/getPublicUrlFromRequest'
@@ -41,6 +40,9 @@ export function parseDocumentNode(node: DocumentNode): ParsedGraphQLQuery {
 
 function parseQuery(query: string): ParsedGraphQLQuery | Error {
   try {
+    // Since 'graphql' is an optional peer dependency,
+    // we'll attempt to import it dynamically
+    const { parse } = require('graphql')
     const ast = parse(query)
     return parseDocumentNode(ast)
   } catch (error) {