Basic query syntax in GraphQL - Step-by-Step Execution

Concept Flow - Basic query syntax

Start Query

↓

Write Query Name

↓

Open Curly Brace {

↓

Specify Fields to Fetch

↓

Close Curly Brace }

↓

Send Query to Server

↓

Receive Data Response

↓

Display Requested Data

This flow shows how a basic GraphQL query is structured and executed step-by-step.

Execution Sample

GraphQL

query {
  user {
    id
    name
  }
}

This query asks for the 'id' and 'name' fields of the 'user' object.

Execution Table

Step	Action	Query Part	Result/Output
1	Start query	query {	Query begins
2	Specify object	user {	Request user object
3	Specify field	id	Request user id field
4	Specify field	name	Request user name field
5	Close object	}	End user object fields
6	Close query	}	End query
7	Send query	Full query	Server processes query
8	Receive response	{ user: { id: "1", name: "Alice" } }	Data returned with requested fields

💡 Query ends after closing braces and server returns requested data.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
query	empty	query {	query { user {	query { user { id	query { user { id name } } }
requested_fields	none	user	user.id	user.id, user.name	user.id, user.name

Key Moments - 2 Insights

Why do we use curly braces { } in GraphQL queries?

Curly braces group fields and objects together. As shown in execution_table steps 2-6, they define what data to fetch inside the query.

What happens if we forget to close a curly brace?

The query is incomplete and will cause an error. The execution_table shows closing braces at steps 5 and 6 are necessary to end the query properly.

Visual Quiz - 3 Questions

Look at the execution_table, what is the query part at step 3?

A "user {"

B "name"

C "id"

D "query {"

💡 Hint

Check the 'Query Part' column in execution_table row for step 3.

At which step does the server send back the data response?

A Step 8

B Step 7

C Step 6

D Step 5

💡 Hint

Look at the 'Result/Output' column for when data is returned.

If we add a new field 'email' inside user, which step would change?

A Step 5

B Step 4

C Step 3

D Step 7

💡 Hint

Adding a field means specifying it in the query part where fields are listed, see steps 3 and 4.

Concept Snapshot

Basic GraphQL query syntax:
- Start with 'query {'
- Specify object name (e.g., user) with '{'
- List fields to fetch (e.g., id, name)
- Close braces '}' to end fields and query
- Send query to server and get requested data
Curly braces group fields and objects clearly.

Full Transcript

This visual execution shows how a basic GraphQL query is built and processed. We start the query with 'query {' and specify the object 'user' with its fields 'id' and 'name' inside curly braces. Each step adds parts of the query until all fields are listed and the query is closed with braces. Then the query is sent to the server, which returns the requested data. Curly braces are important to group fields and objects properly. Forgetting them causes errors. The execution table tracks each step and the variable tracker shows how the query string and requested fields grow step-by-step.