How Airbnb Leverages LLMs and @generateMock for Scalable, Type‑Safe GraphQL Mocking

Introduction

Generating effective and realistic mock data for GraphQL testing and prototyping has been a persistent industry challenge. Manual mock creation is labor‑intensive, and random value generators lack the domain context needed for meaningful data, diverting engineers from building actual features.

Main Challenges

Manual creation of mock data is time‑consuming and error‑prone, especially for large queries spanning hundreds of lines.

Without a backend, frontend engineers cannot reliably prototype or demonstrate UI, forcing them to hard‑code data or use ad‑hoc proxies.

Hand‑written mocks drift from the evolving schema, reducing test quality over time.

Goals

Eliminate the need for engineers to write mock data manually.

Create highly realistic mock data that matches UI designs and supports high‑quality demos.

Keep engineers in a local closed‑loop workflow without switching tools.

@generateMock Directive

Airbnb introduced a new client‑side GraphQL directive, @generateMock, which can be attached to any operation, fragment, or field. The directive accepts optional parameters:

id : Identifier for the mock, useful when generating multiple variants.

hints : Extra context such as "Include travel entries for Barcelona, Paris, and Kyoto."

designURL : URL of the design mockup to guide the LLM in generating matching names, addresses, and images.

Niobe CLI Integration

Engineers use Airbnb’s internal code‑generation tool, Niobe, to generate TypeScript/Kotlin/Swift clients from .graphql files. After adding @generateMock, running Niobe triggers mock generation automatically, producing JSON files and helper functions (e.g., mockMixedStatusIndicators() in Swift) that load the mock data without manual JSON handling.

LLM Prompt Context

To generate convincing mock data, Niobe assembles a rich context for the Gemini 2.5 Pro model, including:

The annotated query/fragment/field definition.

The relevant subset of the GraphQL schema with inline documentation.

Design mockup snapshots obtained via an internal API.

User‑provided hints and target platform (iOS, Android, Web).

A curated list of image URLs with descriptions to avoid hallucinated URLs.

The prompt is fine‑tuned for Gemini 2.5 Pro, which offers a 1 million‑token window and fast inference, enabling high‑quality JSON output.

Generation Workflow

If designURL is present, Niobe validates the URL, generates a snapshot, and stores its URL.

Niobe builds the prompt from the collected context and streams it to the LLM, displaying a progress indicator.

The LLM returns mock JSON, which Niobe validates against the schema using graphqlSync from the graphql NPM package.

On validation errors (e.g., invalid enum values or missing required fields), Niobe aggregates the errors, feeds them back to the LLM, and retries until the mock passes.

Successful mock data is written to a JSON file, and a source file exposing a loader function is generated.

@respondWithMock Directive

To unblock frontend development before backend implementation, Airbnb added a companion directive, @respondWithMock. When present, Niobe augments the generated client code to load the mock data at runtime, returning it instead of server responses. This works for entire queries or individual fields, allowing conditional mock activation via query variables.

Schema Evolution and Versioning

Each generated mock JSON includes two hash keys: the hash of the mocked client entity (the query) and the hash of the @generateMock input parameters. On each code‑generation run, Niobe compares these hashes to the current schema. If a hash changes, Niobe re‑generates the affected mock, providing the LLM with a diff of the schema change to avoid unnecessary modifications. Unchanged mocks are left untouched, preserving any manual edits.

An automated check in every client repository ensures that the mock version hash is up‑to‑date before code is committed, guaranteeing synchronization between mocks and evolving queries.

Conclusion

The @generateMock and @respondWithMock directives, powered by a context‑aware LLM integrated into Airbnb’s GraphQL toolchain, enable automatic, type‑safe, and highly realistic mock data generation. Over the past few months, more than 700 mocks have been generated across iOS, Android, and Web platforms, dramatically reducing manual effort and allowing engineers to focus on product development.