Input types in GraphQL - Step-by-Step Execution

Concept Flow - Input types

Define Input Type

↓

Use Input Type in Query/Mutation

↓

Client Sends Input Data

↓

Server Validates Input

↓

Execute Resolver with Input

↓

Return Response

Input types are defined first, then used in queries or mutations where client sends data, server validates it, and resolver executes with that input.

Execution Sample

GraphQL

input UserInput {
  name: String!
  age: Int
}

mutation createUser($input: UserInput!) {
  addUser(input: $input) { id name }
}

Defines an input type UserInput and uses it in a mutation to add a user with name and optional age.

Execution Table

Step	Action	Input Data	Validation Result	Resolver Called	Output
1	Define Input Type UserInput	-	-	-	-
2	Client sends mutation with input {name: "Alice", age: 30}	{"name":"Alice","age":30}	Valid	addUser({name: "Alice", age: 30})	{"id":"1","name":"Alice"}
3	Client sends mutation with input {name: "Bob"}	{"name":"Bob"}	Valid (age optional)	addUser({name: "Bob"})	{"id":"2","name":"Bob"}
4	Client sends mutation with input {age: 25}	{"age":25}	Invalid (name missing)	No resolver call	Error: Field 'name' is required
5	Client sends mutation with input {name: null}	{"name":null}	Invalid (name non-null)	No resolver call	Error: Field 'name' cannot be null

💡 Execution stops when input validation fails or after resolver returns response.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5
input	undefined	{"name":"Alice","age":30}	{"name":"Bob"}	{"age":25}	{"name":null}
validation	none	valid	valid	invalid	invalid
resolverCalled	false	true	true	false	false
output	none	{"id":"1","name":"Alice"}	{"id":"2","name":"Bob"}	error	error

Key Moments - 3 Insights

Why does the mutation fail when 'name' is missing in the input?

Because 'name' is marked as non-nullable (String!), the validation fails at step 4 in the execution_table, so the resolver is not called.

Can the 'age' field be omitted in the input?

Yes, 'age' is optional (no !), so at step 3 the input without 'age' passes validation and resolver runs.

What happens if 'name' is explicitly set to null?

At step 5, validation fails because 'name' is non-nullable, so the mutation returns an error without calling the resolver.

Visual Quiz - 3 Questions

Look at the execution_table, what is the validation result at step 3?

A Invalid (missing name)

B Valid (age optional)

C Valid (all fields present)

D Invalid (name null)

💡 Hint

Check the 'Validation Result' column at step 3 in the execution_table.

At which step does the resolver NOT get called due to invalid input?

A Step 2

B Step 3

C Step 4

D Step 1

💡 Hint

Look at the 'Resolver Called' column in the execution_table for steps with 'false'.

If the 'name' field was made optional, how would step 4 change?

A Validation would pass and resolver would be called

B Validation would fail as before

C Resolver would be called but return error

D No change in validation

💡 Hint

Refer to the 'validation' variable in variable_tracker and how non-null affects validation.

Concept Snapshot

Input types define structured data for queries/mutations.
Use 'input' keyword with fields and types.
Non-null fields require values; optional fields can be omitted.
Server validates input before resolver runs.
Invalid input stops execution with error.
Input types improve data safety and clarity.

Full Transcript

This visual execution shows how GraphQL input types work step-by-step. First, an input type UserInput is defined with a required name and optional age. Then, clients send mutations with input data. The server validates this input: if required fields are missing or null, validation fails and the resolver is not called. If input is valid, the resolver executes and returns data. The execution table tracks each step, showing input data, validation results, resolver calls, and outputs. Variable tracking shows how input and validation states change. Key moments clarify common confusions about required vs optional fields and null values. The quiz tests understanding by referencing these visuals. This helps beginners see exactly how input types control data flow in GraphQL.

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