Queries and mutations in NestJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a GraphQL query in NestJS.

NestJS

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

@Resolver()
export class SampleResolver {
  @[1]()
  getHello(): string {
    return 'Hello World!';
  }
}

Drag options to blanks, or click blank then click option'

AMutation

BQuery

CSubscription

DController

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Mutation instead of @Query

Using @Controller which is for REST, not GraphQL

The @Query() decorator defines a GraphQL query method in NestJS.

2fill in blank

medium

Complete the code to define a GraphQL mutation in NestJS.

NestJS

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

@Resolver()
export class SampleResolver {
  @[1]()
  createItem(): string {
    return 'Item created';
  }
}

Drag options to blanks, or click blank then click option'

AMutation

BQuery

CSubscription

DGet

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Query instead of @Mutation

Using @Get which is for REST controllers

The @Mutation() decorator defines a GraphQL mutation method in NestJS.

3fill in blank

hard

Fix the error in the resolver method decorator to correctly define a query.

NestJS

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

@Resolver()
export class SampleResolver {
  @[1]()
  fetchData(): string {
    return 'Data fetched';
  }
}

Drag options to blanks, or click blank then click option'

AMutation

BSubscribe

CController

DQuery

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Mutation for a query method

Using @Subscribe which is not a valid decorator

To define a query, the method must use the @Query() decorator.

4fill in blank

hard

Fill both blanks to define a mutation method with an argument in NestJS GraphQL.

NestJS

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

@Resolver()
export class SampleResolver {
  @[1]()
  addUser(@[2]('name') name: string): string {
    return `User ${name} added`;
  }
}

Drag options to blanks, or click blank then click option'

AMutation

BQuery

CArgs

DParam

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Query instead of @Mutation

Using @Param which is for REST, not GraphQL

The @Mutation() decorator defines the mutation, and @Args() extracts the argument.

5fill in blank

hard

Fill all three blanks to define a query method with an argument and return type in NestJS GraphQL.

NestJS

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

@Resolver()
export class SampleResolver {
  @[1]()
  getUser(@[2]('id') id: string): [3] {
    return `User with ID ${id}`;
  }
}

Drag options to blanks, or click blank then click option'

AMutation

BArgs

Cstring

DQuery

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Mutation instead of @Query

Using @Param instead of @Args

Omitting the return type

The method is a query, so use @Query(). Arguments come from @Args(), and the return type is string.

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