feat(rtk-query): add Data tab #1126

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

@@ -0,0 +1,31 @@
+import React, { ReactNode, PureComponent } from 'react';
+import { RtkResourceInfo } from '../types';
+import { TreeView } from './TreeView';
+
+export interface QueryPreviewDataProps {
+  data: RtkResourceInfo['state']['data'];
+  isWideLayout: boolean;
+}
+export class QueryPreviewData extends PureComponent<QueryPreviewDataProps> {
+  shouldExpandNode = (
+    keyPath: (string | number)[],
+    value: unknown,
+    layer: number
+  ): boolean => {
+    const lastKey = keyPath[keyPath.length - 1];
+
+    return layer <= 1 && lastKey !== 'query' && lastKey !== 'mutation';
+  };
+
+  render(): ReactNode {
+    const { data, isWideLayout } = this.props;
+
+    return (
+      <TreeView
+        data={data}
+        isWideLayout={isWideLayout}
+        shouldExpandNode={this.shouldExpandNode}
+      />
+    );
+  }
+}

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

@@ -33,6 +33,10 @@ import {
   QueryPreviewActionsProps,
 } from '../components/QueryPreviewActions';
 import { isTabVisible } from '../utils/tabs';
+import {
+  QueryPreviewData,
+  QueryPreviewDataProps,
+} from '../components/QueryPreviewData';
 
 export interface QueryPreviewProps<S = unknown> {
   readonly selectedTab: QueryPreviewTabs;
@@ -66,6 +70,14 @@ const MappedQueryPreviewInfo = mapProps<
   QueryPreviewInfoProps
 >(({ resInfo, isWideLayout }) => ({ resInfo, isWideLayout }))(QueryPreviewInfo);
 
+const MappedQueryPreviewData = mapProps<
+  QueryPreviewTabProps,
+  QueryPreviewDataProps
+>(({ resInfo, isWideLayout }) => ({
+  data: resInfo?.state?.data,
+  isWideLayout,
+}))(QueryPreviewData);
+
 const MappedQuerySubscriptipns = mapProps<
   QueryPreviewTabProps,
   QueryPreviewSubscriptionsProps
@@ -93,6 +105,16 @@ const MappedQueryPreviewActions = mapProps<
 const tabs: ReadonlyArray<
   TabOption<QueryPreviewTabs, QueryPreviewTabProps, RtkResourceInfo['type']>
 > = [
+  {
+    label: 'Data',
+    value: QueryPreviewTabs.data,
+    component: MappedQueryPreviewData,
+    visible: {
+      query: true,
+      mutation: true,
+      default: true,
+    },
+  },
   {
     label: 'Query',
     value: QueryPreviewTabs.queryinfo,

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

@@ -258,6 +258,7 @@ export function createInspectorSelectors<S>(): InspectorSelectors<S> {
     ],
     (subscriptions, actions, tags) => {
       return {
+        [QueryPreviewTabs.data]: 0,
         [QueryPreviewTabs.queryTags]: tags.length,
         [QueryPreviewTabs.querySubscriptions]: Object.keys(subscriptions ?? {})
           .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 {
+  data,
   queryinfo,
   apiConfig,
   querySubscriptions,