Basic query syntax in GraphQL - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to query the name of a user.

GraphQL

query { user { [1] } }

Drag options to blanks, or click blank then click option'

Aname

Bemail

Cage

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a field that does not exist or is not requested.

Forgetting to specify the field inside the user object.

The name field is requested to get the user's name.

2fill in blank

medium

Complete the code to query the email of a user.

GraphQL

query { user { [1] } }

Drag options to blanks, or click blank then click option'

Aemail

Bname

Cage

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a field like name instead of email.

Leaving the field blank.

The email field is requested to get the user's email address.

3fill in blank

hard

Fix the error in the query to get the user's id.

GraphQL

query { user { [1] } }

Drag options to blanks, or click blank then click option'

Aage

Bid

Cemail

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong field like name or email.

Not specifying any field.

The id field is used to get the user's unique identifier.

4fill in blank

hard

Fill both blanks to query the user's name and email.

GraphQL

query { user { [1] [2] } }

Drag options to blanks, or click blank then click option'

Aname

Bemail

Cage

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using fields that are not requested like age or id.

Only filling one blank.

To get both the user's name and email, include both fields inside the user object.

5fill in blank

hard

Fill all three blanks to query the user's id, name, and email.

GraphQL

query { user { [1] [2] [3] } }

Drag options to blanks, or click blank then click option'

Aid

Bname

Cemail

Dage

Attempts:

3 left

💡 Hint

Common Mistakes

Including fields like age which are not requested.

Missing one or more blanks.

To get the user's id, name, and email, include all three fields inside the user object.

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