javascript - Rate limit the number of request made from react client to API

Question

I'm using React and fetch in the client to make requests to the Discogs API. In this API, there's a limit of max 60 request per minute. For managing this Discogs is adding custom values like "remaining requests", "used requests" or "maximum allowed requests", on the response headers but due to cors those headers cannot be readed.

So what I decided to do is to create a request wrapper for this API, from where I could:

• Define a time window (in this case 60 secs).
• Define the max requests allowed to do in this time window.
• Queue the received requests to be processed according to the limits.
• Be able to cancel the requests and pull them out of the queue.

I've managed to do a working example using a singleton Object where the jobs are queued and managed with setTimeout function to delay the call of the request.

This works for me when using simple callbacks, but I don't know how to return a value to the React component and how to implement it with Promises instead of callbacks (fetch).

I also don't know how to cancel the timeout or the fetch request from the react component.

You can check this example, where I've simplified it. I know that maybe that's not the best way to do it or maybe this code is shit. That's why any help or guidance on it would be very much appreciated.

Answer 1

You do not need a setTimout (so you don't need to cancel the setTimeout), and you do not need to cancel the fetch.

To use a value inside a React component, you have to use a React state. React would not know about changes to some outside object (like your singleton object).

You can store the timestamps of the last n requests, and if the first one is older than the time period, you can remove it and make a new request.

const useLimitedRequests = function(){
    const limit = 5;
    const timePeriod = 6 * 1000;
    const [ requests, setRequests ] = useState([]);

    return [
        requests,
        function(){
            const now = Date.now();

            if( requests.length > 0 && (requests[0] < now - timePeriod) ){
                setRequests( requests.slice(1) );
            }

            if( requests.length < limit ){
                setRequests([ ...requests, now ]);
                return now;
            }

            return 0;
        }
    ];
};

export const LimitedRequests = (props)=>{
    const [ requests, addRequest ] = useLimitedRequests();
    return (<>

        <button onClick={ ()=>{
            if( addRequest() > 0 ){
                console.log('ok, do fetch again');
            } else {
                console.log('no no, you have to wait');
            }
        }}>
            fetch again
        </button>

        { requests.map(function( req ){
            return <div key={ req }>{ req }</div>;
        })}
    </>);
};

Answer 2

I wanted to limit the number of requests but also put them on hold until it is allowed by the API, so I though that the best option was to run them sequentially in a FIFO order, with a delay of 1 sec between them so I do not exceed the 60 requests in 1 minute requirement. I was also thinking about let them run some of them concurrently, but in this case the waiting time could be high once the limit is reached.

I created then 2 things:

A 'useDiscogsFetch' hook

• Will send all the API calls as promises to the queue instead of making them directly.
• It will also generate an UUID to identify the request to be able to cancel it if it's needed. For this I used the uuid npm package.

useDiscogsFetch.js

import { useEffect, useRef, useState } from 'react';
import DiscogsQueue from '@/utils/DiscogsQueue';
import { v4 as uuidv4 } from 'uuid';

const useDiscogsFetch = (url, fetcher) => {

    const [data, setData] = useState(null);
    const [error, setError] = useState(null);
    const requestId = useRef();

    const cancel = () => {
        DiscogsQueue.removeRequest(requestId.current);
    }

    useEffect(() => {
        requestId.current = uuidv4();
        const fetchData = async () => {
            try {
                const data = await DiscogsQueue.pushRequest(
                    async () => await fetcher(url),
                    requestId.current
                );
                setData(data)
            } catch (e) {
                setError(e);
            }
        };
        fetchData();
        return () => {
            cancel();
        };
    }, [url, fetcher]);

    return {
        data,
        loading: !data && !error,
        error,
        cancel,
    };

};

export default useDiscogsFetch;

A DiscogsQueue singleton class

• It will enqueue any received request into an Array.
• The requests will be processed one at a time with a timeout of 1 sec between them starting always with the oldest.
• It has also a remove method, that will search for an id and remove the request from the array.

DiscogsQueue.js

class DiscogsQueue {

    constructor() {
        this.queue = [];
        this.MAX_CALLS = 60;
        this.TIME_WINDOW = 1 * 60 * 1000; // min * seg * ms
        this.processing = false;
    }

    pushRequest = (promise, requestId) => {
        return new Promise((resolve, reject) => {
            // Add the promise to the queue.
            this.queue.push({
                requestId,
                promise,
                resolve,
                reject,
            });

            // If the queue is not being processed, we process it.
            if (!this.processing) {
                this.processing = true;
                setTimeout(() => {
                    this.processQueue();
                }, this.TIME_WINDOW / this.MAX_CALLS);
            }
        }
        );
    };

    processQueue = () => {
        const item = this.queue.shift();
        try {
            // Pull first item in the queue and run the request.
            const data = item.promise();
            item.resolve(data);
            if (this.queue.length > 0) {
                this.processing = true;
                setTimeout(() => {
                    this.processQueue();
                }, this.TIME_WINDOW / this.MAX_CALLS);
            } else {
                this.processing = false;
            }
        } catch (e) {
            item.reject(e);
        }
    };

    removeRequest = (requestId) => {
        // We delete the promise from the queue using the given id.
        this.queue.some((item, index) => {
            if (item.requestId === requestId) {
                this.queue.splice(index, 1);
                return true;
            }
        });
    }
}

const instance = new DiscogsQueue();
Object.freeze(DiscogsQueue);

export default instance;

I don't know if it's the best solution but it gets the job done.