DEV Community: indrasisdatta

Using Middleware to Format Express API Response

indrasisdatta — Mon, 20 Nov 2023 09:25:23 +0000

Middleware in Express allows you to customize and enhance the request-response cycle. One powerful application of middleware is to format the response before it is sent back to the client.

We'll explore how to create a middleware function to expose only specific user fields and restrict fields like password, _id etc.

Route

import { Router } from "express";
const router = Router();
router.get("/profile", getUserProfile, UserResponse);

Controller

We are fetching user details based on request POST param userId.

user returns Mongoose User but we don't want to expose all fields in our response. Therefore, we can assign the response json to res.locals so that it can be passed on to the middleware.
Ref:

/* User profile details */
export const getUserProfile = async (
  req: Request,
  res: Response,
  next: NextFunction
) => {
  try {
    const { userId } = req;
    if (!userId ) {
      return res.status(400).json({
        status: 0,
        data: null,
        error: "User not found",
      });
    }
    const user = User.findById(userId);
    // Store data here, which can be accessed in middleware
    res.locals.apiResponse = {
      status: 1,
      data: user,
    };
    next(); // this is important so that it's forwarded to UserResponse middleware
  } catch (error) {
    res.status(500).json({ status: API_STATUS.ERROR, error });
  }
};

Creating the middleware

import { NextFunction, Request, Response } from "express";

export const UserResponse = (
  req: Request,
  res: Response,
  Next: NextFunction
) => {
  try {
    if (res.locals?.apiResponse) {
      if (
        res.locals.apiResponse?.status == 1 &&
        typeof res.locals.apiResponse?.data === "object" &&
        res.locals.apiResponse?.data.constructor.modelName === "User"
      ) {
        const tempUser = res.locals.apiResponse?.data.toObject();
        /* Delete all private fields so that only necessary fields are exposed */
        delete tempUser._id;
        delete tempUser.createdAt;
        delete tempUser.updatedAt;
        delete tempUser.password;
        delete tempUser?.__v;
        return res.status(200).json({
          status: res.locals.apiResponse?.status,
          data: tempUser,
        });
      }
    }
    return res.status(200).json(res.locals);
  } catch (error) {
    res.status(500).json({ status: 0, error });
  }
};

Vanilla JS Debounce using API example

indrasisdatta — Tue, 11 Jul 2023 10:14:42 +0000

Understanding Debounce:

Debouncing refers to a technique used to optimize the execution of a function by delaying its invocation until a certain amount of time has passed. The below example demonstrates the use of debouncing in a products search functionality.

In this search products example, it's supposed to return API data based on search input. To reduce the no. of API calls, searchProducts() is called after a slight delay.

HTML:

<!-- Search product -->
<input id="product" />

<!-- Show search results -->
<div id="search-result">
</div>

JS:

The delayWrapper function is a higher-order function that creates a debounced version of the provided function func. It sets up a timer to delay the execution of func until the specified timeout period has passed.

const delayWrapper = (func, timeout) => {
    let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func(...args)
    }, timeout);
  }
}

The delayedCallvariable is assigned the debounced version of the searchProductsfunction, created using delayWrapper. It has a delay of 500 milliseconds (0.5 seconds).

const delayedCall = delayWrapper(searchProducts, 500);

The searchProducts function uses the provided search query q to fetch data from an API endpoint using fetch. The retrieved data is stored in products variable.

const searchProducts = async (q) => {
  let products = [];
  try {
    console.log(`Search param: ${q}`)
    const response = await fetch(`https://dummyjson.com/products/search?q=${q}`);
    const data = await response.json();
    products = data.products;
  } catch (e) {
    console.error('Error found: ', e);
  }
  renderProducts(products);  
}

The renderProductsfunction takes an array of products as a parameter and generates HTML based on the products. If there are products, it creates an unordered list ul with list items li representing each product's title.

const renderProducts = (products) => {
    let searchHtml = '';
    if (products.length > 0) {
        searchHtml = '<ul>';
        products.map(prod => {
            searchHtml += `<li>${prod.title}</li>`;
        })
        searchHtml += '</ul>';
    }
    console.log('Search html', searchHtml)
    document.getElementById('search-result').innerHTML = searchHtml;
}

Full JS Code:

document.getElementById('product').addEventListener('keyup', (e) => {
    delayedCall(e.target.value);
})


const searchProducts = async (q) => {
    let products = [];
    try {
        console.log(`Search param: ${q}`)
        const response = await fetch(`https://dummyjson.com/products/search?q=${q}`);
        const data = await response.json();
        console.log('API data', data)
        products = data.products;
    } catch (e) {
        console.error('Error found: ', e);
    }
    renderProducts(products);
}

const delayWrapper = (func, timeout) => {
    let timer;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => {
            func(...args)
        }, timeout);
    }
}

const delayedCall = delayWrapper(searchProducts, 1500);

const renderProducts = (products) => {
    let searchHtml = '';
    if (products.length > 0) {
        searchHtml = '<ul>';
        products.map(prod => {
            searchHtml += `<li>${prod.title}</li>`;
        })
        searchHtml += '</ul>';
    }
    console.log('Search html', searchHtml)
    document.getElementById('search-result').innerHTML = searchHtml;
}

React JS - Scenario-based questions

indrasisdatta — Mon, 10 Jul 2023 09:14:22 +0000

In the last quarter of 2022, I appeared for multiple interviews and made a habit of noting down all questions and brushing up the ones which I couldn't answer.
**Note: most are from React but 2-3 are general web development concepts.*

I decided to make a list of the scenario based/practical questions which I came across from my personal experience.

Why does Cross-Origin Resource Sharing (CORS) error occur? How to handle it from frontend as well as backend?
How to globally attach a JWT token to every request header? Without modifying each and every API function?
When trying to close browser, how can we show a custom popup "Are you sure? You have unsaved changes."?
How can we prevent a function from being called too many times in a row? Eg. search input change firing API call
If same state value is updated, does component re-render? Does child components re-render? Assuming there's no memo code.
In Redux, can we have multiple states or a single state?
Does React.memo do deep **or **shallow **comparison? How to add **custom comparison function?
How do you optimize a webpage that's using multiple images? Eg. list shows 250 countries with flag images
How to manage env based versions of React project? Eg. different API endpoints, builds for Dev, QA, Prod.
How to run concurrent API calls? Eg. on button click, 5 independent API calls are made. When all 5 API responses are received, only then show success message to user.
Component *has a loop which renders multiple * components. Clicking each child component makes a function call to parent component's display() function. How can we optimize performance?
Using useState, how can we initialize value from a function using expensive calculation?
Eg.

function expensive() {
 // expensive calculation logic
 return result;
} 
const [myState, setMyState] = useState( // use expensive function's return value here )