Rate limit the outgoing requests from the app (#7254)

* Rate limit the outgoing requests from the app

Fixes #7147

* Limit to 5/500 instead of 10/1000

app/package.json

@@ -88,5 +88,8 @@
 		"vue-i18n": "9.1.7",
 		"vue-router": "4.0.10",
 		"vuedraggable": "4.0.3"
+	},
+	"dependencies": {
+		"p-queue": "^6.6.2"
 	}
 }

app/src/api.ts

@@ -3,6 +3,7 @@ import { useRequestsStore } from '@/stores/';
 import { getRootPath } from '@/utils/get-root-path';
 import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
 import { addQueryToPath } from './utils/add-query-to-path';
+import PQueue from 'p-queue';
 
 const api = axios.create({
 	baseURL: getRootPath(),
@@ -12,6 +13,8 @@ const api = axios.create({
 	},
 });
 
+const queue = new PQueue({ concurrency: 5, intervalCap: 5, interval: 500, carryoverConcurrencyCount: true });
+
 interface RequestConfig extends AxiosRequestConfig {
 	id: string;
 }
@@ -24,7 +27,7 @@ export interface RequestError extends AxiosError {
 	response: Response;
 }
 
-export const onRequest = (config: AxiosRequestConfig): RequestConfig => {
+export const onRequest = (config: AxiosRequestConfig): Promise<RequestConfig> => {
 	const requestsStore = useRequestsStore();
 	const id = requestsStore.startRequest();
 
@@ -33,7 +36,9 @@ export const onRequest = (config: AxiosRequestConfig): RequestConfig => {
 		...config,
 	};
 
-	return requestConfig;
+	return new Promise((resolve) => {
+		queue.add(() => resolve(requestConfig));
+	});
 };
 
 export const onResponse = (response: AxiosResponse | Response): AxiosResponse | Response => {

package-lock.json

@@ -314,6 +314,9 @@
 		"app": {
 			"name": "@directus/app",
 			"version": "9.0.0-rc.88",
+			"dependencies": {
+				"p-queue": "^6.6.2"
+			},
 			"devDependencies": {
 				"@directus/docs": "9.0.0-rc.88",
 				"@directus/extension-sdk": "9.0.0-rc.88",
@@ -59827,6 +59830,7 @@
 				"mime": "2.5.2",
 				"mitt": "3.0.0",
 				"nanoid": "3.1.23",
+				"p-queue": "*",
 				"pinia": "2.0.0-beta.5",
 				"prettier": "2.3.2",
 				"pretty-ms": "7.0.1",