DEV Community: Osarugue Enehizena

Understanding NestJS Middleware

Osarugue Enehizena — Mon, 22 Jul 2024 02:24:32 +0000

Middleware in NestJS is a powerful tool that allows you to execute functions before reaching the route handlers. Middleware functions have access to the request and response objects and can perform tasks such as authentication, logging, and validation. Here's a detailed tutorial based on the provided timestamp.

Step-by-Step Guide

1. Understanding Middleware:

Middleware functions are executed before the route handler.
Common uses include checking authentication tokens, logging requests, and modifying request/response objects.
Middleware has access to request, response, and next objects.

2. Setting Up Middleware:

Middleware can be created manually or using the NestJS CLI.

Example using CLI:

nest generate middleware users/middlewares/example

This generates the necessary middleware files.

3. Middleware Implementation:

Open the generated middleware file (e.g., example.middleware.ts).

Modify the class to include necessary logic:

import { Injectable, NestMiddleware } from '@nestjs/common';
import { Request, Response, NextFunction } from 'express';

@Injectable()
export class ExampleMiddleware implements NestMiddleware {
  use(req: Request, res: Response, next: NextFunction) {
    console.log('ExampleMiddleware');
    next();
  }
}

4. Registering Middleware:

Open the module where you want to apply the middleware (e.g., users.module.ts).

Implement the NestModule interface and configure the middleware:

import { Module, NestModule, MiddlewareConsumer } from '@nestjs/common';
import { ExampleMiddleware } from './middlewares/example.middleware';

@Module({
  // ... other module metadata
})
export class UsersModule implements NestModule {
  configure(consumer: MiddlewareConsumer) {
    consumer
      .apply(ExampleMiddleware)
      .forRoutes('users');
  }
}

The middleware will be applied to all routes starting with users.

5. Adding More Middleware:

Create another middleware using CLI or manually:

nest generate middleware users/middlewares/another

Modify the class (e.g., another.middleware.ts):

import { Injectable, NestMiddleware } from '@nestjs/common';
import { Request, Response, NextFunction } from 'express';

@Injectable()
export class AnotherMiddleware implements NestMiddleware {
  use(req: Request, res: Response, next: NextFunction) {
    console.log('AnotherMiddleware');
    next();
  }
}

import { AnotherMiddleware } from './middlewares/another.middleware';

@Module({
  // ... other module metadata
})
export class UsersModule implements NestModule {
  configure(consumer: MiddlewareConsumer) {
    consumer
      .apply(ExampleMiddleware, AnotherMiddleware)
      .forRoutes('users');
  }
}

6. Conditional Middleware Execution:

Apply middleware to specific routes and methods:

//users.module.ts
import { RequestMethod } from '@nestjs/common';

@Module({
  // ... other module metadata
})
export class UsersModule implements NestModule {
  configure(consumer: MiddlewareConsumer) {
    consumer
      .apply(ExampleMiddleware)
      .forRoutes({ path: 'users', method: RequestMethod.GET });

    consumer
      .apply(AnotherMiddleware)
      .forRoutes({ path: 'users/:id', method: RequestMethod.POST });
  }
}

7. Adding Logic to Middleware:

Middleware can perform tasks like checking headers or throwing exceptions:

//example.middleware.ts
import { HttpException, HttpStatus } from '@nestjs/common';

@Injectable()
export class ExampleMiddleware implements NestMiddleware {
  use(req: Request, res: Response, next: NextFunction) {
    const authHeader = req.headers['authorization'];
    if (!authHeader) {
      throw new HttpException('No authorization token', HttpStatus.FORBIDDEN);
    }
    if (authHeader !== 'correct_token') {
      throw new HttpException('Invalid authorization token', HttpStatus.FORBIDDEN);
    }
    next();
  }
}

8. Testing Middleware:

Ensure your middleware works by making requests to the routes and checking logs or responses.

9. Documentation and Further Learning:

Refer to the NestJS documentation for more details on middleware, including advanced topics and best practices.

This guide should help you get started with middleware in NestJS, providing a foundation for implementing various middleware functions to enhance your application.

Understanding Props, Parent, and Child Components in React Native using TypeScript.

Osarugue Enehizena — Mon, 24 Jun 2024 01:17:02 +0000

In React Native, we often need to pass data from one component to another. This is where the concept of props (short for properties) comes into play. Props are a way to pass data from a parent component to a child component.

Let’s start by creating a simple app that displays a list of posts.

Step 1: Set up a new React Native project with TypeScript

npx expo-cli init my-app --template expo-template-blank-typescript

This command will create a new React Native project with TypeScript support using the Expo CLI.

Step 2: Create a Parent Component

Create a new file called App.tsx in the root directory of your project and add the following code:

import React from 'react';
import { View } from 'react-native';
import FeedPost from './FeedPost';

// Define the type for the data object
type DataObject = {
  id: number;
  title: string;
  content: string;
};

const App = () => {
// Define the data array
  const data: DataObject[] = [
    { id: 1, title: 'Post 1', content: 'This is the first post.' },
    { id: 2, title: 'Post 2', content: 'This is the second post.' },
// ... more data objects
  ];

  return (
    <View>
      {data.map(item => (
        <FeedPost
          key={item.id}
          id={item.id}
          title={item.title}
          content={item.content}
        />
      ))}
    </View>
  );
};

export default App;

In this example, we define a DataObject type that represents the structure of each data object. We then create an array data of DataObject types, which holds our sample data.

The App component maps over the data array and renders a FeedPost component for each item, passing down the id, title, and content properties as props.

Step 3: Create a Child Component

Create a new file called FeedPost.tsx in the same directory and add the following code:

import React from 'react';
import { View, Text } from 'react-native';

// Define the prop types for the FeedPost component
type FeedPostProps = {
  id: number;
  title: string;
  content: string;
};

const FeedPost = ({ id, title, content }: FeedPostProps) => {
  return (
    <View>
      <Text>{title}</Text>
      <Text>{content}</Text>
    </View>
  );
};

export default FeedPost;

In this file, we define a FeedPostProps type that represents the props that the FeedPost component expects to receive from its parent component. The FeedPost component receives these props as parameters and renders the title and content properties.

Step 4: Run the App

Now, you can run the app using the Expo CLI:

npm start

This will start the Expo development server and open the app in a simulator or on your physical device.

Explanation

In this tutorial, we have created a parent component App that holds the data as an array of objects. Each object represents a post with an id, title, and content property.

The App component maps over this data array and renders a FeedPost component for each item, passing down the id, title, and content properties as props.

The FeedPost component is a child component that receives these props and renders the title and content properties.

By using TypeScript, we define the types for the data objects and the props, which helps catch potential type errors during development and improves code maintainability.

In this example, we pass down the id prop to the FeedPost component, even though it's not used within the component itself. This demonstrates that you should pass down only the necessary props to the child component, but in some cases, you might need to pass additional data for identification, updating, or other purposes.

This tutorial covers the basics of how to create a parent component that holds data, pass that data as props to a child component, and how to define and use types in TypeScript to ensure type safety. You can build upon this foundation to create more complex applications and component hierarchies in React Native.