feat!: msw/graphql, graphql as an optional peer dependency

[kettanaito]

• Related to Improvements (for Vitest) #2687
• Fixes Vitest tests fail with error "Cannot find package 'graphql' imported" in v2.4.0 #2248
• Fixes List "graphql" as a peer dependency #2185

Motivation

msw leaks the graphql namespace through the root entrypoints, which makes graphql import problematic for developers who aren't even using GraphQL. This negatively impacts the bundle footprint as well.

This is a change in a set of changes aimed to improve DX and bundle size of msw across the board.

⚠️ BREAKING CHANGES

• graphql namespace and any related values/types are no longer exported from msw. Please use a designated msw/graphql export path to work with GraphQL requests.
• msw/core/graphql export path has been changed to msw/graphql for brevity.

Todos

• Set the target branch to feat/3.0. This is not meant to be released separately.
• Rebase on top of feat: use the network source architecture (defineNetwork) #2650 to benefit from setupWorker/setupServer accepting AnyHandler and not RequestHandler, which is incompatible with GraphQLHandler

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: e9575c8c-0c26-471f-b847-b2e817aab139

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/graphql-peer-dep

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[kettanaito]

@Andarist, hi 👋 Mentioning you just in case so this wouldn't conflict with the work you're doing. TL;DR msw/graphql is an explicit entrypoint now, graphql is a proper optional peer dependency. Added a new build config to tsup.config.ts. Dropped the graphqlImport plugin since there's no need to guard against those imports in the core—nothing depends on grahpql there anymore.

[THETCR]

This is not a new feature for the end user, but a change to the auxiliary tools (dependencies etc) right?

According to conventional commits this would be the build type or refactor.

[kettanaito]

@THETCR, this changes how you import GraphQL handlers in a breaking way. This is entirely user-facing:

-import { graphql } from 'msw'
+import { graphql } from 'msw/graphql'

As such, this will be released as a breaking change. There's no way of achieving a lean module graph without taking most of the things out of the root export.

[socket-security]

No dependency changes detected. Learn more about Socket for GitHub.

👍 No dependency changes detected in pull request

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/msw@2691

commit: 3e0d17d

[kettanaito]

Update

Would be nice to merge after #2760 since this PR also drops the GraphQL plugin.

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (2)

test/typings/graphql-typed-document-node.test-d.ts (1)

1-3: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Unrelated: TypedDocumentNode reverted to a value import.

Line 3 dropped the type keyword from the TypedDocumentNode import, even though it's only used in a type position (line 5). This looks like an unintended side-effect of the import-splitting edit rather than part of the GraphQL entrypoint migration. tsd only statically analyzes .test-d.ts files rather than executing them, so this won't break at runtime, but it's inconsistent with type-only usage and could cause friction if this file is ever processed under stricter compiler settings (e.g. isolatedModules/verbatimModuleSyntax).

Proposed fix

