Change the request type within the next-connect middleware

Question

Change the request type within the next-connect middleware

Currently, I am utilizing next-connect in conjunction with next.js and typescript. My aim is to develop a middleware that can append additional fields to the request object and deduce the new request type. The following code snippet showcases this:

// multipart middleware
export type NextApiRequestMultipart = NextApiRequest & {
  files: Files;
  fields: Fields;
};
export function multipart(
  config?: Options
) {
  return async (
    req: NextApiRequest,
    res: NextApiResponse,
    next: NextHandler
  ) => {
    const { files, fields } = await parseForm(req, config);
    (req as NextApiRequestMultipart).files = files;
    (req as NextApiRequestMultipart).fields = fields;
    return next();
  };
}

export router().post(
  multipart({ multiples: false }),
  async (req, res) => {
    // To access properties without statically typing the request
    const { files, fields } = req;
  }
);

Access the StackBlitz repository for the code: here

typescript next.js middleware next-connect

Answer 1

Answer №1

After successfully implementing a sample solution, I wanted to share the code demo with you: modified stack-blitz

Here's a brief description of the approach taken:

In order to achieve this, we utilize a controller router builder that stacks the types additions to the Request object of all middleware.

The ControllerBuilder class allows us to add middleware by stacking them and extracting their types for unified RequestType.

We introduced DecoratedMiddleware as an abstraction over middleware to extract their types and stack them accordingly in ControllerBuilder.

A sample middleware implementation such as AuthMiddleware showcases how additional properties of the request can be stated, ensuring contract adherence.

For usage, we include a sample scenario where multiple middlewares are added in sequence and handled efficiently by the ControllerBuilder.

The Builder pattern is showcased here, indicating immutability and the ability to chain methods for reusability.

Feel free to explore the full details and demo through this link: modified stack-blitz

Answer 2

After successfully implementing a sample solution, I wanted to share the code demo with you: modified stack-blitz

Here's a brief description of the approach taken:

In order to achieve this, we utilize a controller router builder that stacks the types additions to the Request object of all middleware.

The ControllerBuilder class allows us to add middleware by stacking them and extracting their types for unified RequestType.

We introduced DecoratedMiddleware as an abstraction over middleware to extract their types and stack them accordingly in ControllerBuilder.

A sample middleware implementation such as AuthMiddleware showcases how additional properties of the request can be stated, ensuring contract adherence.

For usage, we include a sample scenario where multiple middlewares are added in sequence and handled efficiently by the ControllerBuilder.

The Builder pattern is showcased here, indicating immutability and the ability to chain methods for reusability.

Feel free to explore the full details and demo through this link: modified stack-blitz

Answer 3

Answer №2

In my application, I opted for a clever yet straightforward solution where I needed to make just one change to the types. Utilizing a middleware function, I implemented some logic that ensures a specific property exists on the request object once it passes through the middleware. This enabled me to create the router with the request type containing that additional property within the util. While this approach may not be considered generic, it effectively handles more simplistic scenarios.

import { NextApiRequest, NextApiResponse } from 'next'
import { createRouter } from 'next-connect'
import { getAuth } from 'my-auth'

type NextApiRequestAuthed = NextApiRequest & {
  userId: string
}

export function getAuthRouter<ResponseData = any>() {
  const router = createRouter<NextApiRequestAuthed, NextApiResponse<ResponseData>>()
  router.use(async (req, res, next) => {
    const auth = getAuth(req)
    if (auth.userId == null) {
      return res.status(400)
    }
    req.userId = auth.userId
    await next()
  })
  return router
}

This functionality can then be easily implemented as shown below:

type ResponseData = { data: string }
const router = getAuthRouter<ResponseData>()

router.get(async (req, res) => {
  const { userId } = req /* type of req is NextApiRequestAuthed */
  ...

Answer 4

In my application, I opted for a clever yet straightforward solution where I needed to make just one change to the types. Utilizing a middleware function, I implemented some logic that ensures a specific property exists on the request object once it passes through the middleware. This enabled me to create the router with the request type containing that additional property within the util. While this approach may not be considered generic, it effectively handles more simplistic scenarios.

import { NextApiRequest, NextApiResponse } from 'next'
import { createRouter } from 'next-connect'
import { getAuth } from 'my-auth'

type NextApiRequestAuthed = NextApiRequest & {
  userId: string
}

export function getAuthRouter<ResponseData = any>() {
  const router = createRouter<NextApiRequestAuthed, NextApiResponse<ResponseData>>()
  router.use(async (req, res, next) => {
    const auth = getAuth(req)
    if (auth.userId == null) {
      return res.status(400)
    }
    req.userId = auth.userId
    await next()
  })
  return router
}

This functionality can then be easily implemented as shown below:

type ResponseData = { data: string }
const router = getAuthRouter<ResponseData>()

router.get(async (req, res) => {
  const { userId } = req /* type of req is NextApiRequestAuthed */
  ...

Change the request type within the next-connect middleware

Answer №1

Answer №2

Similar questions

How to disregard the "Declaration not found" error while using VS Code with TypeScript

Difficulty encountered while configuring ngx-lightbox within an Angular module

What is the best way to design an interface in TypeScript that accepts a class as a parameter, rather than an instance of the class?

Using generic arrow functions for curry operations in TypeScript can lead to type errors

Learn how to retrieve images from the web API at 'https://jsonplaceholder.typicode.com/photos' and showcase them on a webpage using Angular10

IntellJ Editor encounters Typescript error

Variations in default export behavior in Webpack when using Typescript versus Javascript

Combining multiple arrays of numbers in Typescript into one aggregate

Reset the input or range value of an ion element whenever it appears on the screen

Utilizing the arr.push() method to replace an existing value within an array with a new object, rather than simply adding a new

Material-UI: Tips for aligning pagination button in the center

The pairing of Transpiller and Internet Explorer 8 is like a dynamic

The element fa-icon is unrecognized within the Reusable Module

Error message: "Window is not defined in Next.js"

Despite being queried, the new content on Hygraph is still not appearing

Angular 10 Reactive Form - Controlling character limit in user input field

Is it necessary to create a wrapper for Angular Material2 components?

Evaluating password hashes against plaintext passwords in FaunaDB

Exploring the world of typescript with the power of ts-check

Unraveling a discriminated union