Input types in GraphQL - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a GraphQL input type for a user with a name field.

GraphQL

input UserInput { name: [1] }

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

AFloat

BInt

CBoolean

DString

Attempts:

3 left

💡 Hint

Common Mistakes

Using Int or Boolean for text fields.

Forgetting to specify the type.

The name field should be of type String because it holds text data.

2fill in blank

medium

Complete the code to define an input type with an age field that must be an integer.

GraphQL

input PersonInput { age: [1] }

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

AString

BFloat

CInt

DBoolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using Float for integer values.

Using String for numeric fields.

The age field should be Int because it represents whole numbers.

3fill in blank

hard

Fix the error in the input type by choosing the correct type for the isActive field.

GraphQL

input StatusInput { isActive: [1] }

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

AInt

BBoolean

CString

DFloat

Attempts:

3 left

💡 Hint

Common Mistakes

Using String or Int for boolean values.

Confusing Boolean with numeric types.

The isActive field should be Boolean because it represents true or false values.

4fill in blank

hard

Fill both blanks to define an input type with a required email field and an optional age field.

GraphQL

input ContactInput { email: [1] age: [2] }

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

AString!

BString

CBoolean

DInt

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the exclamation mark for required fields.

Using Boolean for email field.

The email field is required, so it uses String!. The age field is optional, so it uses Int without an exclamation mark.

5fill in blank

hard

Fill all three blanks to define an input type with a required username, an optional score, and a flag indicating if the user is active.

GraphQL

input UserStatsInput { username: [1] score: [2] isActive: [3] }

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

AString!

BInt

CBoolean

DFloat

Attempts:

3 left

💡 Hint

Common Mistakes

Using Float for score when integer is expected.

Missing exclamation mark for required username.

The username is required text, so it uses String!. The score is an optional integer, so it uses Int. The isActive flag is a boolean value.

Practice

1. What is the main purpose of input types in GraphQL?

easy

A. To define the shape of data sent into queries or mutations

B. To specify the output format of queries

C. To create database tables automatically

D. To style the API responses

Solution

1. Step 1: Understand the role of input types

   Input types define how data should be structured when sent to the server in queries or mutations.

2. Step 2: Differentiate input from output types

   Output types define what data is returned, while input types organize incoming data.

3. Final Answer:

   To define the shape of data sent into queries or mutations -> Option A

4. Quick Check:

   Input types = organize incoming data [OK]

Hint: Input types shape incoming data, not output [OK]

Common Mistakes:

• Confusing input types with output types
• Thinking input types create database tables
• Assuming input types affect response styling

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

easy

A. input UserInput = { name: String!, age: Int }

B. type UserInput { name: String! age: Int }

C. input UserInput(name: String!, age: Int)

D. input UserInput { name: String! age: Int }

Solution

1. Step 1: Recall input type declaration syntax

   Input types use the keyword input followed by the name and curly braces for fields.

2. Step 2: Check each option's syntax

   input UserInput { name: String! age: Int } correctly uses input UserInput { ... }. type UserInput { name: String! age: Int } uses type which is for output types. Options C and D have invalid syntax.

3. Final Answer:

   input UserInput { name: String! age: Int } -> Option D

4. Quick Check:

   Input types start with 'input' keyword [OK]

Hint: Input types start with 'input' keyword and braces [OK]

Common Mistakes:

• Using 'type' instead of 'input'
• Using parentheses instead of braces
• Assigning input type with '=' sign

3. Given this input type:

input ProductInput { id: ID! name: String! price: Float }

Which mutation call is valid?

medium

A. mutation { addProduct(input: { name: "Pen", price: "1.5" }) { id name } }

B. mutation { addProduct(input: { id: 123, name: "Pen" }) { id name } }

C. mutation { addProduct(input: { id: "123", name: "Pen", price: 1.5 }) { id name } }

D. mutation { addProduct(input: { id: "123", price: 1.5 }) { id name } }

Solution

1. Step 1: Check required fields and types

   Fields id and name are required (non-null). price is optional. Types must match: id is ID (string), name is String, price is Float.

2. Step 2: Validate each option

   mutation { addProduct(input: { id: "123", name: "Pen", price: 1.5 }) { id name } } provides all required fields with correct types. mutation { addProduct(input: { id: 123, name: "Pen" }) { id name } } uses number 123 for ID (should be string). mutation { addProduct(input: { name: "Pen", price: "1.5" }) { id name } } misses required id and uses string for price (should be Float). mutation { addProduct(input: { id: "123", price: 1.5 }) { id name } } misses required name.

3. Final Answer:

   mutation { addProduct(input: { id: "123", name: "Pen", price: 1.5 }) { id name } } -> Option C

4. Quick Check:

   Required fields present with correct types [OK]

Hint: Required fields must be present with correct types [OK]

Common Mistakes:

• Omitting required fields
• Using wrong data types (e.g., number instead of string for ID)
• Passing strings for Float fields

4. Identify the error in this input type definition:

input UserInput { id: ID! name: String age: Int! }

medium

A. Syntax is correct; no error

B. Input types cannot have non-null fields

C. Missing commas between fields

D. Field names must be lowercase

Solution

1. Step 1: Review GraphQL input type syntax rules

   Input types list fields with their types separated by spaces or new lines; commas are not required.

2. Step 2: Check each option against syntax

   Input types cannot have non-null fields is false; non-null fields are allowed. Field names must be lowercase is false; field names can be camelCase or lowercase. Missing commas between fields is false; commas are optional. Syntax is correct; no error is true; the syntax is valid.

3. Final Answer:

   Syntax is correct; no error -> Option A

4. Quick Check:

   Input fields separated by spaces, commas optional [OK]

Hint: Commas are optional between fields in input types [OK]

Common Mistakes:

• Thinking commas are mandatory
• Believing non-null fields are disallowed
• Assuming field names must be lowercase only

5. You want to create an input type for updating a user's profile where all fields are optional except id. Which input type definition is correct?

hard

A. input UpdateUserInput { id: ID! name: String! email: String age: Int }

B. input UpdateUserInput { id: ID! name: String email: String age: Int }

C. input UpdateUserInput { id: ID! name: String! email: String! age: Int! }

D. input UpdateUserInput { id: ID name: String! email: String! age: Int! }

Solution

1. Step 1: Understand requirement for optional fields

   Only id must be required (non-null). Other fields should be optional, so no exclamation marks.

2. Step 2: Evaluate each option

   input UpdateUserInput { id: ID! name: String email: String age: Int } has id: ID! required and others optional. input UpdateUserInput { id: ID name: String! email: String! age: Int! } makes id optional and others required, wrong. input UpdateUserInput { id: ID! name: String! email: String! age: Int! } makes all fields required, wrong. input UpdateUserInput { id: ID! name: String! email: String age: Int } makes name required, which is not desired.

3. Final Answer:

   input UpdateUserInput { id: ID! name: String email: String age: Int } -> Option B

4. Quick Check:

   Only id required, others optional [OK]

Hint: Only add '!' to required fields in input types [OK]

Common Mistakes:

• Making all fields required
• Forgetting to make id required
• Adding '!' to optional fields