Mutation syntax in GraphQL - Step-by-Step Execution

Concept Flow - Mutation syntax

Start Mutation Request

↓

Define Mutation Name

↓

Specify Input Arguments

↓

Define Return Fields

↓

Send Mutation to Server

↓

Server Executes Mutation

↓

Receive Mutation Response

↓

End

This flow shows how a GraphQL mutation is structured and executed: start with a mutation request, define its name and inputs, specify what data to return, send it to the server, and get the response.

Execution Sample

GraphQL

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

This mutation adds a user named Alice aged 30 and requests the new user's id and name in the response.

Execution Table

Step	Action	Details	Result
1	Start Mutation	Begin mutation block	Ready to define mutation
2	Define Mutation Name	addUser	Mutation operation identified
3	Specify Input Arguments	name: "Alice", age: 30	Inputs set for mutation
4	Define Return Fields	id, name	Fields to return specified
5	Send Mutation to Server	Mutation request sent	Server receives mutation
6	Server Executes Mutation	Creates new user with given data	User added with id generated
7	Receive Mutation Response	Returns id and name of new user	Response received with new user data
8	End	Mutation complete	Client has new user info

💡 Mutation completes after server processes request and returns specified fields.

Variable Tracker

Variable	Start	After Step 3	After Step 6	Final
name	undefined	"Alice"	"Alice"	"Alice"
age	undefined	30	30	30
id	undefined	undefined	generated_id_123	generated_id_123
response	undefined	undefined	undefined	{id: "generated_id_123", name: "Alice"}

Key Moments - 2 Insights

Why do we specify return fields in a mutation?

In the execution_table at Step 4 and Step 7, you see that the client asks for specific fields (id, name) to be returned after the mutation runs. This tells the server what data to send back, so you get only what you need.

What happens if input arguments are missing?

At Step 3, input arguments are set. If required inputs like 'name' or 'age' are missing, the server will reject the mutation or return an error, because it needs those values to create the user.

Visual Quiz - 3 Questions

Look at the execution_table, what is the mutation name defined at Step 2?

A addUser

B createUser

C updateUser

D deleteUser

💡 Hint

Check the 'Details' column at Step 2 in the execution_table.

At which step does the server execute the mutation?

A Step 4

B Step 5

C Step 6

D Step 7

💡 Hint

Look for 'Server Executes Mutation' in the 'Action' column.

If we remove the return fields, what changes in the execution?

A The server will not execute the mutation.

B The client will receive no data back after mutation.

C The mutation will fail with an error.

D The mutation will return all fields by default.

💡 Hint

Refer to Step 4 and Step 7 about specifying return fields and receiving response.

Concept Snapshot

GraphQL Mutation Syntax:
mutation {
  mutationName(inputArgs) {
    returnFields
  }
}
- mutationName: operation to change data
- inputArgs: data to send
- returnFields: data to get back
- Server runs mutation and returns requested fields

Full Transcript

This visual execution shows how a GraphQL mutation works step-by-step. First, you start a mutation block and name the mutation operation, here 'addUser'. Then you provide input arguments like name and age. Next, you specify which fields you want back after the mutation runs, such as id and name. The mutation request is sent to the server, which executes it by creating a new user with the given data. Finally, the server sends back the requested fields in the response, completing the mutation process. Variables like name and age hold the input values, and the server generates a new id for the user. Specifying return fields is important so the client knows what data it will receive after the mutation.

Practice

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

easy

A. To define the data schema

B. To fetch data without changing anything

C. To create a new GraphQL server

D. To change data on the server like adding, updating, or deleting records

Solution

1. Step 1: Understand GraphQL operations

   GraphQL has queries to fetch data and mutations to change data.

2. Step 2: Identify mutation role

   Mutations are used to add, update, or delete data on the server.

3. Final Answer:

   To change data on the server like adding, updating, or deleting records -> Option D

4. Quick Check:

   Mutation = change data [OK]

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

Common Mistakes:

• Confusing mutations with queries
• Thinking mutations define schema
• Assuming mutations create servers

2. Which of the following is the correct basic syntax to start a mutation in GraphQL?

easy

A. mutation { addUser(name: "Alice") { id name } }

B. query { addUser(name: "Alice") { id name } }

C. mutation addUser { name: "Alice" }

D. addUser mutation { name: "Alice" }

Solution

1. Step 1: Recognize mutation keyword usage

   Mutations start with the keyword mutation followed by braces containing the mutation call.

2. Step 2: Check correct structure

   mutation { addUser(name: "Alice") { id name } } correctly uses mutation { addUser(...) { ... } } syntax.

3. Final Answer:

   mutation { addUser(name: "Alice") { id name } } -> Option A

4. Quick Check:

   Mutation starts with 'mutation' keyword and braces [OK]

Hint: Mutation always starts with 'mutation' keyword and braces [OK]

Common Mistakes:

• Using 'query' instead of 'mutation'
• Placing mutation name before 'mutation' keyword
• Missing braces around mutation call

3. Given the mutation below, what will be returned?

mutation {
  createPost(title: "Hello") {
    id
    title
  }
}

medium

A. No return data because no fields requested

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

C. { "data": { "createPost": { "id": 1, "title": "Hello" } } }

D. Syntax error: missing fields

Solution

1. Step 1: Analyze mutation call and requested fields

   The mutation calls createPost with title "Hello" and requests id and title fields back.

2. Step 2: Understand expected return

   The server returns the new post's id and title as requested.

3. Final Answer:

   { "data": { "createPost": { "id": 1, "title": "Hello" } } } -> Option C

4. Quick Check:

   Requested fields returned in data [OK]

Hint: Requested fields inside mutation braces are returned [OK]

Common Mistakes:

• Expecting no return data
• Confusing syntax error with correct syntax
• Ignoring requested fields in response

4. Identify the error in this mutation:

mutation {
  updateUser(id: 5, name: "Bob")
}

medium

A. Missing requested return fields after mutation call

B. Wrong keyword, should be 'query' instead of 'mutation'

C. Mutation name 'updateUser' is invalid

D. Extra parentheses around arguments

Solution

1. Step 1: Check mutation syntax

   Mutation calls must specify which fields to return inside braces after the call.

2. Step 2: Identify missing return fields

   This mutation lacks braces with requested fields after updateUser, causing syntax error.

3. Final Answer:

   Missing requested return fields after mutation call -> Option A

4. Quick Check:

   Mutations must request return fields [OK]

Hint: Always request fields after mutation call in braces [OK]

Common Mistakes:

• Omitting return fields
• Using 'query' keyword for mutations
• Misplacing parentheses

5. You want to delete a user by ID and get back the deleted user's name and email. Which mutation is correct?

hard

A. mutation deleteUser(id: 10) { name email }

B. mutation { deleteUser(id: 10) { name email } }

C. mutation { deleteUser(id: 10) }

D. deleteUser mutation { id: 10, name, email }

Solution

1. Step 1: Confirm mutation keyword and structure

   Mutation must start with mutation keyword followed by braces containing the mutation call.

2. Step 2: Check mutation call and requested fields

   mutation { deleteUser(id: 10) { name email } } correctly calls deleteUser with id: 10 and requests name and email fields.

3. Final Answer:

   mutation { deleteUser(id: 10) { name email } } -> Option B

4. Quick Check:

   Correct mutation syntax with requested return fields [OK]

Hint: Mutation call inside braces with requested fields in nested braces [OK]

Common Mistakes:

• Placing mutation name after keyword incorrectly
• Not requesting return fields
• Using wrong keyword order