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'.