First GraphQL query - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to query the name of a user.

GraphQL

{ user { [1] } }

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

Aage

Bname

Cemail

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a field that does not exist in the user type.

Forgetting to specify a field inside the user braces.

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

2fill in blank

medium

Complete the code to query the user's email.

GraphQL

{ user { [1] } }

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

Aname

Busername

Cemail

Dpassword

Attempts:

3 left

💡 Hint

Common Mistakes

Using a field that is not part of the user type.

Using a sensitive field like password which is usually not queryable.

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

{ user { [1] } }

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

AID

BId

CuserId

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase or camel case for field names incorrectly.

Using a field name that does not exist.

The field id is case-sensitive and must be lowercase.

4fill in blank

hard

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

GraphQL

{ user { [1] [2] } }

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

Aname

Bemail

Cage

Dpassword

Attempts:

3 left

💡 Hint

Common Mistakes

Including fields that are not part of the user type.

Forgetting to separate fields with space.

To get both name and email, include both fields inside the user braces.

5fill in blank

hard

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

GraphQL

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

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

Aid

Bname

Cemail

Dpassword

Attempts:

3 left

💡 Hint

Common Mistakes

Including sensitive or invalid fields like password.

Using incorrect field names or casing.

Query the id, name, and email fields inside the user braces to get all three.

Practice

1. What does a basic GraphQL query do?

easy

A. It asks for specific data by listing fields inside curly braces.

B. It updates data in the database.

C. It deletes data from the server.

D. It creates a new database schema.

Solution

1. Step 1: Understand GraphQL query purpose

   A GraphQL query is designed to request specific data from a server.

2. Step 2: Identify query syntax

   The query lists the fields wanted inside curly braces to specify what data to fetch.

3. Final Answer:

   It asks for specific data by listing fields inside curly braces. -> Option A

4. Quick Check:

   GraphQL query = request data [OK]

Hint: Remember: queries fetch data by listing fields [OK]

Common Mistakes:

• Confusing queries with mutations
• Thinking queries modify data
• Mixing query syntax with SQL

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

easy

A. query { user { name } }

B. query user { name }

C. { user name }

D. query user name { }

Solution

1. Step 1: Review GraphQL query structure

   A query starts with the keyword 'query' (optional), followed by curly braces enclosing the fields.

2. Step 2: Check each option's syntax

   query { user { name } } correctly uses 'query' and nested braces for user and name fields.

3. Final Answer:

   query { user { name } } -> Option A

4. Quick Check:

   Correct braces and field nesting = query { user { name } } [OK]

Hint: Use nested braces for nested fields [OK]

Common Mistakes:

• Missing curly braces
• Incorrect field nesting
• Wrong keyword placement

3. Given this GraphQL query:

query { book { title author } }

What data will the server return?

medium

A. SyntaxError: Missing fields

B. { "data": { "book": "title author" } }

C. { "book": { "title": "string", "author": "string" } }

D. { "data": { "book": { "title": "string", "author": "string" } } }

Solution

1. Step 1: Understand GraphQL response format

   GraphQL returns data inside a 'data' object matching the query structure.

2. Step 2: Match query fields to response

   The query asks for 'book' with 'title' and 'author', so response includes these nested fields.

3. Final Answer:

   { "data": { "book": { "title": "string", "author": "string" } } } -> Option D

4. Quick Check:

   Response matches query structure [OK]

Hint: Response wraps requested fields inside 'data' object [OK]

Common Mistakes:

• Omitting 'data' wrapper in response
• Returning fields as a string
• Confusing syntax error with valid query

4. Identify the error in this GraphQL query:

query { user { id name 

medium

A. Fields 'id' and 'name' are invalid.

B. Incorrect keyword 'query' used.

C. Missing closing curly braces for 'user' and 'query'.

D. Query should not have nested fields.

Solution

1. Step 1: Check query syntax completeness

   The query opens braces for 'user' and 'query' but does not close them.

2. Step 2: Confirm correct use of keywords and fields

   'query' keyword is correct; 'id' and 'name' are valid fields; nested fields are allowed.

3. Final Answer:

   Missing closing curly braces for 'user' and 'query'. -> Option C

4. Quick Check:

   Unclosed braces cause syntax error [OK]

Hint: Count opening and closing braces carefully [OK]

Common Mistakes:

• Forgetting to close all braces
• Assuming keywords are wrong
• Thinking nested fields are invalid

5. You want to fetch a list of users with their id and name using GraphQL. Which query correctly does this assuming the server has a 'users' field returning a list?

hard

A. query { users: id, name }

B. query { users { id name } }

C. query { user { id name } }

D. query users { id name }

Solution

1. Step 1: Identify the correct root field for multiple users

   The server field for multiple users is 'users', not 'user'.

2. Step 2: Check query syntax for nested fields

   query { users { id name } } correctly queries 'users' with nested 'id' and 'name' fields inside braces.

3. Final Answer:

   query { users { id name } } -> Option B

4. Quick Check:

   Correct root field and nested fields = query { users { id name } } [OK]

Hint: Use plural field for lists, nest fields inside braces [OK]

Common Mistakes:

• Using singular 'user' for list data
• Incorrect field alias syntax
• Omitting braces for nested fields