Args argument in GraphQL - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define an argument named 'id' of type ID in a GraphQL field.

GraphQL

type Query { user([1]: ID!): User }

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

Aage

Bname

Cemail

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong argument name like 'name' or 'email' instead of 'id'.

The argument name should be 'id' to specify the user identifier.

2fill in blank

medium

Complete the code to define a GraphQL argument with a default value of 10 for 'limit'.

GraphQL

type Query { posts(limit: Int = [1]): [Post] }

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

A5

B10

C20

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using a default value that is not a number or forgetting the '=' sign.

The default value for 'limit' is set to 10 to limit the number of posts returned.

3fill in blank

hard

Fix the error in the argument definition by completing the code correctly.

GraphQL

type Mutation { updateUser(id: [1], name: String): User }

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

AString!

BInt

CID!

DBoolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'String!' or other types instead of 'ID!' for the 'id' argument.

The 'id' argument should be of type 'ID!' to indicate a required unique identifier.

4fill in blank

hard

Fill both blanks to define a query with arguments 'first' and 'after' for pagination.

GraphQL

type Query { posts(first: [1], after: [2]): PostConnection }

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

AInt

BString

CBoolean

DFloat

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up types or using incorrect types for pagination arguments.

'first' is an integer specifying how many posts to fetch, and 'after' is a string cursor for pagination.

5fill in blank

hard

Fill all three blanks to define a mutation with arguments 'id', 'email', and 'active'.

GraphQL

type Mutation { updateUser(id: [1], email: [2], active: [3]): User }

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

AID!

BString

CBoolean

DInt

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong types or forgetting the non-nullable marker for 'id'.

'id' is a required ID, 'email' is a string, and 'active' is a boolean indicating status.

Practice

1. What is the main purpose of args in a GraphQL query or mutation?

easy

A. To format the output data

B. To define the schema types

C. To connect to the database

D. To pass extra information to customize the query or mutation

Solution

1. Step 1: Understand what args do in GraphQL

   Args are used to send extra details or parameters to queries or mutations to specify what data you want.

2. Step 2: Compare with other options

   Defining schema types, formatting output, or connecting to the database are not the role of args.

3. Final Answer:

   To pass extra information to customize the query or mutation -> Option D

4. Quick Check:

   Args = extra info for queries/mutations [OK]

Hint: Args always go inside parentheses after field name [OK]

Common Mistakes:

• Thinking args define schema types
• Confusing args with output formatting
• Assuming args connect to the database

2. Which of the following is the correct syntax to pass an argument named id with value 5 to a GraphQL query field user?

easy

A. user(id: 5)

B. user[id=5]

C. user{id=5}

D. user(id=5)

Solution

1. Step 1: Recall GraphQL argument syntax

   Arguments are passed inside parentheses with colon separating name and value, like fieldName(argName: value).

2. Step 2: Check each option

   user(id: 5) uses parentheses and colon correctly. The options using brackets or braces are incorrect. user(id=5) uses equals sign which is invalid in GraphQL.

3. Final Answer:

   user(id: 5) -> Option A

4. Quick Check:

   Args syntax = parentheses + colon [OK]

Hint: Use parentheses and colon for args: field(arg: value) [OK]

Common Mistakes:

• Using brackets [] instead of parentheses ()
• Using equals sign = instead of colon :
• Using braces {} for arguments

3. Given the GraphQL query:

{ user(id: 3) { name age } }

What will be the result if the user with id=3 has name "Alice" and age 30?

medium

A. { "data": { "user": { "id": 3, "name": "Alice" } } }

B. { "data": { "user": { "name": "Alice", "age": 30 } } }

C. { "data": { "user": { "name": "Alice" } } }

D. { "error": "User not found" }

Solution

1. Step 1: Understand the query fields

   The query requests the user with id 3 and asks for the fields name and age.

2. Step 2: Match the expected output

   The response should include both name and age for user 3. { "data": { "user": { "name": "Alice", "age": 30 } } } matches this exactly. { "data": { "user": { "id": 3, "name": "Alice" } } } includes id which was not requested. { "data": { "user": { "name": "Alice" } } } misses age. { "error": "User not found" } is an error which is incorrect since user exists.

3. Final Answer:

   { "data": { "user": { "name": "Alice", "age": 30 } } } -> Option B

4. Quick Check:

   Requested fields = name, age; output matches [OK]

Hint: Output matches requested fields exactly [OK]

Common Mistakes:

• Expecting unrequested fields in output
• Ignoring requested fields in output
• Assuming error when user exists

4. Identify the error in this GraphQL query:

{ product(id=10) { name price } }

medium

A. Using equals sign (=) instead of colon (:) for argument

B. Missing curly braces around the query

C. Field name 'product' is invalid

D. Arguments must be outside parentheses

Solution

1. Step 1: Check argument syntax

   GraphQL requires arguments to use colon (:), not equals sign (=). The query uses id=10 which is invalid.

2. Step 2: Verify other parts

   The query has curly braces, 'product' is a valid field name, and arguments must be inside parentheses, so other options are incorrect.

3. Final Answer:

   Using equals sign (=) instead of colon (:) for argument -> Option A

4. Quick Check:

   Args use colon, not equals [OK]

Hint: Args use colon (:), never equals (=) [OK]

Common Mistakes:

• Using = instead of : in args
• Thinking args go outside parentheses
• Assuming missing braces error

5. You want to fetch a list of books published after year 2000 using a GraphQL query with an argument publishedAfter. Which query correctly uses the args to achieve this?

hard

A. { books["publishedAfter": 2000] { title author } }

B. { books { title author publishedAfter: 2000 } }

C. { books(publishedAfter: 2000) { title author } }

D. { books(publishedAfter = 2000) { title author } }

Solution

1. Step 1: Understand how to pass args in GraphQL

   Arguments must be inside parentheses after the field name, using colon to assign values.

2. Step 2: Evaluate each option

   { books(publishedAfter: 2000) { title author } } correctly uses parentheses and colon. { books { title author publishedAfter: 2000 } } places argument inside selection set which is invalid. { books(publishedAfter = 2000) { title author } } uses equals sign instead of colon. { books["publishedAfter": 2000] { title author } } uses brackets and quotes incorrectly.

3. Final Answer:

   { books(publishedAfter: 2000) { title author } } -> Option C

4. Quick Check:

   Args inside parentheses with colon [OK]

Hint: Args go inside parentheses with colon [OK]

Common Mistakes:

• Placing args inside selection set
• Using equals sign instead of colon
• Using brackets instead of parentheses