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,
|
QueryPreviewActionsProps,
|
||||||
} from '../components/QueryPreviewActions';
|
} from '../components/QueryPreviewActions';
|
||||||
import { isTabVisible } from '../utils/tabs';
|
import { isTabVisible } from '../utils/tabs';
|
||||||
|
import {
|
||||||
|
QueryPreviewData,
|
||||||
|
QueryPreviewDataProps,
|
||||||
|
} from '../components/QueryPreviewData';
|
||||||
|
|
||||||
export interface QueryPreviewProps<S = unknown> {
|
export interface QueryPreviewProps<S = unknown> {
|
||||||
readonly selectedTab: QueryPreviewTabs;
|
readonly selectedTab: QueryPreviewTabs;
|
||||||
|
@ -66,6 +70,14 @@ const MappedQueryPreviewInfo = mapProps<
|
||||||
QueryPreviewInfoProps
|
QueryPreviewInfoProps
|
||||||
>(({ resInfo, isWideLayout }) => ({ resInfo, isWideLayout }))(QueryPreviewInfo);
|
>(({ resInfo, isWideLayout }) => ({ resInfo, isWideLayout }))(QueryPreviewInfo);
|
||||||
|
|
||||||
|
const MappedQueryPreviewData = mapProps<
|
||||||
|
QueryPreviewTabProps,
|
||||||
|
QueryPreviewDataProps
|
||||||
|
>(({ resInfo, isWideLayout }) => ({
|
||||||
|
data: resInfo?.state?.data,
|
||||||
|
isWideLayout,
|
||||||
|
}))(QueryPreviewData);
|
||||||
|
|
||||||
const MappedQuerySubscriptipns = mapProps<
|
const MappedQuerySubscriptipns = mapProps<
|
||||||
QueryPreviewTabProps,
|
QueryPreviewTabProps,
|
||||||
QueryPreviewSubscriptionsProps
|
QueryPreviewSubscriptionsProps
|
||||||
|
@ -93,6 +105,16 @@ const MappedQueryPreviewActions = mapProps<
|
||||||
const tabs: ReadonlyArray<
|
const tabs: ReadonlyArray<
|
||||||
TabOption<QueryPreviewTabs, QueryPreviewTabProps, RtkResourceInfo['type']>
|
TabOption<QueryPreviewTabs, QueryPreviewTabProps, RtkResourceInfo['type']>
|
||||||
> = [
|
> = [
|
||||||
|
{
|
||||||
|
label: 'Data',
|
||||||
|
value: QueryPreviewTabs.data,
|
||||||
|
component: MappedQueryPreviewData,
|
||||||
|
visible: {
|
||||||
|
query: true,
|
||||||
|
mutation: true,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: 'Query',
|
label: 'Query',
|
||||||
value: QueryPreviewTabs.queryinfo,
|
value: QueryPreviewTabs.queryinfo,
|
||||||
|
|
|
@ -258,6 +258,7 @@ export function createInspectorSelectors<S>(): InspectorSelectors<S> {
|
||||||
],
|
],
|
||||||
(subscriptions, actions, tags) => {
|
(subscriptions, actions, tags) => {
|
||||||
return {
|
return {
|
||||||
|
[QueryPreviewTabs.data]: 0,
|
||||||
[QueryPreviewTabs.queryTags]: tags.length,
|
[QueryPreviewTabs.queryTags]: tags.length,
|
||||||
[QueryPreviewTabs.querySubscriptions]: Object.keys(subscriptions ?? {})
|
[QueryPreviewTabs.querySubscriptions]: Object.keys(subscriptions ?? {})
|
||||||
.length,
|
.length,
|
||||||
|
|
|
@ -8,6 +8,7 @@ import type { QueryComparators } from './utils/comparators';
|
||||||
import type { QueryFilters } from './utils/filters';
|
import type { QueryFilters } from './utils/filters';
|
||||||
|
|
||||||
export enum QueryPreviewTabs {
|
export enum QueryPreviewTabs {
|
||||||
|
data,
|
||||||
queryinfo,
|
queryinfo,
|
||||||
apiConfig,
|
apiConfig,
|
||||||
querySubscriptions,
|
querySubscriptions,
|
||||||
|
|
Loading…
Reference in New Issue
Block a user