Msw: Request to graphql server not intercepted

[bennett-gsi]

Describe the bug

Request to graphql server not intercepted

Environment

• msw: 0.16.0
• nodejs: 12.16.3
• npm: 6.14.5

To Reproduce

// src/App.js
import ApolloClient, { gql } from 'apollo-boost';
import { ApolloProvider } from '@apollo/react-hooks'; 

const client = new ApolloClient({
  uri: 'https://<SOME_DOMAIN>/graphql'
})

const TEST_MSW = gql`
  query TestMSW {
    user(id: 123) {
      firstname
      lastname
    }
  }
`;

client.query({
  query: TEST_MSW
}).then(res => console.log(res)).catch(err => console.log(err));

// src/mocks.js

import { setupWorker, graphql } from 'msw';

const worker = setupWorker(
  graphql.query("TestMSW", (req, res, ctx) => {
    return res(
      ctx.data({
        user: {
          firstname: 'John',
          lastname: 'Doe'
        }
      })
    )
  })
)

// Calling the "start" function registers the Service Worker
worker.start();

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// include mocks by msw
require('./mocks.js');

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Expected behavior

The docs mentioned that all outgoing requests will be intercepted

[bennett-gsi]

Edit: It only does not work if I have 2 tabs open on the same localhost.

[kettanaito]

Hey, @bennett-gsi. Thanks for reporting this.

There were multiple problems related to multiple tabs opened and the worker, I'd like to look into this one two.

Please, could you show me what happens with two tabs opened? Is there any error in the browser's console?

[bennett-gsi]

There is no error on the browser's console. I just looked through the network tab and noticed that the request was just passed through to the graphql server.

Another thing that I noticed was that if I make a graphql request on first load, the service worker was not installed yet and so it does not intercept the request. But maybe this is intended, because service worker may take some time to register themselves.

[kettanaito]

In case you are performing requests on load (or on component's mount), you can defer the start of your application until the mocking is ready (see Deferred start).

I'm considering to make this approach the recommended one when getting started with the library. Thanks for bumping that in my priorities list!

[bennett-gsi]

Hi @kettanaito, I just tried again today, and there's actually this warning in the console.

MSW] Detected outdated Service Worker: Currently active Service Worker (afd14c5ce43f3be6b59aad899f6e498b) is behind the latest published one (e6b416d66cdb446c2c36c6309940107d).

The mocking is still enabled, but it's highly recommended that you update your Service Worker by running:

$ npx msw init <PUBLIC_DIR>

This is necessary to ensure that the Service Worker is in sync with the library to guarantee its stability.

[kettanaito]

You're seeing an integrity check error. It means that the mockServiceWorker.js file you've registering is outdated, comparing to the latest published one. Please follow those instructions in the error message to update your worker file:

$ npx msw init <PUBLIC_DIR>

That being said, this error is always backwards-compatible, so it shouldn't affect your behavior.

I'm currently working with a GraphQL example, it's a work in progress, but the E2E test already passes. Try taking a look at that code, maybe it would help.

On the related note, have you tried that deferred started approach I've mentioned previously?

[bennett-gsi]

I've tried the deferred started approach but that first query is still not intercepted. I used the same bootstrap code as in the documentation and use the App.js as above

[kettanaito]

Thanks for trying that. At this point I'm not sure what to suggest without a reproduction repository. Could you please set up a small repository where this issue is reproduced? I could then look into it and debug much more efficiently.

[kettanaito]

Hey, @bennett-gsi. Have you got any chance to look into the reproduction of this issue?

Since the issue has been opened, MSW underwent a dramatic improvement in how it handles initial request, which would include your scenario as well.

I highly suggest to update to the latest version of the msw package, follow any potential service worker file migration guidelines in your browser's console, and let me know if the issue is fixed for you.

Thanks.