redux-devtools/packages/redux-devtools-rtk-query-monitor
renovate[bot] 0266df5776
chore(deps): update jest monorepo to v29 (major) (#1149)
* chore(deps): update jest monorepo to v29

* Add jest-environment-jsdom

* Replace globals with transform

* Fix nanoid in ui and rtk-query-monitor

* Update serialize snapshots

* Fix nanoid in test-tab

* Fix nanoid and uuid in app

* Fix nanoid and uuid in extension

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Nathan Bierema <nbierema@gmail.com>
2022-10-28 17:15:02 -04:00
..
demo chore(deps): update dependency babel-loader to v9 (#1262) 2022-10-28 15:55:16 +00:00
src chore(deps): update dependency typescript to ~4.8.4 (#1221) 2022-10-14 14:20:40 +00:00
test Feat #1126 Add Data Tab to rtk-query-monitor (#1129) 2022-07-05 13:31:38 +00:00
.eslintignore Feat #1126 Add Data Tab to rtk-query-monitor (#1129) 2022-07-05 13:31:38 +00:00
.eslintrc.js Feat #1126 Add Data Tab to rtk-query-monitor (#1129) 2022-07-05 13:31:38 +00:00
babel.config.esm.json Imprrove ability to tree-shake libraries (#1050) 2022-01-24 02:11:46 +00:00
babel.config.json Imprrove ability to tree-shake libraries (#1050) 2022-01-24 02:11:46 +00:00
CHANGELOG.md Version Packages (#1196) 2022-08-11 23:34:08 +00:00
jest.config.js chore(deps): update jest monorepo to v29 (major) (#1149) 2022-10-28 17:15:02 -04:00
jestResolver.js chore(deps): update jest monorepo to v29 (major) (#1149) 2022-10-28 17:15:02 -04:00
LICENSE.md [feat][monitor] Add rkt-query-inspector-monitor - feat/rtk query monitor (#750) 2021-08-26 15:33:06 -04:00
monitor-demo.gif [feat][monitor] Add rkt-query-inspector-monitor - feat/rtk query monitor (#750) 2021-08-26 15:33:06 -04:00
package.json chore(deps): update jest monorepo to v29 (major) (#1149) 2022-10-28 17:15:02 -04:00
README.md Switch to Nx (#1152) 2022-05-08 14:51:47 -04:00
tsconfig.json Imprrove ability to tree-shake libraries (#1050) 2022-01-24 02:11:46 +00:00
tsconfig.test.json Feat #1126 Add Data Tab to rtk-query-monitor (#1129) 2022-07-05 13:31:38 +00:00

Redux DevTools RTK Query inspector monitor

A monitor that displays RTK query queries and mutations for Redux DevTools.

Created by FaberVitale, inspired by react-query devtools.

Demo

Preview

RTK Query inspector monitor demo

Installation

npm

npm i @redux-devtools/rtk-query-monitor --save

yarn

yarn add @redux-devtools/rtk-query-monitor

Usage

You can use RtkQueryMonitor as the only monitor in your app:

containers/DevTools.js

import React from 'react';
import { createDevTools } from '@redux-devtools/core';
import { RtkQueryrMonitor } from '@redux-devtools/rtk-query-monitor';

export default createDevTools(<RtkQueryrMonitor />);

Then you can render <DevTools> to any place inside app or even into a separate popup window.

Alternatively, you can use it together with DockMonitor to make it dockable.

See also

Features

  • sorts active queries and mutations in ascending or descending order by:
    • fulfilledTimeStamp
    • query key
    • query status
    • endpoint
    • api reducerPath
  • filters active queries and mutations by:
    • fulfilledTimeStamp
    • query key
    • query status
    • endpoint
    • api reducerPath
  • toggleable regular expression search
  • Displays
    • status flags
    • query state
    • tags
    • subscriptions
    • api state
    • api stats
    • actions relevant to the selected query or mutation

Redux DevTools props

Name Description
theme Either a string referring to one of the themes provided by redux-devtools-themes (feel free to contribute!) or a custom object of the same format. Optional. By default, set to 'nicinabox'.
invertTheme Boolean value that will invert the colors of the selected theme. Optional. By default, set to false

Development

Start Demo

pnpm nx start rtk-query-demo

License

MIT