Mock queries with Mock Service Worker

[bud-mo]

Hi all!
I am trying to use Mock Service Worker to mock some gql queries as I don't want to make requests while developing nor while running some tests.

With POST/GET API calls it works great, so into my gatsby-node I can mock anything I want but graphql.query() cannot intercept anything.

I am using the gatsby-source-contentful plugin to get data from Contentful.

Any idea?

How to reproduce: Initialize MSW as described into the getting started and perform a query into gatsby-node.

[kettanaito]

Hey, @bud-mo.

If I understand your requirements correctly, you wish to intercept and mock a GraphQL query that happens in gatsby-node. To do so, let's have a quick moment to understand how MSW works in Node.js. As you may know, Service Worker API is a browser-only API, so in order to intercept requests in Node.js MSW patches the native request issuing modules, like http or XMLHttpRequest, and thus can know when you make a request. It's important to understand that this patching is applied to the entire process, and can only intercept requests from the same process it's being applied in.

Knowing that, we can make the conclusion that to intercept a GraphQL operation (any request, really), we must initiate MSW in the same process where that request happens. I'd expect that following the Node.js integration guidelines and applying them to the gatsby-node module would be enough.

// gatsby-node.js
const { graphql } = require('msw')
const { setupServer } = require('msw/node')

const server = setupServer(
  graphql.query('MyQueryName', (req, res, ctx) => {
    return res(ctx.data({ payload: { mocked: true }}))
  })
)

server.listen()

A couple of things to pay attention to:

• Make sure you start the "server" via server.listen().
• Make sure the query name you pass to graphql.query request handler is the same query name that's being performed. Anonymous queries cannot be intercepted this way, you need to use graphql.operation and implement the predicate by yourself in that case.

If you set this up but your request is still not intercepted, we have a neat guide you can follow to debug that. Hope this helps.

[kettanaito]

As a side-note, evaluate carefully whether you really wish to mock a query in the Gatsby setup file. What is the use case for that?

[bud-mo]

Hi @kettanaito, thank you.

I did exactly what You described. I added the server.listen() (and other code) to my gatsby-node.js file and it works well for GET/POST requests. (On development mode I am using mocked responses).
About the query name I checked them, but none of them works.

I tried to make some debugging but I did not found any hint on why is not working. I will make another try.

[kettanaito]

Feel free to submit a reproduction repository for the maintainers to look at.