Dev

Mock GraphQL Response Generator

A mock GraphQL response generator lets you produce realistic, properly structured JSON payloads that mirror actual GraphQL API responses — without writing a single resolver. When your frontend team is moving faster than the backend, or when you need repeatable test fixtures, having believable fake data in the right shape is essential. This tool generates GraphQL-style JSON for common entity types like users, products, posts, and orders, complete with nested fields and realistic values. Frontend developers often block on missing APIs. Instead of hardcoding placeholder objects scattered across components, you can generate a full data response in seconds and drop it directly into your component props, Storybook stories, or test files. The output follows the standard GraphQL response envelope — with a `data` key wrapping your entity array — so it slots cleanly into Apollo Client's `MockedProvider` or any manual fetch mock. Testers and QA engineers benefit too. Generating multiple records at once (controlled by the Result Count input) means you can immediately check how your UI handles lists, empty states near pagination boundaries, or tables with varied data. Because the field values are randomized but realistic, edge cases like long display names or high-priced products appear naturally without manual crafting. Whether you are prototyping a new feature, writing unit tests for query hooks, or populating an API documentation example, this mock GraphQL JSON generator saves the repetitive work of inventing plausible data structures by hand.

How to Use

  1. Select an entity type from the dropdown — choose user, product, post, or order based on the data your component consumes.
  2. Set the Result Count to the number of records you need; use 3-5 for list components and 1 for detail views.
  3. Click Generate to produce the mock GraphQL JSON response.
  4. Copy the output and paste it into your test file, Storybook story, or API mock handler.
  5. Re-generate as needed to get fresh randomized values for edge-case testing.

Use Cases

  • •Populate Apollo Client MockedProvider fixtures for React unit tests
  • •Build Storybook stories with realistic multi-record entity lists
  • •Prototype a product listing page before the catalog API exists
  • •Generate sample payloads for GraphQL API documentation and README examples
  • •Seed Cypress or Playwright intercept handlers with believable response bodies
  • •Test UI pagination and list rendering with configurable record counts
  • •Demo a new dashboard feature to stakeholders using realistic order data
  • •Validate TypeScript GraphQL types by checking generated field shapes

Tips

  • →Generate with a count of 1 to get a clean single-object response for detail page and modal component tests.
  • →Run the generator two or three times and merge the arrays to build a larger fixture file with naturally varied data.
  • →When testing pagination UI, generate exactly one more record than your page size to confirm the 'load more' trigger appears correctly.
  • →Save frequently used outputs as `.json` fixture files in your repo so tests stay deterministic while still using realistic shapes.
  • →For TypeScript projects, paste the output into a tool like json-to-ts to auto-generate interfaces that match the mock structure.
  • →Combine a user entity response with a product entity response to mock a query that returns joined or related data across types.

FAQ

How do I use a mock GraphQL response in Apollo Client tests?

Copy the generated JSON and paste it as the `result` value inside Apollo's `MockedProvider` mocks array. The output wraps entities in a `data` key matching the structure Apollo expects. You may need to add a matching `request` object with your query and variables to complete the mock setup.

What entity types does this generator support?

The generator currently supports four entity types: user, product, post, and order. Each produces a distinct set of realistic fields — for example, users get names and emails, products get prices and SKUs, posts get titles and body text, and orders get totals and statuses.

Can I generate more than one record at a time?

Yes. Set the Result Count input to any number before generating. The output will contain an array of that many records under the `data` key. This is useful for testing list components, tables, or any UI that renders multiple items from a GraphQL query.

Does the output follow the standard GraphQL response format?

Yes. The JSON uses the standard `{ data: { entityName: [...] } }` envelope shape that GraphQL servers return. This means it works without modification in most mocking setups, including `msw` (Mock Service Worker), Apollo MockedProvider, and plain `fetch` intercepts.

How do I use this with Mock Service Worker (msw)?

Generate your response, then paste it as the return value inside an `msw` `graphql.query` handler. Because the output is already valid JSON in the correct GraphQL shape, you only need to wrap it in `return res(ctx.data(...))` and match your operation name.

Can I use the generated data in Storybook stories?

Yes. Copy the inner array from the `data` field and assign it to the relevant prop in your Story's `args`. For components that consume Apollo, you can wrap the Story with `MockedProvider` and supply the full generated response as a mock, giving you realistic renders without a live API.

Are the generated field values random or fixed?

Field values are randomized on each generation, producing different but plausible data every time. This is intentional — it helps surface UI bugs caused by varying string lengths, price ranges, or status values that a fixed dataset would never reveal.

How do I adapt the output if my schema uses different field names?

After generating, do a quick find-and-replace in your editor to rename fields to match your schema. Because the output is plain JSON, it is easy to restructure. For repeated use, save a renamed version as a fixture file in your project's `__mocks__` or `fixtures` directory.