Throttle API calls

Aditya Padhi — Sun, 25 Apr 2021 09:58:32 +0000

Sometimes the server may have a limitation to respond to the number of API calls at the same moment. Making 100s of concurrent calls to a single server will have an impact & it may be assumed as DOS attack.

This can be handled if we could throttle the API calls during implementation.

While throttling the API calls can still be handled from the developer's perspective, however proper checks needs to be done at load balancer or proxy to avoid any type of DOS attacks.

While there are a lot of fantastic npm modules available, I thought of doing a short POC and write a simple one for my own understanding using some generators.

Let me know in the comments if this is the proper approach :)

const fetch = require("isomorphic-fetch");
const totalPromiseLength = 5;
const requestMethod = url => () => fetch(url).then(response => response.json());
let promiseArray = [...new Array(totalPromiseLength).keys()].map(index =>
  requestMethod("https://jsonplaceholder.typicode.com/todos/" + (index + 1))
);
function* chunks(arr, limit) {
  for (let i = 0; i < Math.ceil(arr.length / limit); ++i) {
      console.log("requested")
    yield [...arr].slice(i * limit, i * limit + limit);
  }
}

new Promise(async resolve => {
  let generated = chunks(promiseArray, 2);
  let result = [];
  for (let bla of generated) {
    await Promise.all(bla.map(param => param())).then(response => {
        console.log('resolved')
      result = [...result, ...response];
      if (result.length === promiseArray.length) {
        resolve(result);
      }
    });
  }
}).then(response => {
  console.log(response);
});

React Route Guards with Unit Testing

Aditya Padhi — Mon, 30 Dec 2019 13:07:07 +0000

In this blog post I would like to share my approach to create manageable Route Guards as well as to write unit test cases for that specific implementation.

We will be testing Route Guards & the way it behaves based on the user roles.

We will be using jest & @testing-library/react for writing unit test cases.

I will also share a cleaner approach to test a component that returns redirect URL which will be helpful to test in a lot of scenarios like failed login testing, session timeout testing etc.

While creating any web application there is a scenario where we need to add guards to route or prevent unauthorized access to certain URLs.

There are many ways to do it, however one of the cleaner ways is to handle it on the client side.

Let us take a hypothetical case where the roles are “viewer, publisher, admin”.

The viewer will not have any access to the admin pages while the later will have access to all the pages.

In a typical scenario when the user successfully logs into the application the server sends some information like this:-

{
  token: 'qwqwqw',
  fullName: 'qwq ee',
  role: 'viewer'
}

We can utilize the above response & create a simple route guard.

Step 1 could be to store the role in localStorage in an encrypted manner using an awesome npm module pako.

However in this article I am simply using local Storage.

Step 2 could be to create a route guard.

import React from "react";
import { Redirect } from "react-router";
function RouteGuard(props) {
  let userRole = localStorage.getItem("userRole") || "viewer";
  if (props.allowedRoles.indexOf(userRole) > -1) {
     return props.render({ userRole: userRole });
  }
  return <Redirect to="/unauthorized" />;
}
export default RouteGuard;

In this simple functional module we created a logic to check for the role & return the component passed to the render props of the RouteGuard component. So basically we are using render props property of React.

So in index.js we can import this component & use it like:-

<Route
 path="/welcome"
 render={props => (
   <RouteGuard
    allowedRoles={["admin", "publisher", "viewer"]}
    render={guardProps => (
     <GenericComponent greet="user" {...guardProps} {...props} />
   )}/>
 )}/>

The GenericComponent is a simple hello world component and nothing else. This RouteGuard works perfectly with Lazy loading as we are just using the render props property of react-router-dom.

The advantage of this approach is we have full access to router props & routeGuard props.

Testing is also pretty clean for these Route Guards. As it is not possible to see the test tab in the embedded version of CodeSandbox you can click on this https://codesandbox.io/s/objective-jennings-hlzf0?from-embed & then click on Open Sandbox on the bottom right corner to get a clearer picture.

To check for the test cases click on the Test tab. (I know CodeSandbox is an awesome tool & everyone knows it :) )

I have added comments in test cases & code for more clarity.

Let me know your views in comments :)

DEV Community: Aditya Padhi

Throttle API calls

React Route Guards with Unit Testing