Request to graphql server not intercepted

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]

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]

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!