Resolvers in NestJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a basic GraphQL resolver method.

NestJS

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

@Resolver()
export class SampleResolver {
  @Query(() => String)
  hello() {
    return [1];
  }
}

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

Aconsole.log('Hello World!')

BHello World!

C'Hello World!'

Dreturn 'Hello World!'

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the string

Using console.log instead of return

Returning a non-string value

The resolver method should return a string value. The correct syntax is to return a string literal like 'Hello World!'.

2fill in blank

medium

Complete the code to inject a service into the resolver constructor.

NestJS

import { Resolver } from '@nestjs/graphql';
import { SampleService } from './sample.service';

@Resolver()
export class SampleResolver {
  constructor(private readonly [1]: SampleService) {}
}

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

Asample_service

Bservice

CSampleService

DsampleService

Attempts:

3 left

💡 Hint

Common Mistakes

Using the class name with uppercase first letter as variable

Using underscores in variable names

Using generic names like 'service'

The injected service should be named in camelCase, typically matching the service class name but starting with a lowercase letter.

3fill in blank

hard

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

NestJS

import { Resolver, [1] } from '@nestjs/graphql';

@Resolver()
export class SampleResolver {
  @[1](() => Boolean)
  async updateData() {
    return true;
  }
}

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

AMutation

BSubscription

CQuery

DResolveField

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Query instead of @Mutation

Using @Subscription for mutations

Forgetting to import the decorator

To define a mutation in a GraphQL resolver, use the @Mutation decorator imported from '@nestjs/graphql'.

4fill in blank

hard

Fill both blanks to define a resolver method that accepts an argument.

NestJS

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

@Resolver()
export class SampleResolver {
  @Query(() => String)
  greet(@[1]('name') [2]: string) {
    return `Hello, ${name}!`;
  }
}

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

AArgs

Bname

CArg

Dusername

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Arg instead of @Args

Mismatching argument and parameter names

Forgetting the decorator

The @Args decorator is used to get arguments from the query, and the parameter name should match the argument name.

5fill in blank

hard

Fill all three blanks to create a resolver method that returns a list of items filtered by a minimum value argument.

NestJS

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

@Resolver()
export class SampleResolver {
  @Query(() => [Number])
  getNumbers(@[1]('min') [2]: number) {
    const numbers = [1, 5, 10, 20];
    return numbers.filter(n => n [3] min);
  }
}

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

AArgs

Bmin

C>=

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using '<' instead of '>=' in filter

Mismatching argument and parameter names

Forgetting the @Args decorator

Use @Args to get the 'min' argument, name the parameter 'min', and filter numbers greater than or equal to min.

Practice

1. What is the main purpose of a @Resolver in a NestJS GraphQL application?

easy

A. To handle GraphQL queries and mutations by connecting them to data or actions

B. To define database schemas for the application

C. To manage HTTP routes and middleware

D. To style the frontend components

Solution

1. Step 1: Understand the role of @Resolver

   The @Resolver decorator marks a class that handles GraphQL queries and mutations, linking them to the app's data or business logic.

2. Step 2: Differentiate from other roles

   It does not define database schemas, manage HTTP routes, or style frontend components, which are handled by other parts of the app.

3. Final Answer:

   To handle GraphQL queries and mutations by connecting them to data or actions -> Option A

4. Quick Check:

   Resolver purpose = handle GraphQL queries/mutations [OK]

Hint: Resolvers link GraphQL requests to your app's data/actions [OK]

Common Mistakes:

• Confusing resolvers with database schema definitions
• Thinking resolvers manage HTTP routes
• Assuming resolvers handle frontend styling

2. Which of the following is the correct way to define a GraphQL query resolver method in NestJS?

easy

A. @Controller()
getHello() {
return 'Hello World';
}

B. @Mutation(() => String)
getHello() {
return 'Hello World';
}

C. @Query(() => String)
getHello() {
return 'Hello World';
}

D. @Resolver(() => String)
getHello() {
return 'Hello World';
}

Solution

1. Step 1: Identify the decorator for queries

   In NestJS GraphQL, @Query decorator is used to define query resolver methods.

