feat(rtk-query): display status flags in QueryPreviewInfo

packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreviewInfo.tsx

@@ -1,7 +1,13 @@
 import { createSelector, Selector } from '@reduxjs/toolkit';
 import React, { ReactNode, PureComponent } from 'react';
-import { QueryInfo, QueryPreviewTabProps, RtkQueryState } from '../types';
+import {
+  QueryInfo,
+  QueryPreviewTabProps,
+  RtkQueryState,
+  RTKStatusFlags,
+} from '../types';
 import { identity } from '../utils/object';
+import { getQueryStatusFlags } from '../utils/rtk-query';
 import { TreeView } from './TreeView';
 
 type ComputedQueryInfo = {
@@ -11,6 +17,7 @@ type ComputedQueryInfo = {
 
 interface FormattedQuery extends ComputedQueryInfo {
   queryKey: string;
+  statusFlags: RTKStatusFlags;
   query: RtkQueryState;
 }
 
@@ -35,10 +42,13 @@ export class QueryPreviewInfo extends PureComponent<QueryPreviewTabProps> {
         ? new Date(query.fulfilledTimeStamp).toISOString()
         : '-';
 
+      const statusFlags = getQueryStatusFlags(query);
+
       return {
         queryKey,
         startedAt,
         latestFetchAt,
+        statusFlags,
         query: queryInfo.query,
       };
     }

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

@@ -123,3 +123,13 @@ export type QueryPreviewTabOption = TabOption<
   QueryPreviewTabs,
   QueryPreviewTabProps
 >;
+
+/**
+ * It is Omit<RequestStatusFlags, 'status'> & { isFetching: boolean; }
+ */
+export interface RTKStatusFlags {
+  readonly isUninitialized: boolean;
+  readonly isFetching: boolean;
+  readonly isSuccess: boolean;
+  readonly isError: boolean;
+}

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

@@ -1,10 +1,13 @@
 import { isPlainObject } from '@reduxjs/toolkit';
+import { QueryStatus } from '@reduxjs/toolkit/query';
 import {
   QueryInfo,
   RtkQueryInspectorMonitorState,
   RtkQueryApiState,
   RTKQuerySubscribers,
   RtkQueryTag,
+  RTKStatusFlags,
+  RtkQueryState,
 } from '../types';
 import { missingTagId } from '../monitor-config';
 import { Comparator } from './comparators';
@@ -182,3 +185,21 @@ export function getQueryTagsOf(
 
   return output;
 }
+
+/**
+ * Computes query status flags.
+ * @param status
+ * @see https://redux-toolkit.js.org/rtk-query/usage/queries#frequently-used-query-hook-return-values
+ * @see https://github.com/reduxjs/redux-toolkit/blob/b718e01d323d3ab4b913e5d88c9b90aa790bb975/src/query/core/apiState.ts#L63
+ */
+export function getQueryStatusFlags({
+  status,
+  data,
+}: RtkQueryState): RTKStatusFlags {
+  return {
+    isUninitialized: status === QueryStatus.uninitialized,
+    isFetching: status === QueryStatus.pending,
+    isSuccess: status === QueryStatus.fulfilled && !!data,
+    isError: status === QueryStatus.rejected,
+  };
+}