Basic query syntax in GraphQL - Mini Project: Build & Apply

Basic GraphQL Query Syntax

📖 Scenario: You are building a simple GraphQL query to fetch user information from a social media app's database.

🎯 Goal: Create a basic GraphQL query that retrieves the id and name of users.

📋 What You'll Learn

Create a query named GetUsers

Query the users field

Request the id and name fields for each user

💡 Why This Matters

🌍 Real World

GraphQL queries are used to fetch exactly the data you need from APIs, making apps faster and more efficient.

💼 Career

Knowing basic GraphQL query syntax is essential for frontend and backend developers working with modern APIs.

1

Create the query structure

Write the start of a GraphQL query named GetUsers that queries the users field.

GraphQL

# Your code here
query GetUsers {
  users {

  }
}

Hint

Start with query GetUsers { and inside it add users { to begin requesting user data.

2

Add the id field

Inside the users field, add the id field to request user IDs.

GraphQL

query GetUsers {
  users {
    # Add the id field here
  }
}

Hint

Inside users { }, add a line with id to get user IDs.

3

Add the name field

Add the name field inside the users field to request user names along with IDs.

GraphQL

query GetUsers {
  users {
    id
    # Add the name field here
  }
}

Hint

Below id, add name to get user names.

4

Complete the query

Ensure the query is properly closed with matching braces for users and GetUsers.

GraphQL

query GetUsers {
  users {
    id
    name
  }
  # Close the query properly
}

Hint

Make sure all opening braces have matching closing braces.

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