feat: add operationName to GraphQL request

[ligaz]

Reasoning:

When a wildcard GraphQL query handler is registered (via regex) it is useful to have the parsed operationName in the request. Having the operationName allows the consumers to implement more complex/dynamic resolvers.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 970548f:

Sandbox	Source
MSW React	Configuration

[kettanaito]

Thanks for shipping this improvement, @ligaz!

Could you please double-check that request.operationName is also properly available in TypeScript when using MSW?

You can do that by pasting the following code in any TS project with MSW installed:

import { graphql } from 'msw'

export const handlers = [
  graphql.query(/.+/, (req) => req.operationName.toUpperCase())
]

[ligaz]

Thanks @kettanaito for the follow up. I just tested this locally and the operationName is available on the request object.

Here are the steps:

# Create a React app with TypeScript template
yarn create react-app my-app --template typescript

# Add the package generated from the MSW CI build
yarn add https://pkg.csb.dev/mswjs/msw/commit/0f7697fd/msw

// dummy handlers.ts
import { graphql } from 'msw';

export const handlers = [
  graphql.query(/.+/, (req, res, ctx) =>
    req.operationName === 'MyQuery' ? res(ctx.data({})) : res(ctx.data({})),
  ),
];

Here is the type declaration signature that is being generated:

declare class GraphQLRequest<Variables extends GraphQLVariables> extends MockedRequest<GraphQLRequestBody<Variables>> {
    readonly variables: Variables;
    readonly operationName: string;
    constructor(request: MockedRequest, variables: Variables, operationName: string);
}

[kettanaito]

@ligaz, do you think it'd make sense to also expose the operationType? ("query"/"mutation")

[ligaz]

@ligaz, do you think it'd make sense to also expose the operationType? ("query"/"mutation")

I do not have such a need in my current project. If someone expresses such a need in the future we can extend the request to provide this information as well.

[kettanaito]

Released: v1.2.0 🎉

This has been released in v1.2.0!

• 📄 Release notes
• 📦 npm package

Make sure to always update to the latest version (npm i msw@latest) to get the newest features and bug fixes.

---

Predictable release automation by @ossjs/release.