Create mutation pattern in GraphQL - Step-by-Step Execution

Concept Flow - Create mutation pattern

Define Mutation Type

↓

Specify Input Arguments

↓

Write Resolver Logic

↓

Return Created Data

↓

Client Sends Mutation Request

↓

Server Executes Resolver

↓

Client Receives Response

This flow shows how a GraphQL mutation is defined, executed, and returns data to the client.

Execution Sample

GraphQL

mutation {
  createUser(name: "Alice", age: 30) {
    id
    name
    age
  }
}

This mutation creates a new user with name 'Alice' and age 30, then returns the new user's id, name, and age.

Execution Table

Step	Action	Input	Resolver Logic	Output
1	Receive mutation request	{name: "Alice", age: 30}	N/A	N/A
2	Validate input	{name: "Alice", age: 30}	Check required fields	Valid input
3	Create user in database	{name: "Alice", age: 30}	Insert new user record	New user id generated (e.g., 101)
4	Return created user data	N/A	Fetch id, name, age	{id: 101, name: "Alice", age: 30}
5	Send response to client	N/A	N/A	{data: {createUser: {id: 101, name: "Alice", age: 30}}}
6	End	N/A	N/A	Mutation complete

💡 Mutation completes after sending created user data back to client.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
input	N/A	{name: "Alice", age: 30}	{name: "Alice", age: 30}	{name: "Alice", age: 30}	N/A
newUserId	N/A	N/A	101	101	101
responseData	N/A	N/A	N/A	{id: 101, name: "Alice", age: 30}	{data: {createUser: {id: 101, name: "Alice", age: 30}}}

Key Moments - 3 Insights

Why do we need to validate input before creating the user?

Input validation ensures required fields like 'name' and 'age' are present and correct before inserting data, as shown in step 2 of the execution_table.

What does the resolver return after creating the user?

The resolver returns the newly created user's data including the generated id, as shown in step 4 of the execution_table.

Why is the mutation response wrapped inside a 'data' field?

GraphQL responses always wrap results inside a 'data' field to standardize responses, as seen in step 5 of the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what is the new user id after step 3?

A Alice

B 30

C 101

D N/A

💡 Hint

Check the 'newUserId' variable in variable_tracker after step 3.

At which step does the server send the mutation response back to the client?

A Step 5

B Step 2

C Step 4

D Step 6

💡 Hint

Look at the 'Action' column in execution_table for sending response.

If the input was missing the 'name' field, which step would fail?

A Step 1

B Step 2

C Step 3

D Step 5

💡 Hint

Input validation happens at step 2 according to execution_table.

Concept Snapshot

GraphQL mutation pattern:
- Define mutation type with input arguments
- Write resolver to handle creation logic
- Return created data fields
- Client sends mutation request
- Server executes resolver and returns data
- Response wrapped in 'data' field

Full Transcript

This visual execution shows how a GraphQL mutation is created and executed. First, the mutation type is defined with input arguments like name and age. When the client sends a mutation request with these inputs, the server validates the input to ensure required fields are present. Then the resolver creates a new user in the database and generates a new user id. The resolver returns the created user's data including id, name, and age. Finally, the server sends the response back to the client wrapped inside a 'data' field. The execution table traces each step from receiving input to sending the response. The variable tracker shows how input, new user id, and response data change through the process. Key moments clarify why input validation is important, what the resolver returns, and why the response is wrapped. The quiz questions test understanding of the new user id, response sending step, and input validation failure. This pattern helps beginners see the step-by-step flow of creating data with GraphQL mutations.

Practice

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

easy

A. To optimize query performance

B. To create, update, or delete data in the database

C. To define the schema types

D. To fetch data without changing it

Solution

1. Step 1: Understand GraphQL operation types

   GraphQL has queries for reading data and mutations for changing data.

2. Step 2: Identify mutation role

   Mutations are used to create, update, or delete data in the database.

3. Final Answer:

   To create, update, or delete data in the database -> Option B

4. Quick Check:

   Mutation = change data [OK]

Hint: Mutations always change data, queries only read data [OK]

