feat: support GraphQL subscriptions

[kettanaito]

• Discussion: GraphQL subscriptions API #2352
• Closes Support GraphQL subscriptions #285
• Fixes Expose standardGraphQLHandlers to type graphql.link #1509

Important

If your team can benefit from the GraphQL subscriptions support in MSW, please consider sponsoring the project. This will be a big effort, and your contribution will help to see it through. Thank you.

import { graphql } from 'msw'

const api = graphql.link('https://api.example.com/graphql')

export const handlers = [
  // Intercept GraphQL subscriptions by name.
  api.subscription('OnPostAdded', ({ subscription }) => {
    // Publish mock data or mark subscriptions as complete.
    subscription.publish({
      data: { postAdded: { id: 'abc-123' } },
    })
  })
]

Roadmap

• Make ws.link support logs: false / quiet: true to disable the default WebSocket handler logging for GraphQL subscriptions (it's an implementation detail).
  • Add tests.
  • Won't work if you reset handlers. The internal symbol will remain true and the WebSocket pubsub will not be added. Maybe add them both all the time but dedupe when getting the current handlers?
• Introduce handler grouping so pubsub and subscription handler are represented in a single graphql.subscription() call.
• Forward path parameters from the pubsub link to the public subscription handler.
• Documentation (add to the new one).

[sutt0n]

[kettanaito]

@sutt0n, I do quite share your enthusiasm!

[thearchitector]

is there an update or roadmap here to getting this into a new release, or suggestions on how to mock gql subscriptions in the interm?

[kettanaito]

@thearchitector there's a Roadmap section in the description of this PR. It will get populated as I find more things that have to be done before this is ready. So far, it's that one point.

You can follow the PR to see the gist of what GraphQL subscriptions support entails, and how you can use the existing ws.link() API to implement it. I wouldn't recommend that given we have this PR open and you can just install it directly.

There's also a message that you can sponsor this effort if your team needs this API sooner. That will give me the budget to work on it, and you will get the API. Everyone wins. Otherwise, I approach this as I do with all my open source work: when I have time and mood.

[pkg-pr-new]

Open in Stackblitz

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

commit: c8f8d23