Dev
Mock GraphQL Response Generator
GraphQL clients expect responses nested under a top-level data key, shaped exactly to the query. Building UI components against that shape before the API exists means you need believable mock payloads — not generic JSON blobs. This generator produces correctly structured GraphQL responses for four entity types: user, product, post, and order. Select an entity type and set a result count from 1 to 10. The generator wraps items in the standard {"data": {"entitys": [...]}} envelope that Apollo Client and urql parse natively. Users get id, name, email, age, and role; products get price, inStock, and category; posts get likes and published state; orders get status and total. Paste the output into a Jest fixture, a Storybook story, or a mock client handler and your component renders real-looking data immediately — then swap in the live endpoint with no structural changes required.
How to use
- Choose your options above
- Click Generate
- Copy your result
Detailed instructions
- Select an entity type from the dropdown — choose user, product, post, or order based on the data your component consumes.
- Set the Result Count to the number of records you need; use 3-5 for list components and 1 for detail views.
- Click Generate to produce the mock GraphQL JSON response.
- Copy the output and paste it into your test file, Storybook story, or API mock handler.
- Re-generate as needed to get fresh randomized values for edge-case testing.
Use Cases
- •Building frontend components before the GraphQL API exists
- •Stubbing responses in a mock GraphQL client
- •Creating fixtures for tests that consume GraphQL data
- •Documenting example responses for an API
- •Previewing how the UI renders nested GraphQL data
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
what does a graphql response look like
A GraphQL response is JSON with the requested data nested under a top-level "data" key, shaped exactly to match the query's field selections. This generator produces responses in that structure — for example {"data": {"users": [...]}} — so they behave like real API output in your frontend and tests.
which entity types does this generator support
The generator supports four entity types: user (id, name, email, age, role), product (id, name, price, inStock, category), post (id, title, author, likes, published), and order (id, customerId, total, status, items). If your schema uses different field names, rename them after copying — the structure transfers cleanly.
will the mock response match my schema
It gives you a realistic GraphQL response shape as a starting point; adapt the field names to match your own schema. The data envelope and array nesting will already be correct. Testing against a realistic structure first, then aligning it to your real schema, is far faster than building UI blind.
how do I use this output in a Jest test that calls a GraphQL client
Copy the JSON output and use it as the return value in a jest.fn() or MSW handler that intercepts the GraphQL request. Both Apollo Client and urql support HTTP-level mocking, so your test component receives the mocked data exactly as it would from a live endpoint.
You might also like
Popular tools from other categories that share themes with this one.
Try these next
More free tools from other corners of the catalog, picked by shared themes.