Response transformation in NestJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a response transformation using an interceptor.

NestJS

import { Injectable, NestInterceptor, ExecutionContext, CallHandler } from '@nestjs/common';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';

@Injectable()
export class TransformInterceptor implements NestInterceptor {
  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
    return next.handle().pipe([1](data => ({ data }))); 
  }
}

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

Amap

Bfilter

Ctap

DcatchError

Attempts:

3 left

💡 Hint

Common Mistakes

Using operators like filter or tap which do not transform the data as needed.

Forgetting to return the transformed observable.

The map operator transforms the response data before sending it to the client.

2fill in blank

medium

Complete the code to apply the TransformInterceptor globally in the main bootstrap function.

NestJS

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { TransformInterceptor } from './transform.interceptor';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.useGlobalInterceptors(new [1]());
  await app.listen(3000);
}
bootstrap();

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

ALoggerInterceptor

BTransformInterceptor

CTimeoutInterceptor

DCacheInterceptor

Attempts:

3 left

💡 Hint

Common Mistakes

Using an unrelated interceptor class.

Not creating a new instance with new.

To apply response transformation globally, you create an instance of TransformInterceptor and pass it to useGlobalInterceptors.

3fill in blank

hard

Fix the error in the interceptor to correctly transform the response by wrapping it in an object with a 'result' key.

NestJS

import { Injectable, NestInterceptor, ExecutionContext, CallHandler } from '@nestjs/common';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';

@Injectable()
export class ResponseInterceptor implements NestInterceptor {
  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
    return next.handle().pipe([1](data => ({ result: data }))); 
  }
}

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

Amap

Bfilter

Ctap

DswitchMap

Attempts:

3 left

💡 Hint

Common Mistakes

Using tap which does not change the data.

Using filter which filters values instead of transforming.

The map operator is used to transform the response data by wrapping it inside an object with a result key.

4fill in blank

hard

Fill both blanks to create a custom interceptor that adds a timestamp to the response data.

NestJS

import { Injectable, NestInterceptor, ExecutionContext, CallHandler } from '@nestjs/common';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';

@Injectable()
export class TimestampInterceptor implements NestInterceptor {
  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
    return next.handle().pipe(
      [1](data => ({ ...data, [2]: Date.now() }))
    );
  }
}

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

Amap

Btimestamp

Ctime

Ddate

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect property names like 'time' or 'date'.

Using operators other than map for transformation.

The map operator transforms the response by adding a timestamp property with the current time.

5fill in blank

hard

Fill all three blanks to create an interceptor that transforms the response by converting the username to uppercase and adding a status.

NestJS

import { Injectable, NestInterceptor, ExecutionContext, CallHandler } from '@nestjs/common';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';

@Injectable()
export class UserTransformInterceptor implements NestInterceptor {
  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
    return next.handle().pipe(
      [1](user => ({
        username: user.[2](),
        status: '[3]'
      }))
    );
  }
}

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

Amap

BtoUpperCase

Cactive

DtoLowerCase

Attempts:

3 left

💡 Hint

Common Mistakes

Using toLowerCase instead of toUpperCase.

Forgetting to wrap the transformed object in parentheses.

The map operator transforms the user object by converting the username to uppercase using toUpperCase() and adding a status of 'active'.

Practice

1. What is the main purpose of response transformation in NestJS?

easy

A. To modify data before sending it to the client

B. To handle database connections

C. To manage user authentication

D. To log server errors

Solution

1. Step 1: Understand response transformation concept

   Response transformation means changing the data before it is sent to the user.

2. Step 2: Identify the correct purpose in NestJS context

   In NestJS, response transformation is used to modify or format the response data.

3. Final Answer:

   To modify data before sending it to the client -> Option A

4. Quick Check:

   Response transformation = modify data before sending [OK]

Hint: Response transformation changes output data before sending [OK]

Common Mistakes:

• Confusing response transformation with authentication
• Thinking it manages database connections
• Assuming it logs errors

2. Which of the following is the correct way to apply a response transformation interceptor in NestJS?

easy

A. controller.transform(TransformInterceptor)

B. @UseInterceptors(new TransformInterceptor())

C. app.use(TransformInterceptor)

D. @Injectable(TransformInterceptor)

Solution

1. Step 1: Recall NestJS interceptor usage

   Interceptors are applied using the @UseInterceptors decorator on controllers or methods.

2. Step 2: Match correct syntax

   The correct syntax is @UseInterceptors(new InterceptorClass()).

3. Final Answer:

   @UseInterceptors(new TransformInterceptor()) -> Option B

4. Quick Check:

   Use @UseInterceptors with new instance [OK]

Hint: Use @UseInterceptors with new interceptor instance [OK]

Common Mistakes:

• Using @Injectable instead of @UseInterceptors
• Calling interceptor as a method on controller
• Trying to use app.use for interceptors

3. Given this interceptor code snippet, what will be the transformed response?

intercept(context, next) {
  return next.handle().pipe(map(data => ({ result: data }))); 
}

medium

A. { data: originalData }

B. originalData

C. { result: originalData }

D. An error will occur

Solution

1. Step 1: Understand the interceptor's map function

   The map operator wraps the original data inside an object with key 'result'.

2. Step 2: Predict the transformed output

   The response will be an object: { result: originalData }.

3. Final Answer:

   { result: originalData } -> Option C

4. Quick Check:

   map wraps data in { result: ... } [OK]

Hint: map operator wraps data in new object key [OK]

Common Mistakes:

• Assuming original data is unchanged
• Confusing key name as 'data' instead of 'result'
• Expecting an error from this code

4. What is wrong with this interceptor code that tries to transform the response?

intercept(context, next) {
  next.handle().pipe(map(data => data.trim()));
}

medium

A. next.handle() should not be called

B. map operator cannot be used inside intercept

C. trim() is not a valid method on data

D. Missing return statement for the observable

Solution

1. Step 1: Check interceptor return value

   Interceptors must return the observable from next.handle().pipe(...).

2. Step 2: Identify missing return

   The code calls next.handle().pipe(...) but does not return it, so the response is undefined.

3. Final Answer:

   Missing return statement for the observable -> Option D

4. Quick Check:

   Always return next.handle().pipe(...) [OK]

Hint: Always return the observable from intercept method [OK]

Common Mistakes:

• Forgetting to return the observable
• Assuming map cannot be used in intercept
• Misusing trim() on non-string data

5. You want to hide the user's password field from all API responses using response transformation. Which approach is best in NestJS?

hard

A. Create an interceptor that maps the response and deletes the password field

B. Modify the database schema to exclude password

C. Use a middleware to filter out password from requests

D. Send password as null in the controller methods

Solution

1. Step 1: Understand response transformation goal

   We want to remove sensitive info from outgoing responses, not database or requests.

2. Step 2: Choose best NestJS method

   Interceptors can transform responses globally, ideal for removing password fields before sending.

3. Step 3: Evaluate other options

   Modifying DB schema or middleware won't affect response data; setting password null in controllers is repetitive.

4. Final Answer:

   Create an interceptor that maps the response and deletes the password field -> Option A

5. Quick Check:

   Use interceptor to hide sensitive response data [OK]

Hint: Use interceptor to remove sensitive fields from responses [OK]

Common Mistakes:

• Trying to filter password in middleware (affects requests)
• Changing database schema instead of response
• Manually nulling password in every controller