msw (mock service worker) package is useful in intercepting and mocking requests in the browser. Its use of service workers means requests still appear in the network tab, creating a realistic mocking environment. With
@graphql-mocks/network-msw the requests and responses can be handled by
msw with a GraphQL handler for full GraphQL mocking in the browser.
msw also provides its own method of GraphQL mocking where a named query is responded to with hardcoded fixture data.
graphql-mocks provides a more universal mocking experience using resolvers and the GraphQL schema to reflect how real GraphQL APIs recursively resolve data.
@graphql-mocks/network-msw npm packages.
msw using the REST API Documentation.
Then integreate with the
graphql-mocks by creating or importing a
GraphQLHandler instance and passing it to the
Alternatively, instead of
/graphql, a full path url can be used also. See the
msw documentation for options on specifying the path of the request handler.
Next, follow the
msw browser integration documentation to integrate msw properly with your front-end build.
Note: The handler
src/mocks/handlers.js file created above should be imported and used with the
setupWorkers function as described in the browser integration documentation.
With everything integrated, requests in the browser should be intercepted by
msw and use the rest handler with the
GraphQLHandler for resolving GraphQL queries.
See the GraphQL docs for details on these body parameters, and making http requests.
When using the
@graphql-mocks/network-msw network handler each resolver context has an
msw property which contains the
res (response), and
msw context), from the
msw rest request handler.