Why mutations modify data in GraphQL - Visual Breakdown

Concept Flow - Why mutations modify data

Client sends mutation request

↓

Server receives mutation

↓

Server processes mutation logic

↓

Data in database is modified

↓

Server sends updated data response

↓

Client receives updated data

This flow shows how a GraphQL mutation request from a client leads to data changes on the server and returns updated data back to the client.

Execution Sample

GraphQL

mutation {
  addBook(title: "New Book", author: "Author") {
    id
    title
    author
  }
}

This mutation adds a new book to the database and returns its id, title, and author.

Execution Table

Step	Action	Evaluation	Result
1	Client sends mutation request	Mutation addBook with title and author	Request received by server
2	Server validates mutation input	Title and author are valid strings	Input accepted
3	Server executes mutation logic	Add new book record to database	Book added with new id
4	Server prepares response	Fetch new book data	Returns id, title, author
5	Client receives response	Updated data received	UI updates with new book info
6	End	No more steps	Mutation complete

💡 Mutation completes after server modifies data and client receives updated data

Variable Tracker

Variable	Start	After Step 3	Final
bookList	Existing books	Existing books + new book	Updated book list with new book

Key Moments - 2 Insights

Why does the mutation change data but a query does not?

Mutations are designed to modify data on the server, as shown in execution_table step 3 where the database is updated. Queries only fetch data without changing it.

What happens if the mutation input is invalid?

In execution_table step 2, if input is invalid, the server rejects the mutation and does not modify data, so no changes occur.

Visual Quiz - 3 Questions

Look at the execution_table, at which step is the database actually modified?

A Step 3

B Step 4

C Step 2

D Step 5

💡 Hint

Check the 'Action' and 'Result' columns in execution_table row for step 3

According to variable_tracker, what happens to bookList after the mutation?

A It loses some books

B It includes the new book

C It remains the same

D It becomes empty

💡 Hint

Look at the 'After Step 3' and 'Final' columns for bookList in variable_tracker

If the client never receives the response (step 5), what is true?

A Data was not modified

B Mutation was rejected

C Data was modified but client UI not updated

D Server did not process mutation

💡 Hint

Refer to execution_table steps 3 and 5 to see when data changes and when client updates

Concept Snapshot

GraphQL mutations are special requests that change data on the server.
They run logic that modifies the database.
After mutation, the server sends back updated data.
Clients use this data to update their view.
Mutations differ from queries which only fetch data without changes.

Full Transcript

This visual execution shows how GraphQL mutations work to modify data. The client sends a mutation request to add a new book. The server receives and validates the input. Then it runs the mutation logic to add the book to the database. After the data is changed, the server sends back the new book's details. The client receives this updated data and updates the user interface. Variables like the book list change after the mutation. Key points include that mutations modify data while queries do not, and that invalid input stops the mutation before data changes. The quiz questions help check understanding of when data changes and how the client gets updated.

Practice

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

easy

A. To modify data by adding, updating, or deleting it

B. To only fetch data without changes

C. To define the schema structure

D. To create a new query type

Solution

1. Step 1: Understand the role of mutations

   Mutations are designed to change data, unlike queries which only fetch data.

2. Step 2: Identify the correct purpose

   Since mutations add, update, or delete data, their main purpose is to modify data.

3. Final Answer:

   To modify data by adding, updating, or deleting it -> Option A

4. Quick Check:

   Mutation = Modify data [OK]

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

Common Mistakes:

• Confusing mutations with queries
• Thinking mutations only fetch data
• Believing mutations define schema only

2. Which of the following is the correct way to start a mutation operation in GraphQL?

easy

A. modify { updateUser(id: 1) { name } }

B. query { updateUser(id: 1) { name } }

C. update { updateUser(id: 1) { name } }

D. mutation { updateUser(id: 1) { name } }

Solution

1. Step 1: Identify the keyword for mutations

   GraphQL uses the keyword mutation to start mutation operations.

2. Step 2: Check the options

   Only mutation { updateUser(id: 1) { name } } uses the correct mutation keyword to start the operation.

3. Final Answer:

   mutation { updateUser(id: 1) { name } } -> Option D

4. Quick Check:

   Mutation keyword = mutation [OK]

Hint: Mutations always start with the 'mutation' keyword [OK]

Common Mistakes:

• Using 'query' instead of 'mutation'
• Using non-existent keywords like 'update' or 'modify'
• Omitting the mutation keyword

3. Given the mutation below, what will be the result if the user with id 2 exists?

mutation {
  updateUser(id: 2, input: {name: "Alice"}) {
    id
    name
  }
}

medium

A. Syntax error due to missing input type

B. { "data": { "updateUser": null } }

C. { "data": { "updateUser": { "id": 2, "name": "Alice" } } }

D. No change, returns old user data

Solution

1. Step 1: Understand mutation behavior

   The mutation updates user with id 2, changing the name to "Alice".

2. Step 2: Predict the returned data

   The mutation returns the updated user data with id and new name.

3. Final Answer:

   { "data": { "updateUser": { "id": 2, "name": "Alice" } } } -> Option C

4. Quick Check:

   Mutation updates and returns new data [OK]

Hint: Mutations return updated data if successful [OK]

Common Mistakes:

• Assuming mutation returns null on success
• Thinking mutation causes syntax error here
• Believing mutation returns old data without changes

4. Identify the error in this mutation:

mutation {
  addUser(name: "Bob")
  {
    id
    name
  }
}

medium

A. Mutation keyword is incorrect

B. Missing input argument object for addUser

C. Curly braces are misplaced

D. No error, mutation is correct

Solution

1. Step 1: Check mutation input format

   Mutations usually require input as an object, e.g., addUser(input: {name: "Bob"}).

2. Step 2: Identify missing input argument

   The mutation lacks the input argument object, causing an error.

3. Final Answer:

   Missing input argument object for addUser -> Option B

4. Quick Check:

   Input argument missing = error [OK]

Hint: Mutations need input objects for data changes [OK]

Common Mistakes:

• Forgetting to wrap inputs in an object
• Misplacing curly braces
• Confusing mutation keyword

5. You want to delete a user and then immediately fetch the updated user list in one mutation operation. Which approach correctly uses mutations to achieve this?

hard

A. Use a single mutation with two fields: deleteUser and users to delete and fetch updated list

B. Use a query to delete the user and a mutation to fetch the list

C. Use two separate mutations, one for deleting and one for fetching users

D. Use a mutation to delete the user and a query to fetch the updated list separately

Solution

1. Step 1: Understand mutation capabilities

   GraphQL mutations can include multiple fields to perform several operations in one request.

2. Step 2: Identify correct approach

   Using a single mutation with deleteUser and users fields allows deleting and fetching updated data atomically.

3. Final Answer:

   Use a single mutation with two fields: deleteUser and users to delete and fetch updated list -> Option A

4. Quick Check:

   Single mutation can do multiple related operations [OK]

Hint: Combine delete and fetch in one mutation for atomic update [OK]

Common Mistakes:

• Trying to delete with a query
• Splitting operations into separate requests unnecessarily
• Using mutation only for delete without fetching updated data