Skip to main content
Back to Dev generators

Dev

Mock GraphQL Response Generator

Used by developers, writers, and creators worldwide.

A mock GraphQL response generator saves you from hand-crafting JSON every time your frontend outpaces the backend. Paste the output directly into Apollo Client's MockedProvider, an msw graphql.query handler, or a Cypress intercept — the response already uses the standard { data: { ... } } envelope GraphQL servers return. Choose from four entity types (user, product, post, order) and set the Result Count to get as many records as you need in one click. Randomized but realistic field values mean you'll catch UI bugs caused by long names, high prices, or unusual statuses that fixed stub data never surfaces.

Loading usage…

Free forever — no account required

How to use

  1. Choose your options above
  2. Click Generate
  3. Copy your result

Detailed instructions

  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

  • •Populating Apollo Client MockedProvider fixtures for React query-hook unit tests
  • •Building Storybook stories with realistic multi-record product or order lists
  • •Seeding msw graphql.query handlers to unblock frontend work before the API ships
  • •Generating sample payloads for GraphQL API docs and README code examples
  • •Testing Cypress or Playwright intercepts with believable user or order response bodies

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 with Apollo Client's MockedProvider

Copy the generated JSON and paste it as the `result` value in your MockedProvider mocks array. The output already wraps entities in a `data` key, so you only need to add a matching `request` object with your query and variables to complete the mock setup.

does the generated JSON work with Mock Service Worker (msw)

Yes. Because the output follows the standard GraphQL response envelope, you can paste it straight into an msw `graphql.query` handler and return it via `return res(ctx.data(...))`. Just match your operation name and you're done — no reformatting needed.

what entity types and fields does this generator produce

The generator supports four types: user (name, email, role), product (title, price, SKU), post (title, body, author), and order (total, status, line items). Field values are randomized on each run, which helps expose edge-case UI bugs that fixed stub data would never trigger.