"Error: Headers x-msw-request-id forbidden"

Environment

Name	Version
msw	0.28.0
node	14.16.0
OS	Mac OS Big Sur

Testing against Apollo (inside a Gatsby app, if that helps) using Jest and react-testing-library.

Request handlers

import { graphql } from 'msw';

export const handlers = [
	graphql.query('myThing', (req, res, ctx) => {
		console.log('getting here');
		console.log(req);
		console.log(ctx);
		return res(
			ctx.data({
				myThingRoot: {
					edges: [],
				},
			})
		);
	}),
];

import { setupServer } from 'msw/node';
import { handlers } from './handlers';

export const server = setupServer(...handlers);

// In the Spec file itself
import React from 'react';
import { server } from '../../../../test/mocks/server';
import { render, fireEvent, waitFor, screen } from 'test-utils';

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

Actual request

	const { loading, error, data } = useQuery(MY_QUERY, {
		variables: {
			aVar: value,
		},
	});

Current behavior

I can verify that the execution is reaching the mock resolver, because the console.log in the handler is printing in the Jest console output. However, the response is never sent back to the client. Instead I get the following error in the console.

        at dispatchError (/Users/giantrobotbee/dev/gatsby-test/node_modules/jsdom/lib/jsdom/living/xhr/xhr-utils.js:62:19)
        at validCORSPreflightHeaders (/Users/giantrobotbee/dev/gatsby-test/node_modules/jsdom/lib/jsdom/living/xhr/xhr-utils.js:99:5)
        at Request.<anonymous> (/Users/giantrobotbee/dev/gatsby-test/node_modules/jsdom/lib/jsdom/living/xhr/xhr-utils.js:367:12)
        at Request.emit (events.js:315:20)
        at Request.onRequestResponse (/Users/giantrobotbee/dev/gatsby-test/node_modules/request/request.js:1059:10)
        at ClientRequestOverride.emit (events.js:315:20)
        at ClientRequest.<anonymous> (/Users/giantrobotbee/dev/gatsby-test/node_modules/@mswjs/interceptors/src/interceptors/ClientRequest/createClientRequestOverride.ts:324:14)
        at ClientRequest.emit (events.js:327:22)
        at HTTPParser.parserOnIncomingClient [as onIncoming] (_http_client.js:641:27)
        at HTTPParser.parserOnHeadersComplete (_http_common.js:126:17) undefined```

## Expected behavior

I expect the response to be sent back to the requester.

[ImLuze]

@kettanaito It does! It was simply a misinterpretation on my end. I have a getAlbums.graphql file which looks like this:

query getAlbums {
    albums {
        ...
    }
}

In my handler I was using graphql.query('albums') instead of graphql.query('getAlbums').

[marcosvega91]

Hi @ImLuze, I’m opening a pr in your repo with the fix 😃