GraphQL Data Mocking at Scale with LLMs and @generateMock

Airbnb’s @generateMock directive combines GraphQL schemas, product context, design references, and LLMs to generate realistic, type-safe mock data automatically. Integrated into the existing Niobe code-generation workflow, it reduces manual mock maintenance and helps client engineers prototype and test features before backend implementation is complete.

Challenges with GraphQL Mocking

• Manually creating large JSON responses or schema-generated objects is tedious and error-prone.
• Client engineers often hardcode data or modify networking logic when the server is not yet ready, slowing frontend development.
• Handwritten mocks drift out of sync as queries and schemas evolve.
• Random generators and field-level resolvers lack the domain knowledge needed for convincing, meaningful data.

Airbnb’s Goals

• Eliminate hand-written mock data and ongoing maintenance.
• Generate realistic data suitable for demos, snapshots, and tests.
• Keep engineers in their normal local development workflow without requiring separate tools or repositories.

The @generateMock Directive

• Engineers can add @generateMock to GraphQL operations, fragments, or fields.
• Optional arguments customize the generated data:
  • id identifies a mock and names generated helper functions.
  • hints provide instructions such as destinations, content, or desired density.
  • designURL links to a design mockup so generated names, addresses, and other values better match the intended UI.
• The directive can be repeated with different arguments to create multiple mock variations.

Integration with Niobe

• After adding or changing @generateMock in a .graphql file, engineers run Niobe just as they would for ordinary GraphQL code generation.
• Niobe generates:
  • JSON files containing the mock responses.
  • TypeScript, Kotlin, or Swift helpers for consuming the mocks.
• Generated functions return instantiated, type-safe model objects for demo apps, snapshot tests, and unit tests.
• Engineers can edit the generated JSON manually; Niobe preserves those changes during later generation runs.

Context Used by the LLM

Niobe supplies the LLM with information needed to create realistic results:

• The mocked operations, fragments, fields, and their dependencies.
• The relevant subset of the GraphQL schema and inline documentation.
• Only schema types and fields needed to resolve the query, avoiding unnecessary context-window usage.
• A snapshot image of the design referenced by designURL, generated through Airbnb’s internal design-document API.