Queries and mutations in NestJS - Mini Project: Build & Apply

Building Queries and Mutations in NestJS GraphQL

📖 Scenario: You are creating a simple NestJS GraphQL API for a bookstore. You want to let users get book details and add new books.

🎯 Goal: Build a NestJS GraphQL resolver with a query to get a book by its id and a mutation to add a new book with title and author.

📋 What You'll Learn

Create a Book class with id, title, and author fields

Create a query called getBook that takes an id argument and returns the matching Book

Create a mutation called addBook that takes title and author arguments and returns the new Book

Use an in-memory array to store books

💡 Why This Matters

🌍 Real World

Building APIs with NestJS and GraphQL is common for modern web apps that need flexible data fetching and updating.

💼 Career

Understanding queries and mutations in NestJS GraphQL is essential for backend developers working with GraphQL APIs.

1

Create the Book class and initial books array

Create a class called Book with id (number), title (string), and author (string) fields. Then create a variable called books as an array with one book: { id: 1, title: '1984', author: 'George Orwell' }.

NestJS

# Create the Book class and books array here
# Your code here

Hint

Define a TypeScript class with the three fields. Then create an array with one object matching the class.

2

Add a query method to get a book by id

Add a method called getBook inside a resolver class BooksResolver. It should take an id argument of type number and return the book from books with that id. Use @Query(() => Book) decorator on the method.

NestJS

class Book {
  id: number;
  title: string;
  author: string;
}

const books: Book[] = [
  { id: 1, title: '1984', author: 'George Orwell' }
];

// Add BooksResolver class with getBook query method here
# Your code here

Hint

Use @Resolver and @Query decorators. Use @Args to get the id argument.

3

Add a mutation method to add a new book

Inside the BooksResolver class, add a method called addBook with title and author string arguments. It should create a new Book with a unique id, add it to books, and return the new book. Use @Mutation(() => Book) decorator on the method.

NestJS

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

class Book {
  id: number;
  title: string;
  author: string;
}

const books: Book[] = [
  { id: 1, title: '1984', author: 'George Orwell' }
];

@Resolver(() => Book)
export class BooksResolver {
  @Query(() => Book, { nullable: true })
  getBook(@Args('id', { type: () => Int }) id: number): Book | undefined {
    return books.find(book => book.id === id);
  }

  // Add addBook mutation method here
# Your code here
}

Hint

Use @Mutation decorator. Create a new book object with a new id and add it to the books array.

4

Complete the resolver export and imports

Add the necessary imports from @nestjs/graphql at the top: Resolver, Query, Args, Int, and Mutation. Export the BooksResolver class so it can be used in the NestJS module.

NestJS

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

// Ensure BooksResolver is exported
# Your code here

Hint

Make sure all decorators are imported and the resolver class is exported.

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