Not interecepting GraphQL request ONLY in the test

Environment

Name	Version
msw	0.21.3
node	14.15.0
OS	MacOS 10.15.7 (19H2)
Relay Hooks	3.5.2
Jest	24.9.0

Request handlers

// Example of declaration. Provide your code here.
import { setupServer } from 'msw/node'
import { graphql } from 'msw'

const server = setupServer(
  graphql.query('SponsorAddressesQuery', (req, res, ctx) => {
    return res(
      ctx.data({
        "sponsor": {
          "__typename": "CompanySponsor",
          "addresses": [
            {
              "id": "126cf883-ca26-4b5e-ad7f-4389a0faaf98",
              "number": "1231",
              "city": "SÃO PAULO",
              "state": "SP",
              "neighborhood": "PINHEIROS",
              "zipCode": "05404013",
              "additionalInfo": "1114",
              "street": "RUA ARTUR DE AZEVEDO 123"
            }
          ],
          "id": "04a427b5-172e-42b6-8638-7bc0f246cc7c"
        }
      })
    );
  })
)

server.listen()

Actual request

I’m dealing with GraphQL using Relay

// Example of making a request. Provide your code here.

// my query file
import graphql from 'babel-plugin-relay/macro';

export const getQuery = () => {
  return graphql`
    query SponsorAddressesQuery($id: ID!) {
      addresses { ... }
    }
  `;
};


// how do I use it
import { useQuery } from 'relay-hooks';

useQuery(getQuery(), { id: '123' });

Current behavior

Currently my setup is working on the browser, but it seems not intercepting during my Jest test. It’s returning nothing in the test, even errors.

Expected behavior

Expect to return mocked data.

[lai-caju]

Thanks @kettanaito for support! I’ll close this issue, since that we figured out the problem was in my application. It wasn’t about MSW or Relay, my application was having some exception before the request.

[kettanaito]

@eugeneoshepkov I think that is Apollo’s behavior. MSW will set any given ctx.data as a GraphQL response payload. There’s no query-compliance validation whatsoever. When a GraphQL client receives a partial response payload according to a query it’s up to it to handle this scenario. It’s a server’s responsibility to validate a payload against a query, as the server produces errors that may contain useful hints alike “cannot return null for non-nullable “price” field”. As to why you receive an empty payload that I’m not sure, you should get exactly what you specified in the response resolver.

You can type guard your mocks if you are using TypeScript and have GraphQL operation types generated. graphql.* request handlers accept generic types that will validate your returned payload on build time, alerting you if you’re responding with a partial payload. Take a look at the GraphQL request handlers with TypeScript usage example.