Build a GraphQL request payload

Turn a GraphQL query and its variables into the exact JSON body a POST request needs — correctly stringified, with variables bound — so you can call the endpoint with curl or fetch.

Open this example in GraphQL Playground

Open the tool, then paste the sample input below. Everything runs locally in your browser.

Open this example in GraphQL Playground →

The problem

A GraphQL endpoint expects a JSON body with a query string and a variables object, and the query has to be JSON-stringified with newlines escaped. Doing that by hand is error-prone. Building the payload produces a body you can paste straight into a request.

Sample input

Query
query ($id: ID!) { order(id: $id) { total } }
Variables
{ "id": "A-1001" }

Expected output

POST body
{
  "query": "query ($id: ID!) { order(id: $id) { total } }",
  "variables": { "id": "A-1001" }
}

The query becomes a JSON string and the variables stay a JSON object under the variables key — the shape every GraphQL HTTP endpoint expects.

How to do it

  1. Paste the GraphQL query.
  2. Provide the variables as JSON.
  3. Build the request payload.
  4. Confirm the query is stringified and variables are bound.
  5. Copy the JSON body into your POST request.

Common mistakes

  • Sending the query as raw text instead of a JSON string.
  • Putting variable values inline in the query instead of the variables object.
  • Mismatched variable names between the query and the variables.
  • Forgetting the Content-Type: application/json header.
  • Unescaped newlines or quotes breaking the JSON body.

Related tools

Related guides

FAQ

What does a GraphQL request body look like?

It is a JSON object with a query string and an optional variables object: { "query": "...", "variables": { ... } }. The query is sent as a JSON-encoded string.

Why must the query be a JSON string?

The HTTP body is JSON, so the query text must be encoded as a string with quotes and newlines escaped, not sent as raw GraphQL.

How do variables work?

Declare variables in the query with $name and types, then pass their values in the variables object. This keeps values out of the query text and avoids injection.

Which HTTP method and header do I use?

GraphQL over HTTP uses POST with Content-Type: application/json and the query/variables JSON as the body.

Is my query uploaded?

No. The payload is built locally in your browser. Nothing is sent to a server.

The GraphQL payload is built locally in your browser. Nothing is uploaded.

Explore more JSON and API contract tools

Build GraphQL payloads, generate snippets, format and query JSON — grouped in one place.

View the JSON & API contract toolkit →

Practical example and expected result

Turn a GraphQL query and its variables into the exact JSON body a POST request needs - correctly stringified, with variables bound - so you can call the endpoint with curl or fetch. In practice, this is most useful when you need a quick, repeatable check on a developer artifact before adding it to a ticket, pull request, test fixture, or support note.

A realistic input for this workflow is query ($id: ID!) { order(id: $id) { total } }. The expected result should resemble { "id": "A-1001" }, with the same important values preserved.

Troubleshooting checklist

  • Confirm you copied the complete developer artifact and not only a partial line or truncated preview.
  • Run the local tool once with a safe sample, then repeat with the real data only if your team policy allows it.
  • Check quoting, escaping, whitespace, encoding, timestamps, and environment-specific values before trusting the result.
  • Before sharing output, remove secrets, tokens, cookies, customer data, and production hostnames that are not needed for the review.

Next useful steps