2. Step 2: Check method syntax

   The method returns a string and is decorated with @Query(() => String), which is correct syntax.

3. Final Answer:

   @Query(() => String) getHello() { return 'Hello World'; } -> Option C

4. Quick Check:

   Query method uses @Query decorator [OK]

Hint: Use @Query for queries, @Mutation for mutations [OK]

Common Mistakes:

• Using @Mutation instead of @Query for queries
• Using @Resolver on methods instead of classes
• Using @Controller which is for REST, not GraphQL

3. Given this resolver code, what will be the output when the hello query is called?

@Resolver()
export class HelloResolver {
  @Query(() => String)
  hello() {
    return 'Hi NestJS';
  }
}

medium

A. Error: Missing return type

B. "Hello World"

C. null

D. "Hi NestJS"

Solution

1. Step 1: Analyze the resolver method

   The hello method is decorated with @Query(() => String) and returns the string 'Hi NestJS'.

2. Step 2: Determine the query output

   When the hello query is called, it returns the string exactly as coded: 'Hi NestJS'.

3. Final Answer:

   "Hi NestJS" -> Option D

4. Quick Check:

   Query returns 'Hi NestJS' string [OK]

Hint: Return value inside @Query method is the output [OK]

Common Mistakes:

• Expecting 'Hello World' instead of 'Hi NestJS'
• Thinking a return type error occurs
• Assuming null is returned by default

4. Identify the error in this NestJS resolver code:

@Resolver()
export class SampleResolver {
  @Query(() => String)
  sample() {
    return 123;
  }
}

medium

A. The method returns a number but the return type is declared as String

B. Missing @Mutation decorator

C. The class is missing @Injectable decorator

D. The method name should be capitalized

Solution

1. Step 1: Check the return type annotation

   The @Query(() => String) decorator declares the return type as String.

2. Step 2: Check the actual return value

   The method returns the number 123, which conflicts with the declared String return type.

3. Final Answer:

   The method returns a number but the return type is declared as String -> Option A

4. Quick Check:

   Return type mismatch causes error [OK]

Hint: Return type must match decorator type [OK]

Common Mistakes:

• Ignoring return type mismatch
• Thinking @Mutation is needed for queries
• Assuming @Injectable is required on resolvers

5. You want to create a resolver that returns a list of users filtered by an optional age argument. Which code snippet correctly implements this in NestJS?

hard

A. @Resolver()
export class UserResolver {
@Mutation(() => [User])
users(@Args('age') age: number) {
return users.filter(u => u.age === age);
}
}

B. @Resolver()
export class UserResolver {
@Query(() => [User])
users(@Args('age', { nullable: true }) age?: number) {
return age ? users.filter(u => u.age === age) : users;
}
}

C. @Resolver()
export class UserResolver {
@Query(() => User)
users(@Args('age') age: number) {
return users.find(u => u.age === age);
}
}

D. @Resolver()
export class UserResolver {
@Query(() => [User])
users() {
return users;
}
}

Solution

1. Step 1: Check the query decorator and return type

   The method uses @Query(() => [User]) which correctly indicates it returns a list of users.

2. Step 2: Verify optional argument handling

   The @Args('age', { nullable: true }) age?: number allows the age argument to be optional, filtering users if provided, or returning all users otherwise.

3. Step 3: Confirm filtering logic

   The method filters the users array by age if age is given, otherwise returns all users, matching the requirement.

4. Final Answer:

   @Resolver() export class UserResolver { @Query(() => [User]) users(@Args('age', { nullable: true }) age?: number) { return age ? users.filter(u => u.age === age) : users; } } -> Option B

5. Quick Check:

   @Resolver() export class UserResolver { @Query(() => [User]) users(@Args('age', { nullable: true }) age?: number) { return age ? users.filter(u => u.age === age) : users; } } [OK]

Hint: Use nullable args for optional filters in @Query [OK]

Common Mistakes:

• Using @Mutation instead of @Query for fetching data
• Returning single User instead of list
• Not making argument optional when needed