GraphQL client online: test a GraphQL API in the browser

To test a GraphQL API online you need four things: somewhere to type the operation, the server's schema (so you get autocomplete and validation), a place for variables and headers, and a readable response. Swastik Codes gives you all four in the browser. Open the app, add a GraphQL request, paste the endpoint URL, and the schema is fetched by introspection. You then build the query by ticking fields in the explorer or by typing with schema-aware completion, and send it.

This guide walks through that flow against a public GraphQL API, then covers variables, fragments, subscriptions, authentication headers and automated tests on GraphQL responses.

What you need before you start

• A GraphQL endpoint that is reachable from the internet. The web app sends requests through the swastik.codes server (a browser cannot call arbitrary cross-origin APIs), and that server refuses private, loopback and link-local addresses. http://localhost:4000/graphql will not work from the web app; a staging URL will. The desktop app for Windows and Linux sends from your own machine and reaches it.
• A free account. The web app needs one, because requests (and schema fetches) go through the server. Create one with GitHub or an email address.

For the examples below we use the public Countries API at https://countries.trevorblades.com/. It allows introspection and needs no key, which makes it a good playground.

Step 1: create a GraphQL request

1. Open swastik.codes/app.
2. Click the + button in the tab bar. The New request menu lists every request type: HTTP, GraphQL, WebSocket, Socket.IO, Server-Sent Events, gRPC, MQTT and MCP. Choose GraphQL.
3. Paste https://countries.trevorblades.com/ into the endpoint field.

If you already have an HTTP request pointing at a GraphQL endpoint, you do not need to start over: the request-type picker next to the URL converts it in place, keeping the name, URL, headers, auth and scripts.

Step 2: load the schema

