Data tab added

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { createSelector, Selector } from '@reduxjs/toolkit';
+import { QueryStatus } from '@reduxjs/toolkit/dist/query';
+import { RtkResourceInfo } from '../types';
+import { TreeView } from './TreeView';
+import { identity } from '../utils/object';
+
+type FormattedQuery =
+  | { status: QueryStatus.fulfilled; data: unknown }
+  | {
+      status: QueryStatus.rejected;
+      error: unknown;
+    }
+  | {
+      status: QueryStatus.uninitialized | QueryStatus.pending;
+    };
+
+const selectFormattedQuery: Selector<RtkResourceInfo, FormattedQuery> =
+  createSelector<
+    [(identity: RtkResourceInfo) => RtkResourceInfo],
+    FormattedQuery
+  >(identity, ({ state }: RtkResourceInfo): FormattedQuery => {
+    if (state.status === 'fulfilled') {
+      return {
+        status: state.status,
+        data: state.data,
+      };
+    }
+
+    if (state.status === 'rejected') {
+      return {
+        status: state.status,
+        error: state.error,
+      };
+    }
+
+    return {
+      status: state.status,
+    };
+  });
+
+export interface QueryPreviewDataProps {
+  resInfo: RtkResourceInfo;
+  isWideLayout: boolean;
+}
+
+function QueryPreviewData({ resInfo, isWideLayout }: QueryPreviewDataProps) {
+  const formattedQuery = selectFormattedQuery(resInfo);
+
+  return <TreeView data={formattedQuery} isWideLayout={isWideLayout} />;
+}
+
+export default QueryPreviewData;

packages/redux-devtools-rtk-query-monitor/src/containers/QueryPreview.tsx

@@ -33,6 +33,9 @@ import {
   QueryPreviewActionsProps,
 } from '../components/QueryPreviewActions';
 import { isTabVisible } from '../utils/tabs';
+import QueryPreviewData, {
+  QueryPreviewDataProps,
+} from '../components/QueryPreviewData';
 
 export interface QueryPreviewProps<S = unknown> {
   readonly selectedTab: QueryPreviewTabs;
@@ -61,6 +64,11 @@ const MappedQueryPreviewTags = mapProps<
   isWideLayout,
 }))(QueryPreviewTags);
 
+const MappedQueryPreviewData = mapProps<
+  QueryPreviewTabProps,
+  QueryPreviewDataProps
+>(({ resInfo, isWideLayout }) => ({ resInfo, isWideLayout }))(QueryPreviewData);
+
 const MappedQueryPreviewInfo = mapProps<
   QueryPreviewTabProps,
   QueryPreviewInfoProps
@@ -93,6 +101,16 @@ const MappedQueryPreviewActions = mapProps<
 const tabs: ReadonlyArray<
   TabOption<QueryPreviewTabs, QueryPreviewTabProps, RtkResourceInfo['type']>
 > = [
+  {
+    label: 'Data',
+    value: QueryPreviewTabs.queryData,
+    component: MappedQueryPreviewData,
+    visible: {
+      query: true,
+      mutation: true,
+      default: true,
+    },
+  },
   {
     label: 'Query',
     value: QueryPreviewTabs.queryinfo,

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

@@ -20,7 +20,7 @@ const initialState: RtkQueryMonitorState = {
       queryFilter: QueryFilters.queryKey,
     },
   },
-  selectedPreviewTab: QueryPreviewTabs.queryinfo,
+  selectedPreviewTab: QueryPreviewTabs.queryData,
   selectedQueryKey: null,
 };
 

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

@@ -262,6 +262,7 @@ export function createInspectorSelectors<S>(): InspectorSelectors<S> {
         [QueryPreviewTabs.querySubscriptions]: Object.keys(subscriptions ?? {})
           .length,
         [QueryPreviewTabs.apiConfig]: 0,
+        [QueryPreviewTabs.queryData]: 0,
         [QueryPreviewTabs.queryinfo]: 0,
         [QueryPreviewTabs.actions]: actions.length,
       };

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

@@ -8,6 +8,7 @@ import type { QueryComparators } from './utils/comparators';
 import type { QueryFilters } from './utils/filters';
 
 export enum QueryPreviewTabs {
+  queryData,
   queryinfo,
   apiConfig,
   querySubscriptions,