Common Mistakes:

• Confusing mutations with queries
• Thinking mutations only fetch data
• Mixing schema definition with data operations

2. Which of the following is the correct syntax to start a mutation with an input variable named input of type CreateUserInput!?

easy

A. mutation createUser($input: CreateUserInput!) { ... }

B. query createUser(input: CreateUserInput!) { ... }

C. mutation createUser(input CreateUserInput!) { ... }

D. mutation createUser($input CreateUserInput!) { ... }

Solution

1. Step 1: Recall mutation syntax with variables

   Variables in GraphQL mutations start with $ and have a colon before the type.

2. Step 2: Check each option

   mutation createUser($input: CreateUserInput!) { ... } correctly uses $input: CreateUserInput!. Others miss $ or colon.

3. Final Answer:

   mutation createUser($input: CreateUserInput!) { ... } -> Option A

4. Quick Check:

   Variables need $ and colon [OK]

Hint: Variables start with $ and use colon before type [OK]

Common Mistakes:

• Omitting $ before variable name
• Missing colon between variable and type
• Using query instead of mutation keyword

3. Given this mutation:

mutation AddBook($book: BookInput!) {
  addBook(input: $book) {
    id
    title
  }
}

What fields will the server return after running this mutation?

medium

A. Only the input object sent

B. All fields of the book including author and publishedYear

C. No fields, mutation returns nothing

D. Only the id and title of the new book

Solution

1. Step 1: Identify requested return fields

   The mutation requests id and title fields inside addBook.

2. Step 2: Understand GraphQL response

   GraphQL returns only the fields explicitly requested, so only id and title are returned.

3. Final Answer:

   Only the id and title of the new book -> Option D

4. Quick Check:

   Requested fields = returned fields [OK]

Hint: Returned fields match exactly requested fields in mutation body [OK]

Common Mistakes:

• Assuming all fields return by default
• Expecting input object to be returned
• Thinking mutation returns no data

4. Identify the error in this mutation:

mutation CreatePost($post: PostInput!) {
  createPost(post: $post) {
    id
    content
  }
}

Assuming the server expects the input argument to be named input, not post.

medium

A. The mutation keyword should be query

B. The variable $post should be $input

C. The argument name post should be input

D. The return fields id and content are invalid

Solution

1. Step 1: Check argument name in mutation call

   The mutation calls createPost(post: $post), but server expects input argument.

2. Step 2: Correct argument name

   Changing post to input matches server expectation and fixes error.

3. Final Answer:

   The argument name post should be input -> Option C

4. Quick Check:

   Argument names must match server schema [OK]

Hint: Match argument names exactly as server expects [OK]

Common Mistakes:

• Using wrong argument name in mutation call
• Confusing variable name with argument name
• Changing mutation keyword incorrectly

5. You want to create a mutation to add a new user with fields name and email. Which mutation correctly uses input variables and requests the new user's id and email in the response?

hard

A. mutation AddUser($input: UserInput!) { addUser(input: $input) { id email } }

B. mutation AddUser(input: UserInput!) { addUser(input: input) { id email } }

C. mutation AddUser($user: UserInput!) { addUser(user: $user) { name email } }

D. mutation AddUser($input: UserInput!) { addUser(input: $input) { name } }

Solution

1. Step 1: Check variable declaration and usage

   mutation AddUser($input: UserInput!) { addUser(input: $input) { id email } } correctly declares $input: UserInput! and uses it as input: $input.

2. Step 2: Verify requested return fields

   mutation AddUser($input: UserInput!) { addUser(input: $input) { id email } } requests id and email, matching the question requirement.

3. Final Answer:

   mutation AddUser($input: UserInput!) { addUser(input: $input) { id email } } -> Option A

4. Quick Check:

   Correct variable and requested fields = mutation AddUser($input: UserInput!) { addUser(input: $input) { id email } } [OK]

Hint: Use $variable and request needed fields explicitly [OK]

Common Mistakes:

• Omitting $ in variable declaration or usage
• Requesting wrong fields in response
• Using wrong argument names