Input type for complex arguments in GraphQL - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define an input type for a user with name and age fields.

GraphQL

input UserInput { name: String[1] }

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

A?

B!

C$

D#

Attempts:

3 left

💡 Hint

Common Mistakes

Using ? which is not valid in GraphQL type definitions.

Omitting the exclamation mark when the field should be required.

The exclamation mark ! means the field is required (non-nullable).

2fill in blank

medium

Complete the code to add an age field of type Int to the input type.

GraphQL

input UserInput { age: [1] }

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

AInt

BFloat

CString

DBoolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using Float which allows decimals.

Using String which is for text.

The Int type is used for integer numbers in GraphQL.

3fill in blank

hard

Fix the error in the mutation argument by completing the input type usage.

GraphQL

type Mutation { createUser(input: [1]): User }

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

AUser

BUserType

CUserInput

DInputUser

Attempts:

3 left

💡 Hint

Common Mistakes

Using the output type User instead of the input type.

Using incorrect input type names.

The argument should use the input type UserInput defined for complex inputs.

4fill in blank

hard

Complete the code to define an input type with a required name and optional email.

GraphQL

input ContactInput { name: String[1], email: String }

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

A!

B?

Attempts:

3 left

💡 Hint

Common Mistakes

Marking optional fields as required.

Using ? which is invalid in GraphQL.

The name is required so it uses !. The email is optional so it has no exclamation mark.

5fill in blank

hard

Fill all three blanks to define a mutation that takes a required input and returns a User type.

GraphQL

type Mutation { addUser(input: [1][2]): [3] }

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

AUserInput

B!

CUser

DInputUser

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the exclamation mark for required input.

Using the input type as return type.

The mutation argument uses the required input type UserInput! and returns the User type.

Practice

1. What is the main purpose of using input types in GraphQL queries or mutations?

easy

A. To define the output format of a query

B. To create database tables automatically

C. To group related input fields into a reusable structure

D. To write comments inside the schema

Solution

1. Step 1: Understand the role of input types

   Input types in GraphQL are designed to group related fields together for passing complex arguments.

2. Step 2: Differentiate input from output types

   Input types are not for output or database creation but for structuring inputs in queries or mutations.

3. Final Answer:

   To group related input fields into a reusable structure -> Option C

4. Quick Check:

   Input types = group related inputs [OK]

Hint: Input types group inputs, not outputs or tables [OK]

Common Mistakes:

• Confusing input types with output types
• Thinking input types create database tables
• Assuming input types are for comments

2. Which of the following is the correct way to define an input type in GraphQL?

easy

A. type UserInput { name: String, age: Int }

B. input UserInput { name: String, age: Int }

C. interface UserInput { name: String, age: Int }

D. enum UserInput { name, age }

Solution

1. Step 1: Recall GraphQL syntax for input types

   Input types are defined using the input keyword, not type, interface, or enum.

2. Step 2: Verify the structure

   The correct syntax is input UserInput { name: String, age: Int }.

3. Final Answer:

   input UserInput { name: String, age: Int } -> Option B

4. Quick Check:

   Input types use 'input' keyword [OK]

Hint: Use 'input' keyword to define input types [OK]

Common Mistakes:

• Using 'type' instead of 'input' for input types
• Confusing input with interface or enum
• Missing curly braces or commas

3. Given the input type definition:

input AddressInput { street: String, city: String }

and the mutation:

mutation AddAddress($address: AddressInput!) { addAddress(address: $address) { id } }

What is the correct way to pass the variable $address in a GraphQL request?

medium

A. { "address": null }

B. { "address": "123 Main St, Springfield" }

C. { "address": ["123 Main St", "Springfield"] }

D. { "address": { "street": "123 Main St", "city": "Springfield" } }

Solution

1. Step 1: Understand input type structure

   The input type expects an object with fields street and city, both strings.

2. Step 2: Match variable format to input type

   The variable must be a JSON object with keys matching the input fields, so { "address": { "street": "123 Main St", "city": "Springfield" } } is correct.

3. Final Answer:

   { "address": { "street": "123 Main St", "city": "Springfield" } } -> Option D

4. Quick Check:

   Input variables match input type fields [OK]

Hint: Pass input variables as objects matching input type fields [OK]

Common Mistakes:

• Passing input as a string instead of object
• Using array instead of object for input
• Passing null when input is required

4. Consider this input type and mutation:

input ProductInput { name: String!, price: Float! }

mutation AddProduct($product: ProductInput!) { addProduct(product: $product) { id } }

If you send the variable { "product": { "name": "Book" } }, what error will occur?

medium

A. Runtime error: price field is required but missing

B. No error, mutation succeeds

C. Syntax error: missing price field

D. Type error: name should be Int

Solution

1. Step 1: Check required fields in input type

   Both name and price are marked with !, meaning they are required.

2. Step 2: Analyze provided variables

   The variable only provides name, missing price, so GraphQL will raise a runtime error for missing required field.

3. Final Answer:

   Runtime error: price field is required but missing -> Option A

4. Quick Check:

   Required fields missing cause runtime errors [OK]

Hint: Required fields must be present in input variables [OK]

Common Mistakes:

• Assuming missing required fields cause syntax errors
• Thinking mutation succeeds without required fields
• Confusing field types (e.g., name as Int)

5. You want to create a mutation that accepts a complex input type with nested inputs for a user profile:

input AddressInput { street: String!, city: String! }

input UserProfileInput { name: String!, age: Int, address: AddressInput! }

Which of the following mutation argument definitions correctly uses these input types?

hard

A. mutation updateUserProfile(profile: UserProfileInput!) { ... }

B. mutation updateUserProfile(profile: UserProfileInput) { ... }

C. mutation updateUserProfile(profile: AddressInput!) { ... }

D. mutation updateUserProfile(profile: String!) { ... }

Solution

1. Step 1: Identify correct input type for mutation argument

   The mutation should accept the full user profile input, which is UserProfileInput, not just the address or a string.

2. Step 2: Check required modifier

   Since the profile is required, the argument should be UserProfileInput! to enforce presence.

3. Final Answer:

   mutation updateUserProfile(profile: UserProfileInput!) { ... } -> Option A

4. Quick Check:

   Use full nested input type with ! for required [OK]

Hint: Use full nested input type with ! if required [OK]

Common Mistakes:

• Using nested input type instead of full input type
• Omitting required ! modifier
• Using scalar types instead of input types