With Introspect automatically when the URL is set switched on (it is in the request's Schema tab), the schema loads as soon as you enter a valid http(s):// URL. You can also press Fetch schema next to the URL. A notification tells you how many types were loaded, and the Schema tab shows the printed SDL.

Some production servers disable introspection. In that case switch Schema source to Manual (SDL or introspection JSON) and either paste the schema, use Import file, or Import from URL if your team publishes a schema.graphql. Press Apply schema and the editor behaves exactly as if introspection had worked. The manual schema is saved with the request, so teammates get it too.

Step 3: build the query

There are two ways to write the operation, and you can mix them.

The explorer. Once a schema is loaded, an Explorer button appears above the query editor. It shows the root operation types (Query, Mutation, Subscription) as a tree. Ticking a field adds it to the operation; ticking an argument adds a variable for it and fills an example value into the variables editor. On fields that return a union or an interface, the explorer offers ... on Type branches and keeps __typename in the selection so you can tell the results apart. The tree is virtualised, so large schemas with thousands of types stay responsive, and a filter box narrows the root fields.

The editor. The query editor has schema-aware completion and validation. Type { country(code: "IN") { and it suggests the fields of Country. Misspelled fields are flagged before you send.

Try this query:

query Country($code: ID!) {
  country(code: $code) {
    ...CountryBasics
    languages {
      code
      name
    }
  }
}

fragment CountryBasics on Country {
  code
  name
  capital
  currency
  emoji
}

And in the Variables (JSON) editor underneath:

{ "code": "IN" }

Press Query (the button reads Mutate for a mutation and Subscribe for a subscription). The response panel shows the JSON result:

{
  "data": {
    "country": {
      "code": "IN",
      "name": "India",
      "capital": "New Delhi",
      "currency": "INR",
      "emoji": "🇮🇳",
      "languages": [
        { "code": "hi", "name": "Hindi" },
        { "code": "en", "name": "English" }
      ]
    }
  }
}

If a document contains several named operations, a selector appears next to the section tabs so you can pick which one to run; leaving it on (first operation) runs the first.

Use environment variables inside GraphQL variables

Variables in double braces work everywhere, including the GraphQL variables editor and the URL. Create an environment with gqlUrl = https://countries.trevorblades.com/ and country = IN, then write:

{ "code": "{{country}}" }

Switching environment then switches the data without editing the request. The same works for staging and production endpoints: put {{gqlUrl}} in the URL field.

Step 4: headers and authentication

Most real GraphQL APIs need a token. Use the request's Authorization tab rather than typing a header by hand: choose Bearer Token, API Key, Basic, OAuth 2.0 or any of the other schemes. Leave it on Inherit to use the auth configured on the folder or collection, so every operation in a collection shares one token. The same credentials are sent with the introspection call, which matters for servers that only allow introspection to authenticated users.

Anything else, such as a tenant header or apollo-require-preflight, goes in Headers.

If you need an OAuth 2.0 access token first, see OAuth 2.0 in an API client.

Step 5: subscriptions

Subscriptions run over WebSocket. In the request's Settings tab you choose:

• Subscription URL – leave it empty to use the endpoint URL with the scheme changed to ws:// or wss://, or set a separate URL if your server listens elsewhere.
• Subscription protocol – graphql-transport-ws (the protocol used by the graphql-ws library and most current servers) or the legacy graphql-ws protocol from subscriptions-transport-ws.
• Connection params (JSON) – sent in the connection_init message; this is where many servers expect an auth token, for example { "authorization": "Bearer {{token}}" }.

Write a subscription { ... } operation and press Subscribe. Events stream into the message log with timestamps until you press Unsubscribe. Very large payloads (over 1 MiB) are cut for display, so the log stays usable.

The Countries API has no subscriptions, so use your own server to try this. Remember that the server must be publicly reachable from the web app.

Step 6: test the response

A GraphQL server usually answers 200 OK even when the operation failed: the problems are in an errors array. A status check alone therefore proves little. GraphQL requests have a Scripts tab with the same Pre-request and Post-response scripts as HTTP requests, using the Postman-style pm.* API. A useful baseline for the query above:

swc.test('HTTP 200', function () {
  swc.response.to.have.status(200);
});

const body = swc.response.json();

swc.test('no GraphQL errors', function () {
  swc.expect(body.errors, JSON.stringify(body.errors)).to.be.undefined;
});

swc.test('country has a capital and languages', function () {
  const c = body.data.country;
  swc.expect(c.capital).to.be.a('string').and.not.empty;
  swc.expect(c.languages).to.be.an('array').that.is.not.empty;
});

swc.test('response matches the expected shape', function () {
  swc.response.to.have.jsonSchema({
    type: 'object',
    required: ['data'],
    properties: {
      data: {
        type: 'object',
        required: ['country'],
        properties: {
          country: {
            type: 'object',
            required: ['code', 'name'],
            properties: { code: { type: 'string', minLength: 2, maxLength: 2 } }
          }
        }
      }
    }
  });
});

jsonSchema validates with Ajv inside the script sandbox. You can also save values for later requests, for example swc.environment.set('countryName', body.data.country.name). The Test Results tab of the response shows each test as passed or failed. More patterns are in writing API tests with pm scripts.

Once the requests have tests, put them in a collection and run them together in the collection runner, or on a schedule with a monitor.

Troubleshooting

"Introspection failed". Check the URL first (many servers live at /graphql, not /). If the server needs auth for introspection, set it on the Authorization tab. If introspection is disabled in production, load the schema manually as described in step 2.

The request never reaches my server. If the URL points at localhost, a 192.168.x.x address or another private network, the swastik.codes server refuses it. Use the desktop app, deploy to a reachable staging URL, or expose the service through a tunnel with a public hostname.

HTTP 200 but no data. Look at the errors array in the response. Validation errors (unknown fields, missing required variables) come back this way on most servers.

Variables are ignored. Variables must be valid JSON, and the operation must declare them (query Country($code: ID!)). Unused variables are not an error, but undeclared ones in the operation are.

Subscription connects then closes. The usual causes are the wrong protocol (graphql-transport-ws versus legacy graphql-ws) or missing auth in the connection params.

Frequently asked questions

Can I use Swastik Codes as a free online GraphQL client?

Yes. The app is free to use today. You need a free account to send requests, because the web app sends them through the swastik.codes server.

Does it support GraphQL subscriptions?

Yes, over WebSocket with either the graphql-transport-ws protocol or the legacy graphql-ws protocol, with optional connection params.

What if my server has introspection turned off?

Paste the SDL or an introspection JSON result into the Schema tab (or import it from a file or URL) and press Apply schema. Autocomplete, validation and the explorer then work from that schema.

Can I import GraphQL requests from Postman or Insomnia?

Postman collections keep their GraphQL bodies (query and variables) when imported, and you can switch such a request to the GraphQL request type with the picker next to the URL to get the explorer and subscriptions. You can also import a GraphQL SDL file: it becomes a collection with one GraphQL request per query, mutation and subscription field, plus a graphqlUrl variable to point at your endpoint. See importing a Postman collection for the details and the import and export page for all supported formats.

Can I generate code for a GraphQL request?

Yes. A GraphQL request is an HTTP POST with a JSON body, so the code generator can turn it into cURL, JavaScript fetch, Python requests and many other snippets. See code generation.

Try it

Open the app, add a GraphQL request for https://countries.trevorblades.com/, and you will have a schema-aware editor in under a minute. Sending needs a free account. The GraphQL client feature page summarises everything the client supports, and if your team also works with real-time APIs, the WebSocket client uses the same workspace, environments and history.