Input types in GraphQL - Mini Project: Build & Apply

GraphQL Input Types for User Registration

📖 Scenario: You are building a simple user registration system using GraphQL. Users will provide their details to sign up.

🎯 Goal: Create a GraphQL input type to collect user registration data, then use it in a mutation to add a new user.

📋 What You'll Learn

Define a GraphQL input type called UserInput with fields username (String!), email (String!), and age (Int).

Create a mutation called registerUser that accepts a UserInput argument named input.

The mutation should return a User type with fields id, username, and email.

💡 Why This Matters

🌍 Real World

Input types in GraphQL are used to send structured data from clients to servers, such as user registration forms or product details.

💼 Career

Understanding input types and mutations is essential for backend developers working with GraphQL APIs to handle data creation and updates.

1

Define the UserInput input type

Create a GraphQL input type called UserInput with these exact fields: username of type String!, email of type String!, and age of type Int.

GraphQL

# Your code here
type User {
  id: ID!
  username: String!
  email: String!
}

Hint

Use the input keyword to define an input type. Fields must have types and exclamation marks for required fields.

2

Add the registerUser mutation

Add a mutation called registerUser that takes one argument named input of type UserInput! and returns a User type.

GraphQL

input UserInput {
  username: String!
  email: String!
  age: Int
}

type User {
  id: ID!
  username: String!
  email: String!
}

# Your code here

Hint

Define a Mutation type with a field registerUser that takes input: UserInput! and returns User.

3

Add a Query type placeholder

Add an empty Query type to complete the schema structure.

GraphQL

input UserInput {
  username: String!
  email: String!
  age: Int
}

type User {
  id: ID!
  username: String!
  email: String!
}

type Mutation {
  registerUser(input: UserInput!): User
}

# Your code here

Hint

GraphQL schemas need a Query type. Add a placeholder field like _empty: String if no queries yet.

4

Complete the schema with all types

Ensure the schema includes the UserInput input type, User type, Mutation type with registerUser, and the Query type with _empty.

GraphQL

input UserInput {
  username: String!
  email: String!
  age: Int
}

type User {
  id: ID!
  username: String!
  email: String!
}

type Mutation {
  registerUser(input: UserInput!): User
}

type Query {
  _empty: String
}

# Your code here

Hint

Check that all parts of the schema are present and correctly named.

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