mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-07-27 00:19:55 +03:00
feat(rtk-query): add Data tab #1126
This commit is contained in:
parent
9718bae5be
commit
6323df4151
|
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -8,6 +8,7 @@ import type { QueryComparators } from './utils/comparators';
|
|||
import type { QueryFilters } from './utils/filters';
|
||||
|
||||
export enum QueryPreviewTabs {
|
||||
data,
|
||||
queryinfo,
|
||||
apiConfig,
|
||||
querySubscriptions,
|
||||
|
|
Loading…
Reference in New Issue
Block a user