Queries and mutations in NestJS - Step-by-Step Execution

Concept Flow - Queries and mutations

Client sends GraphQL request

↓

NestJS GraphQL Resolver

↓

Query Handler

↓

Fetch data

↓

Return response to client

The client sends a GraphQL request which NestJS routes to either a query or mutation handler. Queries fetch data, mutations change data, then responses return to the client.

Execution Sample

NestJS

import { Resolver, Query, Mutation, Args } from '@nestjs/graphql';

@Resolver()
export class SampleResolver {
  @Query(() => String)
  hello() { return 'Hello World'; }

  @Mutation(() => String)
  updateMessage(@Args('newMsg') newMsg: string) { return newMsg; }
}

Defines a simple NestJS GraphQL resolver with a query returning a greeting and a mutation updating a message.

Execution Table

Step	Request Type	Resolver Method	Action	Result
1	Query	hello	Called hello()	Returns 'Hello World'
2	Mutation	updateMessage	Called updateMessage with 'Hi!'	Returns 'Hi!'
3	Query	hello	Called hello()	Returns 'Hello World'
4	Mutation	updateMessage	Called updateMessage with 'Bye!'	Returns 'Bye!'
5	End	-	No more requests	Execution stops

💡 No more client requests; server waits for next GraphQL operation.

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
newMsg	undefined	'Hi!'	'Bye!'	'Bye!'

Key Moments - 2 Insights

Why does the query 'hello' always return the same result?

Because the 'hello' query method returns a fixed string without changing any state, as shown in execution_table rows 1 and 3.

How does the mutation 'updateMessage' change the output?

The mutation takes an argument 'newMsg' and returns it, changing the output each time it's called, as seen in execution_table rows 2 and 4.

Visual Quiz - 3 Questions

Look at the execution table, what does the 'hello' query return at step 3?

A 'Hello World'

B 'Hi!'

C 'Bye!'

D undefined

💡 Hint

Check the 'Result' column for step 3 in the execution_table.

At which step does the mutation receive the argument 'Hi!'?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'Action' column for when 'updateMessage' is called with 'Hi!' in the execution_table.

If the mutation 'updateMessage' always returned 'Hello', how would the variable 'newMsg' change?

A It would be undefined

B It would alternate between 'Hi!' and 'Bye!'

C It would always be 'Hello'

D It would cause an error

💡 Hint

Refer to variable_tracker to see how 'newMsg' changes with mutation calls.

Concept Snapshot

NestJS GraphQL uses resolvers with @Query for fetching data and @Mutation for changing data.
Queries do not change state; mutations can accept arguments to update data.
Each resolver method returns data sent back to the client.
Use @Args to get input values for mutations.
Queries and mutations are separate methods but both return responses.

Full Transcript

In NestJS GraphQL, clients send requests that are either queries or mutations. Queries fetch data without changing anything, while mutations modify data. The resolver class uses decorators @Query and @Mutation to mark methods for these operations. For example, a 'hello' query returns a fixed greeting string. A mutation called 'updateMessage' takes an argument and returns it, simulating data change. The execution table shows step-by-step calls and results. Variables like 'newMsg' track mutation inputs. Understanding this flow helps beginners see how GraphQL operations work in NestJS.

Practice

1. In NestJS GraphQL, which decorator is used to define a method that fetches data without modifying it?

easy

A. @Query

B. @Mutation

C. @ResolveField

D. @Subscription

Solution

1. Step 1: Understand the purpose of @Query

   The @Query decorator marks a method as a GraphQL query, which fetches data without changing it.

2. Step 2: Differentiate from @Mutation

   @Mutation is used for methods that change data, so it is not correct here.

3. Final Answer:

   @Query -> Option A

4. Quick Check:

   Fetch data = @Query [OK]

Hint: Queries fetch data, use @Query decorator [OK]

Common Mistakes:

• Confusing @Mutation with @Query
• Using @ResolveField for queries
• Thinking @Subscription fetches data

2. Which of the following is the correct syntax to define a mutation method named createUser in a NestJS GraphQL resolver?

easy

A. @Mutation\ncreateUser() { /*...*/ }

B. @Query(() => User)\ncreateUser() { /*...*/ }

