How do I get a Postman Mock API with GraphQL to successfully match the body when using the Apollo Client?

Question

I want to use the Postman Mock API for mocking graphql queries. It is working just fine when I send a request to the Postman Mock API from within Postman, however, when I use the Apollo Client from my React app, the response from the Postman Mock API says that there is no matching request.

I am using the request body matching header (x-mock-match-request-body: true) as suggested here in both the Postman call to the mock API and the Apollo Client call to the mock API.

Here are my Postman Mock API logs:

Body payload of a successful call to the mock API directly from Postman (shortened for brevity):

{operationName: "getThings", variables: {}, query: "query getThings {
  things {
    id
    status
    __typename
  }
}"}

Body payload of a failed call to the mock API from Apollo Client (shortened for brevity):

{operationName: "getThings", variables: {}, query: "query getThings {
  things {
    id
    status
    __typename
  }
}"}

This is the response that we get from postman

I have also tried converting the Postman mock API call to just a REST API call with a JSON body of a GraphQL request, but that also did not work and I got the same result.

Finally, this thread on the Postman forums appears to be the same issue, but nothing on it has worked either.

Does anyone know why the request body is not matching when sending from the Apollo client?

Answer 1

It turns out that I just had a typo in my url when hitting the postman mock API... :facepalm:

However, one thing that I should point out is that in postman when matching on the request body, you will have to use raw and copy the payload that is sent from the browser instead of using the type GraphQL due to what is most likely the "operationName" being sent from the Apollo client. Postman GraphQL payloads don't appear to let you set the operation name, so the body will never match unless you explicitly set the operation name in a JSON request.

Here is a step by step if anyone needs it:

1. Create an example request on the Postman GraphQL endpoint for the mock endpoint as you would for any other request
2. Set the x-mock-match-request-body to true
3. Set the content-type header to application/json
4. Set the body to raw and type JSON
5. Don't forget to return __typename because the Apollo client requests this for every request