Struggling to Mock graphQL Data? Open Source apollo-mock-http to the Rescue.

Vamshi Suram — Wed, 08 Feb 2023 18:30:00 +0000

This blog post is co-authored by Arun Singh (Development Manager), Anavatya C.V. (Senior Software Engineer) at Intuit.

Are you struggling with mocking GraphQL data for your product development when an API is not available? Is mocking data directly in your components leading to unclean coding practices and indeterministic outputs that require cleanup?

Struggle no more.

Our newly-introduced open source project apollo-mock-http is an easy and maintainable way to inject mock data into Apollo GraphQL Client for fast front-end feature development decoupled from the back-end API.

TL;DR — You can check out this codesandbox link to quickly get started.

As a global financial technology platform company serving more than 100M consumer and small business customers around the world with TurboTax, Credit Karma, QuickBooks, and Mailchimp, accelerating development velocity is a top priority for Intuit. Like many large enterprise companies, our platform architecture is built on a modern SaaS development environment, and we take full advantage of technologies like React, GraphQL, micro-frontends, to name a few — and Apollo Client when working with GraphQL.

While the Apollo Client framework provides a clean API to fetch data from remote endpoints, it can be a “magical box” for developers when it comes to how the framework gets the data, and returns it to the application. Until now, there hasn’t been a practical methodology for injecting mock data into Apollo Client to work along with actual data. To solve this, our team has developed an apollo-mock-http library, and contributed it to the open source community, to enable developers to simulate various back-end scenarios (e.g., success, error, missing data) for selective queries or mutations.

Before going into the details of how apollo-mock-http works, let’s take a look at how Apollo Client is typically configured in applications. For data fetching, Apollo Client uses a set of links, which perform different operations on HTTP requests. Of these links, the last one is HTTP link, which actually calls the back-end. Once the response is received, it will be sent through the set of links, finally reaching the UI components.

This is where the fun began for our team.

We wondered what would happen if we placed a dummy HTTP link before, which could conditionally block some requests and allow others to reach the last HTTP link? By providing an alternate path, we hypothesized that we’d be able to simulate different scenarios and return mock data for requests we were most interested in, and let others reach the back-end to get real data entirely from the front-end.

It worked!

To see how, check out the apollo-mock-http library animation below.

Mocking made easy with apollo-mock-http

Benefits at-a-glance:

GraphQL data mocking
Mixed mocking — selective queries/mutations
Near network layer mocking — components are clean
Scalable, and one-point maintenance for mocking, with enable/disable flag — ready for production/integration testing, etc.
100% code coverage, automated builds, semantic releases with documentation examples and a code sandbox playground

To use this for your next project, install the library using this command:

yarn add apollo-mock-http -D

Once added to your project, add a configuration (see example below) containing a set of links that make up your Apollo Client instance, mock data for the queries involved, and a few other helper attributes. Once provided, the library will inject a dummy link just before the last HTTP link. This way we can have control over the requests, and tweak responses for different scenarios.

import { injectMock } from 'apollo-mock-http';

injectMock({
  links,
  enableMock: true,
  targetOperations: ['getCompanyName'],
  mockData: {                                            
    'getCompanyName': {
        data: { name: 'Test', __typename: 'String' }, 
        error: null
    },
  },

  // If your link follows a specific structure, you can use this to customize
  createCustomLinkObj: (generatedMockLink) => {
    return {
      linkName: 'mockHttp',
      linkObj: generatedMockLink
    };
  }
})

To learn more, go to readme for the apollo-mock-http repo in GitHub.

As an industry leader in open source infrastructure tools built on cloud-native technologies such as Kubernetes and Argo, we’re proud to contribute one more open source project that can help a lot of developers out there. We look forward to collaborating with you, so please share any suggestions you may have by creating issues in the GitHub repo and follow the required setup contributing guide.

Many thanks to my awesome friends and colleagues here at Intuit for bringing this project to light. Especially Anavatya C.V (Senior Software Engineer), Tharun Mathew Paul (Senior Software Engineer), Ramit Garg (Senior Software Engineer), Arun Singh (Development Manager), Punam Goswami (Principal Software Engineer), Guarav Misra (Group Development Manager).

If this blog has inspired your interest to learn more about what it’s like to work on a high performing engineering team at Intuit, visit here to join our talent community!

DEV Community: Vamshi Suram

Struggling to Mock graphQL Data? Open Source apollo-mock-http to the Rescue.

Mocking made easy with apollo-mock-http