feat(rtk-query): add slowest and fastest in timings section

packages/redux-devtools-rtk-query-monitor/src/types.ts

@@ -112,6 +112,8 @@ export type QueryTally = {
 export interface QueryTimings {
   readonly oldestFetch: { key: string; at: string } | null;
   readonly latestFetch: { key: string; at: string } | null;
+  readonly slowest: { key: string; duration: string } | null;
+  readonly fastest: { key: string; duration: string } | null;
 }
 
 export interface ApiTimings {

packages/redux-devtools-rtk-query-monitor/src/utils/rtk-query.ts

@@ -200,12 +200,18 @@ function computeQueryApiTimings(
     | RtkQueryApiState['queries']
     | RtkQueryApiState['mutations']
 ): QueryTimings {
-  let latestFetch = null;
+  type SpeedReport = { key: string | null; at: string | number };
-  let latestFetchedQueryKey: string | null = null;
+  type DurationReport = { key: string | null; duration: string | number };
-  let latestFetchedQueryTiming = -1;
+  let latestFetch: null | SpeedReport = { key: null, at: -1 };
-  let oldestFetch = null;
+  let oldestFetch: null | SpeedReport = {
-  let oldestFetchedQueryKey: string | null = null;
+    key: null,
-  let oldestFetchedQueryTiming = Number.MAX_SAFE_INTEGER;
+    at: Number.MAX_SAFE_INTEGER,
+  };
+  let slowest: null | DurationReport = { key: null, duration: -1 };
+  let fastest: null | DurationReport = {
+    key: null,
+    duration: Number.MAX_SAFE_INTEGER,
+  };
 
   const queryKeys = Object.keys(queriesOrMutations);
 
@@ -214,38 +220,68 @@ function computeQueryApiTimings(
     const query = queriesOrMutations[queryKey];
 
     const fulfilledTimeStamp = query?.fulfilledTimeStamp;
+    const startedTimeStamp = query?.startedTimeStamp;
 
     if (typeof fulfilledTimeStamp === 'number') {
-      if (fulfilledTimeStamp > latestFetchedQueryTiming) {
+      if (fulfilledTimeStamp > latestFetch.at) {
-        latestFetchedQueryKey = queryKey;
+        latestFetch.key = queryKey;
-        latestFetchedQueryTiming = fulfilledTimeStamp;
+        latestFetch.at = fulfilledTimeStamp;
       }
 
-      if (fulfilledTimeStamp < oldestFetchedQueryTiming) {
+      if (fulfilledTimeStamp < oldestFetch.at) {
-        oldestFetchedQueryKey = queryKey;
+        oldestFetch.key = queryKey;
-        oldestFetchedQueryTiming = fulfilledTimeStamp;
+        oldestFetch.at = fulfilledTimeStamp;
+      }
+
+      if (
+        typeof startedTimeStamp === 'number' &&
+        startedTimeStamp <= fulfilledTimeStamp
+      ) {
+        const pendingDuration = fulfilledTimeStamp - startedTimeStamp;
+
+        if (pendingDuration > slowest.duration) {
+          slowest.key = queryKey;
+          slowest.duration = pendingDuration;
+        }
+
+        if (pendingDuration < fastest.duration) {
+          fastest.key = queryKey;
+          fastest.duration = pendingDuration;
+        }
       }
     }
   }
 
-  if (latestFetchedQueryKey) {
+  if (latestFetch.key !== null) {
-    latestFetch = {
+    latestFetch.at = new Date(latestFetch.at).toISOString();
-      key: latestFetchedQueryKey,
+  } else {
-      at: new Date(latestFetchedQueryTiming).toISOString(),
+    latestFetch = null;
-    };
   }
 
-  if (oldestFetchedQueryKey) {
+  if (oldestFetch.key !== null) {
-    oldestFetch = {
+    oldestFetch.at = new Date(oldestFetch.at).toISOString();
-      key: oldestFetchedQueryKey,
+  } else {
-      at: new Date(oldestFetchedQueryTiming).toISOString(),
+    oldestFetch = null;
-    };
+  }
+
+  if (slowest.key !== null) {
+    slowest.duration = `${((slowest.duration as number) / 1_000).toFixed(3)}s`;
+  } else {
+    slowest = null;
+  }
+
+  if (fastest.key !== null) {
+    fastest.duration = `${((fastest.duration as number) / 1_000).toFixed(3)}s`;
+  } else {
+    fastest = null;
   }
 
   return {
     latestFetch,
     oldestFetch,
-  };
+    slowest,
+    fastest,
+  } as QueryTimings;
 }
 
 function computeApiTimings(api: RtkQueryApiState): ApiTimings {