1 of 18

How Intuit open sourced apollo-mock-http

Vamshi Suram, Senior Software Engineer

Sept 7th 2024

1

2 of 18

MISSION

Intuit Confidential and Proprietary

2

3 of 18

Agenda

Introduction to GraphQL & React
Problem Statement
Demo of our approach
Q&A

Vamshi

3

4 of 18

GraphQL Intro

Web Applications flow

UI (Browser)

Backend

Database

Vamshi

4

5 of 18

GraphQL Intro

Web Applications flow (1 level down)

components

Apollo Client

Backend

UI (Browser)

Vamshi

5

6 of 18

What is GraphQL ?

Query

Response

Operation Name

Vamshi

6

7 of 18

Problem Statement ?

Vamshi

7

8 of 18

Control on data?

components

Apollo Client

Backend

UI (Browser)

Vamshi

8

9 of 18

Sample React GraphQL app

Vamshi

9

10 of 18

Problem Statement (scenarios)

API not ready / API is down!!

Mock data, undo mocking - problems

Simulate error scenarios, missing data..

Expensive re-setup

Ex: delete employee

Vamshi

10

11 of 18

How to mock data?

components

Apollo Client

Backend

UI (Browser)

Apollo Client

Vamshi

11

12 of 18

Initial approach

components

Apollo Client

Backend

Mocked responses

Mocking made easy (complete client-side)

One point maintenance, PROD quality code

Disconnected completely

*Mock all responses of UI - not maintainable!!

Vamshi

12

13 of 18

Challenges - scope for improvement

Mocking data is hard, and lot of undo work, After undo - is app working?
Mock some stuff, sometimes..!!
Enable / disable mocking
Can I push the code to Prod?
Easy to install / use

Better Solution?

Maintainable way of data mocking

Vamshi

13

14 of 18

New and better approach

components

Apollo Client

Backend

Mocked response

Mocking made easy (complete client-side)

One point maintenance, PROD quality code

Orchestration of workflows (actual/mock mix)

Vamshi

14

15 of 18

Simple API

Demo (CodeSandbox)

Vamshi

15

16 of 18

Resources

Apollo-client
Apollo-mock-http npm package
Apollo-mock-http GitHub Repo

Vamshi

16

17 of 18

Q&A

17

18 of 18

Q&A

#slido-name

18