Mock service worker on node post and grapql.query not working

I have a node app that uses a library to make a graphql query after it authenticated. The following graphql query does not pick up the request:

  graphql.query(/^(.+?)$/, (req, res, ctx) => {
    console.log('keys:', Object.keys(req))
    console.log('query:', req.query)
    console.log('variables', req.variables)
    return res(
      ctx.data({
        data: [],
      })
    )
  }),

Tried many combinations but /^(.+?)$/ should pick up anything. When adding the following:

  rest.post('*', (req, res, ctx) => {
    console.log('POST ALL', req.url.pathname)
    if (req.url.pathname === '/oauth/token') {
      return res(
        ctx.status(200),
        ctx.json({
          valid:'token'
        })
      )
    }
    return req.json().then((body) => {
      console.log('body:', body)
      console.log('pass through')
      return req.passthrough()
    })
  }),

It logs the following:

POST ALL /oauth/token
POST ALL /project/graphql
    body: {
      operationName: 'ProductTypeId',
      query: '\n' +
        '    query fetchProductTypeId($where: String) {\n' +
        '      productTypes(where: $where, limit: 1) {\n' +
        '        results {\n' +
        '          id\n' +
        '        }\n' +
        '      }\n' +
        '    }\n' +
        '  ',
      variables: { where: 'key="typeKey"' }
    }
pass through

But when trying handlers:

  graphql.query(/^(.+?)$/, (req, res, ctx) => {
    console.log('keys:', Object.keys(req))
    console.log('query:', req.query)
    console.log('variables', req.variables)
    return res(
      ctx.data({
        data: [],
      })
    )
  }),
  rest.post('*/oauth/token', (req, res, ctx) => {
    log('POST', req.url.pathname)
    if (req.url.pathname === '/oauth/token') {
      return res(
        ctx.status(200),
        ctx.json({
          valid:'token'
        })
      )
    }
    log('pass through')
    return req.passthrough()
  }),

The token request handler is used but then the library makes the graphql request and the graphql handler is never used and instead I get:

[MSW] Warning: captured a request without a matching request handler:

  • POST https://server/project/graphql

If you still wish to intercept this unhandled request, please create a request handler for it.
Read more: https://mswjs.io/docs/getting-started/mocks

Nice of msw to tell me but the handler is obviously there. Tried graphql.query('ProductTypeId' and graphql.query('fetchProductTypeId' but same result. Looks like having rest.post and and graphql.query handler breaks the graphql even though the post only picks up the authentication.

update

Removed all the handlers except the graphql and provided valid credentials to create a token. So the only handler I have is:

  graphql.query('fetchProductTypeId', (req, res, ctx) => {
    console.log('keys:', Object.keys(req))
    console.log('query:', req.query)
    console.log('variables', req.variables)
    return res(
      ctx.data({
        data: [],
      })
    )
  }),

Then in start server I have:

  server.listen({
    onUnhandledRequest: (req) => {
      console.log('unhandled')
      console.log('path:::', req.url.pathname)
      req
        .json()
        .then((body) => {
          console.log('body:::', body)
        })
        .catch((e) => e)
    },
  })

This will log:

unhandled
path::: /project/graphql
    body::: {
      query: 'query fetchProductTypeId($where: String) {\n' +
        '      productTypes(where: $where, limit: 1) {\n' +
        '        results {\n' +
        '          id\n' +
        '        }\n' +
        '      }\n' +
        '    }\n' +
        '  ',
      operationName: 'fetchProductTypeId',
      variables: { where: 'key="key"' }
    }

Maybe graphql is just completely broken in the version of msw I happened to have installed (version 0.47.4)

And graphql.query(/^(.+?)$/ does the same thing, that handler may as well not be there at all.

** Update

I see that graphql.operation((req, res, ctx) as a handler isn't getting called either so msw must just not understand that my graphql request is not a graphql request even though body is logged and is obviously a graphql request.

Just created an issue

I see the library I use created a header 'Content-Type': 'application/graphql', seems fine according to a quick read here but when I change it to 'Content-Type': 'application/json' (library allows me to add headers) it will be picked up by the handler.