What is the standard GraphQL response shape?

Every GraphQL response is a JSON object with a top-level data key (and optionally errors). The data object's keys mirror the fields requested in the query, so a query for users returns data.users. This tool always wraps results in that envelope.

What is a Relay-style connection?

Relay connections wrap a list in edges, where each edge has a node and a cursor, plus a pageInfo object containing hasNextPage and endCursor. Cursors are typically opaque base64 strings. Enable the connection option to mock this pattern.

Are the cursors realistic?

Yes. Each cursor is a base64-encoded offset string in the common cursor:N format that Relay servers emit. They are deterministic per item index so you can reason about pagination while building your UI.

Can I use this output directly in tests?

Yes. The output is valid JSON matching the GraphQL spec envelope, so you can paste it into mock service workers, Apollo MockedProvider responses, or fixture files without modification.

Mock GraphQL Response Generator

When you are building a frontend against a GraphQL API that does not exist yet, you need response data that matches the real shape: the data envelope, nested objects, lists, and pagination metadata. This tool generates that JSON for you so you can wire up components, loading states, and pagination controls before the backend is ready.

How it works

Every GraphQL response is a JSON object with a top-level data key whose properties mirror the query selection set. The generator builds data[rootField] according to your configuration. For a plain list it emits an array of objects with an id, a name-like string, and a few typed fields. For a Relay-style connection it wraps the items in an edges array, where each entry has a node and a cursor, alongside a pageInfo object.

Cursors follow the common Relay convention: the string cursor:N for item index N, base64-encoded so it reads as an opaque token. The pageInfo.endCursor is the last item’s cursor and hasNextPage is set when the requested count fills the page, mirroring how a real resolver paginates.

Tips and notes

Use the connection option when your UI uses infinite scroll or cursor pagination; use the plain list otherwise.
The output is spec-valid JSON, so it drops straight into Apollo MockedProvider, MSW handlers, or fixture files.
Decode a cursor in your console with atob("...") to confirm it reads cursor:N.
Increase the item count to stress-test rendering and virtualization in long lists.