-import { TypedDocumentNode } from '`@graphql-typed-document-node/core`'
+import type { TypedDocumentNode } from '`@graphql-typed-document-node/core`'

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@test/typings/graphql-typed-document-node.test-d.ts` around lines 1 - 3, The
TypedDocumentNode import in the graphql-typed-document-node tsd test should
remain type-only since it is only used in a type position. Update the import in
the test file to use the type modifier again, keeping the existing HttpResponse
and graphql value imports unchanged, and make sure the change is confined to the
test import setup rather than the GraphQL migration logic.

test/typings/graphql-typed-document-string.test-d.ts (1)

1-3: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Same unrelated type-import regression as graphql-typed-document-node.test-d.ts.

DocumentTypeDecoration (line 3) is used only in a type position but is no longer imported with type. Likely collateral from the mechanical import split rather than an intentional change.

Proposed fix

-import { DocumentTypeDecoration } from '`@graphql-typed-document-node/core`'
+import type { DocumentTypeDecoration } from '`@graphql-typed-document-node/core`'

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@test/typings/graphql-typed-document-string.test-d.ts` around lines 1 - 3, The
type-only import for DocumentTypeDecoration in
graphql-typed-document-string.test-d.ts was split incorrectly, leaving it as a
value import even though it is only used in a type position. Update the import
alongside the other typings in this test file so DocumentTypeDecoration is
imported with type, matching the pattern used in
graphql-typed-document-node.test-d.ts and preserving the mechanical import split
behavior.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@package.json`:
- Around line 126-130: Add a types condition to the ./graphql export in
package.json so the new subpath matches the other public exports and TypeScript
can resolve declarations correctly. Update the export map alongside the existing
module-sync, module, import, and default entries for the graphql subpath,
keeping the structure consistent with the other package export entries.

In `@tsup.config.ts`:
- Around line 63-79: The graphql subpath export is missing a types entry, so
TypeScript consumers cannot resolve the generated declarations. Update the
package.json export for the graphql entry to include a types condition alongside
the existing import/require targets, pointing it to the graphql declaration file
produced by graphqlConfig. Keep the existing build setup in tsup.config.ts
unchanged and align the graphql export shape with the other subpaths.

---

Nitpick comments:
In `@test/typings/graphql-typed-document-node.test-d.ts`:
- Around line 1-3: The TypedDocumentNode import in the
graphql-typed-document-node tsd test should remain type-only since it is only
used in a type position. Update the import in the test file to use the type
modifier again, keeping the existing HttpResponse and graphql value imports
unchanged, and make sure the change is confined to the test import setup rather
than the GraphQL migration logic.

In `@test/typings/graphql-typed-document-string.test-d.ts`:
- Around line 1-3: The type-only import for DocumentTypeDecoration in
graphql-typed-document-string.test-d.ts was split incorrectly, leaving it as a
value import even though it is only used in a type position. Update the import
alongside the other typings in this test file so DocumentTypeDecoration is
imported with type, matching the pattern used in
graphql-typed-document-node.test-d.ts and preserving the mechanical import split
behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 4e2f807b-6c9e-44b3-ab70-d5eb8ccc52d9

📥 Commits

Reviewing files that changed from the base of the PR and between 6ada87e and 45be0cc.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (63)

• config/plugins/esbuild/graphQLImportPlugin.ts
• config/replaceCoreImports.js
• package.json
• src/core/experimental/frames/http-frame.test.ts
• src/core/experimental/frames/websocket-frame.test.ts
• src/core/experimental/handlers-controller.test.ts
• src/core/handlers/RequestHandler.ts
• src/core/index.ts
• src/core/utils/executeHandlers.ts
• src/core/utils/internal/isHandlerKind.test.ts
• src/core/utils/internal/parseGraphQLRequest.test.ts
• src/graphql/graphql-handler.test.ts
• src/graphql/graphql-handler.ts
• src/graphql/graphql.test.ts
• src/graphql/graphql.ts
• src/graphql/index.ts
• src/graphql/parse-graphql-request.ts
• test/browser/graphql-api/anonymous-operation.mocks.ts
• test/browser/graphql-api/anonymous-operation.test.ts
• test/browser/graphql-api/cookies.mocks.ts
• test/browser/graphql-api/custom-predicate.mocks.ts
• test/browser/graphql-api/custom-predicate.test.ts
• test/browser/graphql-api/document-node.mocks.ts
• test/browser/graphql-api/errors.mocks.ts
• test/browser/graphql-api/extensions.mocks.ts
• test/browser/graphql-api/link.mocks.ts
• test/browser/graphql-api/logging.mocks.ts
• test/browser/graphql-api/multipart-data.mocks.ts
• test/browser/graphql-api/mutation.mocks.ts
• test/browser/graphql-api/operation-reference.mocks.ts
• test/browser/graphql-api/operation.mocks.ts
• test/browser/graphql-api/query.mocks.ts
• test/browser/graphql-api/response-patching.mocks.ts
• test/browser/graphql-api/variables.mocks.ts
• test/browser/msw-api/setup-worker/listHandlers.mocks.ts
• test/browser/setup/webpackHttpServer.ts
• test/node/graphql-api/anonymous-operations.test.ts
• test/node/graphql-api/batched-queries.apollo.test.ts
• test/node/graphql-api/batched-queries.batched-execute.test.ts
• test/node/graphql-api/compatibility.node.test.ts
• test/node/graphql-api/content-type.test.ts
• test/node/graphql-api/cookies.test.ts
• test/node/graphql-api/custom-predicate.node.test.ts
• test/node/graphql-api/extensions.node.test.ts
• test/node/graphql-api/response-patching.node.test.ts
• test/node/graphql-api/typed-document-node.test.ts
• test/node/graphql-api/typed-document-string.test.ts
• test/node/msw-api/setup-server/listHandlers.node.test.ts
• test/node/msw-api/setup-server/scenarios/graphql.node.test.ts
• test/node/regressions/many-request-handlers-jsdom.test.ts
• test/node/regressions/many-request-handlers.test.ts
• test/node/regressions/mixed-graphql-http-with-query-in-body.node.test.ts
• test/support/alias.ts
• test/typings/custom-handler.test-d.ts
• test/typings/custom-resolver.test-d.ts
• test/typings/graphql-custom-predicate.test-d.ts
• test/typings/graphql-typed-document-node.test-d.ts
• test/typings/graphql-typed-document-string.test-d.ts
• test/typings/graphql.test-d.ts
• test/typings/regressions/request-handler-type.test-d.ts
• test/typings/setup-server.test-d.ts
• test/typings/setup-worker.test-d.ts
• tsup.config.ts

💤 Files with no reviewable changes (3)

• config/plugins/esbuild/graphQLImportPlugin.ts
• test/browser/setup/webpackHttpServer.ts
• src/core/index.ts