GraphQL Playground and tools - Step-by-Step Execution

Concept Flow - GraphQL Playground and tools

Start GraphQL Playground

↓

Write Query/Mutation

↓

Send Request to Server

↓

Server Processes Request

↓

Receive Response Data

↓

View Response in Playground

↓

Use Tools: Docs, History, Settings

↓

Modify Query or Explore Schema

↩Back to Write Query/Mutation

Shows how you start the playground, write queries, send them, get responses, and use tools to explore and modify.

Execution Sample

GraphQL

query {
  user(id: "1") {
    name
    email
  }
}

A simple GraphQL query to get the name and email of a user with id 1.

Execution Table

Step	Action	Query/Tool State	Server Response	User View
1	Open Playground	Empty query editor	N/A	Blank editor with sidebar tools visible
2	Write Query	Query with user(id:"1") { name, email }	N/A	Query shown in editor
3	Send Query	Query sent to server	Processing query	Loading indicator
4	Server Processes	N/A	{"data":{"user":{"name":"Alice","email":"[e-mail]"}}}	Response JSON shown
5	View Docs Tool	Docs sidebar opened	N/A	Schema documentation visible
6	Modify Query	Add 'age' field to query	N/A	Updated query in editor
7	Send Modified Query	New query sent	Processing query	Loading indicator
8	Server Responds	N/A	{"data":{"user":{"name":"Alice","email":"[e-mail]","age":30}}}	Updated response shown
9	Use History Tool	History sidebar opened	N/A	List of past queries visible
10	Select Past Query	Query loaded from history	N/A	Query loaded in editor
11	Send Past Query	Query sent	Processing query	Loading indicator
12	Server Responds	N/A	{"data":{"user":{"name":"Alice","email":"[e-mail]"}}}	Response shown
13	Close Playground	Session ends	N/A	Playground closed

💡 User closes the playground, ending the session.

Variable Tracker

Variable	Start	After Step 4	After Step 8	After Step 12	Final
Query Editor Content	""	query { user(id: "1") { name email } }	query { user(id: "1") { name email age } }	query { user(id: "1") { name email } }	""
Server Response	N/A	N/A	N/A	N/A	N/A
Response Displayed	N/A	{"data":{"user":{"name":"Alice","email":"[e-mail]"}}}	{"data":{"user":{"name":"Alice","email":"[e-mail]","age":30}}}	{"data":{"user":{"name":"Alice","email":"[e-mail]"}}}	N/A
Docs Tool State	Closed	Closed	Opened	Opened	Closed
History Tool State	Closed	Closed	Closed	Opened	Closed

Key Moments - 3 Insights

Why does the playground show a loading indicator after sending a query?

Because the playground waits for the server to process the query and send back data, as shown in execution_table rows 3 and 7.

How can I see what fields are available to query?

By opening the Docs tool in the playground, which shows the schema and available fields, as in execution_table row 5.

What happens when I select a past query from history?

The query loads into the editor so you can resend or modify it, shown in execution_table rows 10 and 11.

Visual Quiz - 3 Questions

Look at the execution table, what is shown in the response display after step 4?

A {"data":{"user":{"name":"Alice","email":"[e-mail]"}}}

B Loading indicator

C Empty editor

D Schema documentation

💡 Hint

Check the 'Server Response' column at step 4 in the execution_table.

At which step does the Docs tool open to show schema documentation?

A Step 2

B Step 5

C Step 9

D Step 13

💡 Hint

Look for 'Docs sidebar opened' in the 'Action' column of the execution_table.

If you add a new field to the query, what changes in the response display after the server responds?

A Response is empty

B Loading indicator stays forever

C Response includes the new field data

D Query editor clears

💡 Hint

See step 8 in the execution_table where the response includes 'age' field.

Concept Snapshot

GraphQL Playground lets you write and send queries/mutations.
You see server responses instantly in JSON format.
Tools include Docs for schema, History for past queries.
Modify queries and resend to explore data.
Loading shows while waiting for server.
Close playground to end session.

Full Transcript

GraphQL Playground is a tool where you start by opening it and writing a query or mutation. You send this query to the server, which processes it and sends back data. The playground shows this data in a clear JSON format. You can use tools like Docs to see what fields and types are available in the schema, and History to revisit past queries. When you modify a query and send it again, the server responds with updated data. The playground shows a loading indicator while waiting for the server. When done, you close the playground to end the session.