C. @Mutation(() => User)\ncreateUser() { /*...*/ }

D. @Mutation()\ncreateUser() { /*...*/ }

Solution

1. Step 1: Check decorator usage with return type

   The correct syntax uses @Mutation with a function returning the GraphQL type, e.g., @Mutation(() => User).

2. Step 2: Verify method name and decorator match

   The method name is createUser, and it must be decorated with @Mutation, not @Query.

3. Final Answer:

   @Mutation(() => User)\ncreateUser() { /*...*/ } -> Option C

4. Quick Check:

   Mutation with return type syntax = @Mutation(() => User)\ncreateUser() { /*...*/ } [OK]

Hint: Use @Mutation(() => ReturnType) for mutations [OK]

Common Mistakes:

• Omitting the return type function in decorator
• Using @Query instead of @Mutation
• Adding empty parentheses without return type

3. Given the following NestJS GraphQL resolver code, what will be the output when the getUser query is called?

@Query(() => String)
getUser() {
  return 'Alice';
}

medium

A. Error: Return type mismatch

B. "Alice"

C. null

D. undefined

Solution

1. Step 1: Analyze the @Query return type and method

   The method getUser returns the string 'Alice' and is decorated with @Query(() => String), matching the return type.

2. Step 2: Determine the GraphQL response

   GraphQL will return the string value "Alice" as the query result.

3. Final Answer:

   "Alice" -> Option B

4. Quick Check:

   Matching return type returns value correctly [OK]

Hint: Return value matches @Query type, so output is that value [OK]

Common Mistakes:

• Expecting an error due to missing async
• Confusing return value with null or undefined
• Thinking GraphQL wraps string differently

4. Identify the error in this NestJS GraphQL mutation resolver code:

@Mutation(() => Boolean)
async updateUser() {
  this.userService.update();
  return true;
}

medium

A. Incorrect return type Boolean instead of boolean

B. updateUser method must return void

C. Mutation should not be async

D. Missing await before userService.update()

Solution

1. Step 1: Check async method and service call

   The method is async but calls userService.update() without await, so the update may not complete before returning.

2. Step 2: Understand the impact of missing await

   Without await, the mutation returns true immediately, possibly before update finishes, causing unexpected behavior.

3. Final Answer:

   Missing await before userService.update() -> Option D

4. Quick Check:

   Async method must await async calls [OK]

Hint: Always await async calls inside async mutations [OK]

Common Mistakes:

• Ignoring missing await in async methods
• Confusing Boolean with boolean types
• Thinking async is not allowed in mutations

5. You want to create a NestJS GraphQL mutation that updates a user's email and returns the updated user object. Which of the following resolver method signatures correctly combines input argument and mutation decorator?

hard

A. @Mutation(() => User)
updateEmail(@Args('email') email: string) {
return this.userService.updateEmail(email);
}

B. @Query(() => User)
updateEmail(@Args('email') email: string) {
return this.userService.updateEmail(email);
}

C. @Mutation(() => User)
updateEmail(email: string) {
return this.userService.updateEmail(email);
}

D. @Mutation(() => User)
updateEmail(@Args() email: string) {
return this.userService.updateEmail(email);
}

Solution

1. Step 1: Confirm correct decorator for data change

   Since this method updates data, it must use @Mutation with the return type User.

2. Step 2: Check argument decorator usage

   The argument email is correctly decorated with @Args('email') to extract the argument from GraphQL input.

3. Step 3: Verify method signature correctness

   @Mutation(() => User) updateEmail(@Args('email') email: string) { return this.userService.updateEmail(email); } correctly combines @Mutation, return type, and @Args usage.

4. Final Answer:

   @Mutation(() => User) updateEmail(@Args('email') email: string) { return this.userService.updateEmail(email); } -> Option A

5. Quick Check:

   Mutation with @Args('email') and return type = @Mutation(() => User) updateEmail(@Args('email') email: string) { return this.userService.updateEmail(email); } [OK]

Hint: Use @Mutation with @Args('argName') for input arguments [OK]

Common Mistakes:

• Using @Query for mutations
• Omitting @Args decorator
• Using @Args() without argument name