← Back to Blog
TutorialApril 6, 2026

API Tester Tutorial: Send REST & GraphQL Requests from Your Browser

A complete guide to the DevToolSets API Tester — send HTTP requests, query GraphQL endpoints, explore schemas, upload files, and subscribe to real-time streams with SSE and WebSocket.

What You'll Learn

  • Sending REST API requests with any HTTP method
  • Setting headers, query parameters, and request bodies
  • Uploading files with REST and GraphQL requests
  • Writing and sending GraphQL queries with variables
  • Exploring GraphQL schemas with the built-in introspection explorer
  • Subscribing to SSE and WebSocket streams
  • Reading responses with the JSON tree viewer
  • Using request history to replay past calls

Part 1: Sending REST Requests

1

Open the API Tester

Navigate to the API Tester tool. Make sure the "REST" mode is selected in the top-left toggle.

2

Choose an HTTP method

Select from the method dropdown: GET, POST, PUT, PATCH, DELETE, HEAD, or OPTIONS. Each method is color-coded for quick identification.

3

Enter the URL

Type or paste the API endpoint URL. You can press Enter to send immediately.

4

Add headers (optional)

In the left panel, use the Headers section to add key-value pairs. Each header has an enable/disable checkbox so you can toggle them without deleting.

5

Add query parameters (optional)

Use the Query Params section to add URL parameters. They're appended to the URL automatically when the request is sent.

6

Set the request body (POST/PUT/PATCH)

For methods that support a body, you have two options:

  • Raw — type JSON or any text. Content-Type: application/json is added automatically if not set
  • Files — attach files for multipart/form-data uploads
7

Click Send

The response appears on the right with status code, timing, and size. JSON responses get a collapsible tree view. You can also switch to the Raw tab for formatted JSON or the Headers tab to inspect response headers.

Part 2: Querying GraphQL Endpoints

1

Switch to GraphQL mode

Click the "GraphQL" toggle in the top bar. The interface adapts to show a query editor, variables panel, and file fields.

2

Enter the endpoint URL

Type your GraphQL endpoint (e.g. https://api.example.com/graphql).

3

Write your query

The Query textarea comes pre-filled with a skeleton. Replace it with your GraphQL query or mutation:

query { users { id name email } }
4

Add variables (optional)

Enter query variables as JSON in the Variables textarea:

{"userId": 42}
5

Upload files (optional)

For GraphQL file uploads (multipart spec), use the File Fields section. Add a field, set the variable path (e.g. variables.file), and attach files. The request is sent as multipart/form-data automatically.

6

Click Send

The response appears in the Response tab with the same JSON tree viewer and header inspection as REST mode.

Part 3: Exploring GraphQL Schemas

In GraphQL mode, the right panel has an Explorer tab that lets you browse the API's schema via introspection.

How to use it

  1. Enter your GraphQL endpoint URL
  2. Click the refresh button (↻) in the Explorer tab
  3. The schema is fetched via an introspection query
  4. Browse three tabs: Queries, Mutations, and Types

What you can see

  • All available queries with their arguments and return types
  • All mutations with their arguments and return types
  • All custom types (objects, inputs, enums, interfaces, unions, scalars)
  • Field descriptions and argument defaults
  • A search filter to quickly find types by name

Part 4: SSE & WebSocket Subscriptions

In GraphQL mode, a Subscriptions panel appears at the bottom. It supports both Server-Sent Events (SSE) and WebSocket connections.

1

Add a subscription

Click "+ Add" in the Subscriptions panel. Choose between SSE and WS using the toggle.

2

Enter the endpoint

For SSE, enter an https:// URL. For WebSocket, enter a wss:// URL.

3

Connect

Click Connect. A green dot indicates an active connection. Incoming messages appear in the Messages panel on the right with timestamps and auto-formatted JSON.

4

Manage connections

You can have multiple subscriptions active simultaneously. Disconnect individual ones or remove them entirely. Use the Clear button to reset the message log.

Part 5: Reading Responses

The response panel shows:

  • Status code with color coding (green for 2xx, yellow for 3xx, red for 4xx/5xx)
  • Response time in milliseconds
  • Response size in bytes/KB/MB
  • A JSON badge when the response is valid JSON

For JSON responses, you get:

  • Tree view — collapsible, color-coded JSON tree (auto-collapses at depth 3)
  • Raw view — pretty-printed JSON text
  • Headers view — all response headers

Non-JSON responses show the raw body text.

Part 6: Request History

How it works

  • REST and GraphQL histories are stored separately
  • Up to 20 entries are kept per mode (stored in IndexedDB)
  • Each entry shows the method/query, URL, status, timing, and timestamp
  • Click any entry to reload the URL, method, and response
  • For GraphQL, the query and variables are also restored
  • Use the Clear button to reset history

Tips & Best Practices

  • Press Enter in the URL field to send the request quickly
  • Use the header enable/disable checkboxes to toggle auth headers without deleting them
  • For APIs requiring authentication, add an Authorization: Bearer <token> header
  • The GraphQL schema explorer is great for discovering available queries before writing them
  • File uploads work with both REST (multipart/form-data) and GraphQL (multipart upload spec)
  • SSE subscriptions auto-reconnect on error; WebSocket connections close on error
  • History persists across sessions — useful for replaying requests during development

Ready to try it out?

Open API Tester →