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.

Practice

1. What is the main purpose of a GraphQL query?

easy

A. To request specific data by naming fields inside curly braces

B. To update data on the server

C. To delete data from the database

D. To create new database tables

Solution

1. Step 1: Understand GraphQL query basics

   A GraphQL query is designed to ask for specific data by naming the fields you want inside curly braces.

2. Step 2: Differentiate query from other operations

   Updating, deleting, or creating data are done by mutations, not queries.

3. Final Answer:

   To request specific data by naming fields inside curly braces -> Option A

4. Quick Check:

   GraphQL query = request specific data [OK]

Hint: Queries ask for data by naming fields in braces [OK]

Common Mistakes:

• Confusing queries with mutations
• Thinking queries modify data
• Assuming queries create or delete data

2. Which of the following is the correct syntax for a simple GraphQL query to get a user's name and email?

easy

A. query { user { name, email } }

B. query user { name, email }

C. { user: name, email }

D. query { user: name, email }

Solution

1. Step 1: Identify correct GraphQL query structure

   A GraphQL query starts with optional 'query' keyword, then curly braces containing the root field and requested subfields separated by commas or spaces.

2. Step 2: Check each option's syntax

   'query { user { name, email } }' correctly uses the 'query' keyword, outer braces, nested 'user' braces for fields. 'query user { name, email }' misses opening brace after 'query'; '{ user: name, email }' lacks 'query' and uses invalid colon; 'query { user: name, email }' uses invalid colon after 'user'.

3. Final Answer:

   query { user { name, email } } -> Option A

4. Quick Check:

   Correct query syntax = query { user { name, email } } [OK]

Hint: Use curly braces to nest fields correctly [OK]

Common Mistakes:

• Omitting curly braces around nested fields
• Using colons incorrectly inside queries
• Placing fields outside braces

3. Given the GraphQL query:

query { book { title author { name } } }

What data will this query return?

medium

A. Only the book's title

B. Only the author's name

C. The book's title and the author's name

D. The book's title and author as a string

Solution

1. Step 1: Analyze the query structure

   The query asks for 'book' field with subfields 'title' and 'author'. The 'author' field itself has a subfield 'name'.

2. Step 2: Understand nested data retrieval

   This means the query returns the book's title and inside author, only the name field.

3. Final Answer:

   The book's title and the author's name -> Option C

4. Quick Check:

   Nested fields return nested data = The book's title and the author's name [OK]

Hint: Nested braces mean nested data fields [OK]

Common Mistakes:

• Thinking only top-level fields are returned
• Assuming author returns full object, not just name
• Confusing syntax with JSON output

4. Identify the error in this GraphQL query:

query { user { id name, } }

medium

A. Query keyword 'query' is not allowed

B. Missing parentheses after 'user'

C. Curly braces are missing around 'id' and 'name'

D. Trailing comma after 'name' is invalid

Solution

1. Step 1: Review field list syntax inside braces

   In GraphQL, fields inside braces are separated by spaces or commas, but trailing commas are not allowed.

2. Step 2: Check the given query

   The query has a trailing comma after 'name', which causes a syntax error.

3. Final Answer:

   Trailing comma after 'name' is invalid -> Option D

4. Quick Check:

   No trailing commas in field lists [OK]

Hint: Avoid trailing commas inside field lists [OK]

Common Mistakes:

• Adding commas after last field
• Adding parentheses unnecessarily
• Removing required curly braces

5. You want to fetch a list of users with their id, name, and each user's posts with post title and comments count. Which GraphQL query correctly expresses this?

hard

A. query { users { id name posts { title commentsCount, } } }

B. query { users { id, name, posts { title, commentsCount } } }

C. query { users { id name posts { title, commentsCount } } }

D. query { users { id name posts { title commentsCount } } }

Solution

1. Step 1: Understand nested fields and syntax

   The query must request 'users' with subfields 'id', 'name', and nested 'posts' with 'title' and 'commentsCount'. In single-line GraphQL queries, commas are required to separate field names, and trailing commas are invalid.

2. Step 2: Evaluate syntax correctness

   'query { users { id, name, posts { title, commentsCount } } }' correctly separates all fields with commas at every level without trailing commas. The others have errors: missing commas between some fields combined with trailing comma; missing commas between top-level fields; or missing all commas between fields.

3. Final Answer:

   query { users { id, name, posts { title, commentsCount } } } -> Option B

4. Quick Check:

   Correct nesting and commas between fields = query { users { id, name, posts { title, commentsCount } } } [OK]

Hint: Nest fields inside braces without trailing commas [OK]

Common Mistakes:

• Adding trailing commas inside nested fields
• Misplacing commas between fields
• Incorrect nesting of fields