Mock All GraphQL Operations in MSW

Share this video with your friends

Social Share Links

Send Tweet
Published a year ago
Updated a year ago

Let's improve our schema-first GraphQL mocks by intercepting all GraphQL operations—both queries and mutations—using a single Mock Service Worker graphql.operation() request handler.

Lecturer: [0:00] As our application grows and starts making more GraphQL requests, it would be great to resolve them against the same schema that we have. We can of course copy and paste the executeGraphql logic across different request handlers, but that won't be a scalable approach.

[0:14] Instead, we will migrate from GraphQL query and GraphQL mutation handlers to use graphql.operation. The GraphQL operation handler will intercept all GraphQL operations regardless of their type or name, and allow us to handle them using a single responseResolver function.

[0:33] Let's move the existing executeGraphql logic from our listReviews handler to the newly added operation handler. Just like the other responseResolvers for GraphQL, we will access the query and variables arguments on the responseResolver.

[0:47] Since the GraphQL operation handler will now also intercept the addReview mutation, let's define it in our schema so that GraphQL knows about it and can resolve it. Add a new mutation called addReview with arguments author and reviewInput.

[1:07] Next, define these userInput and reviewInput types. Now that our schema understands the addReview mutation, let's add a GraphQL resolver for it in the root value object in our handler.

[1:30] We will move the logic from the addReview request handler to this GraphQL resolver. Since this resolver executes in a GraphQL context, we can't really return any HTTP responses from it, so let's replace the error response with throwing a regular error and rely on GraphQL propagating this error to the response for us.

[1:58] In the same manner, instead of returning a successful response, we will return what the addReview mutation expects, the new review object.

[2:05] Finally, let's remove the previous GraphQL request handlers because we don't need them anymore. Both our query and mutation resolve against the actual GraphQL schema now, and so will any other GraphQL requests we may add in the future, all using a single GraphQL operation request handler.