GraphQL Query to fetch() Converter

Turn a GraphQL query or mutation into a ready-to-run JavaScript fetch() call, with variables and an auth header. Runs entirely in your browser.

JavaScript fetch()

fetch("https://api.example.com/graphql", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    query: `query GetUser($id: ID!) {
  user(id: $id) {
    id
    name
    email
  }
}`,
    variables: {
      "id": "123"
    },
  }),
})
  .then((res) => res.json())
  .then((data) => console.log(data));

About this tool

GraphQL runs over plain HTTP: a query is just a POST request to the GraphQL endpoint with a JSON body containing the query string and an optional variables object. This converter assembles that request for you. Paste a query or mutation, optionally add a variables object and an Authorization header, and it produces a complete fetch() call with the correct method, Content-Type, and JSON-encoded body — the query embedded as a template literal so it stays readable. It is handy when an API gives you a query in a GraphiQL playground but you need to call it from a script, a serverless function, or the browser console without pulling in a GraphQL client library. The output follows the standard GraphQL-over-HTTP convention that every server (Apollo, Hasura, GitHub's API, and others) accepts. Everything is generated locally, so queries containing private schema details or tokens never leave your browser.

How to use it

  • Enter the GraphQL endpoint URL.
  • Paste your query or mutation.
  • Add a variables JSON object and an Authorization header if needed.
  • Copy the generated fetch() call into your code or console.

Frequently asked questions

How does GraphQL work over HTTP?
A GraphQL request is a POST to the endpoint with a JSON body of the form { "query": "...", "variables": {...} } and a Content-Type of application/json. The server returns { "data": ..., "errors": ... }. This tool builds exactly that request.
Do queries and mutations differ in the request?
No — both are sent the same way, as the query field in the POST body (a mutation just starts with the `mutation` keyword). So this converter handles queries, mutations, and subscriptions-as-queries identically.
How are variables passed?
As a separate `variables` object in the JSON body, not interpolated into the query string. That is the correct, injection-safe approach: your query declares `$id: ID!` and the variables object supplies `{ "id": "123" }`.
Why use a template literal for the query?
Embedding the multi-line query in a backtick template literal keeps it readable and avoids escaping every newline and quote. JSON.stringify then serializes the whole body correctly when the request is sent.
Can I add authentication?
Yes. Enter an Authorization header value (such as `Bearer YOUR_TOKEN`) and it is added to the headers object. Many GraphQL APIs require this; the value stays in your browser.
Is my query uploaded anywhere?
No. The fetch() code is generated entirely in your browser with no network call, so private queries and tokens are never transmitted by this tool.

Related tools