Query variables in GraphQL - Step-by-Step Execution

Concept Flow - Query variables

Define Query with Variables

↓

Send Query + Variables

↓

Server Receives Query

↓

Server Substitutes Variables

↓

Execute Query with Values

↓

Return Result to Client

This flow shows how GraphQL queries use variables: define variables, send them with the query, server substitutes them, executes, and returns results.

Execution Sample

GraphQL

query GetUser($id: ID!) {
  user(id: $id) {
    name
    email
  }
}

variables: {"id": "123"}

This query fetches a user by ID using a variable $id, which is provided separately in the variables object.

Execution Table

Step	Action	Query Part	Variable State	Server Action	Output
1	Receive query and variables	query GetUser($id: ID!) {...}	{"id": "123"}	Parse query and variables	Ready to substitute variables
2	Substitute variable $id	user(id: $id)	{"id": "123"}	Replace $id with "123"	user(id: "123")
3	Execute query	user(id: "123") { name, email }	{"id": "123"}	Fetch user with id 123	{"name": "Alice", "email": "[e-mail]"}
4	Return result	Full query result	{"id": "123"}	Send data back to client	{"data": {"user": {"name": "Alice", "email": "[e-mail]"}}}
5	End	N/A	N/A	Query complete	Execution stops

💡 Query completes after returning user data for id 123

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
$id	undefined	"123"	"123"	"123"

Key Moments - 3 Insights

Why do we define variables separately from the query?

Variables are defined separately so the query can be reused with different values without rewriting the query text, as shown in execution_table step 1 and 2.

What happens if a variable is missing when the query runs?

If a required variable like $id is missing, the server cannot substitute it (see step 2), so the query will fail before execution.

How does the server know which value to use for $id?

The server uses the variables object sent alongside the query (step 1), matching variable names to values for substitution (step 2).

Visual Quiz - 3 Questions

Look at the execution_table at step 2, what value is $id substituted with?

A "123"

B "user"

C undefined

D "name"

💡 Hint

Check the 'Variable State' and 'Server Action' columns at step 2 in the execution_table.

At which step does the server fetch user data from the database?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Server Action' column describing 'Fetch user with id 123' in the execution_table.

If the variable $id was missing, what would happen at step 2?

A The server substitutes $id with null and continues

B The server fails to substitute $id and query execution stops

C The server substitutes $id with an empty string

D The server ignores $id and fetches all users

💡 Hint

Refer to key_moments about missing variables and execution_table step 2.

Concept Snapshot

GraphQL Query Variables:
- Define variables in query signature: query Name($var: Type!)
- Send variables separately as JSON
- Server substitutes variables before execution
- Allows query reuse with different inputs
- Missing required variables cause errors

Full Transcript

This visual execution shows how GraphQL query variables work. First, the client defines a query with variables like $id. Then it sends the query text plus a variables object with actual values. The server receives both, parses them, and substitutes the variables in the query with the provided values. After substitution, the server executes the query using those values, fetches data, and returns the result to the client. If a required variable is missing, the server cannot substitute it and the query fails. This process allows queries to be reused with different inputs easily.