redux-devtools/packages/redux-devtools-rtk-query-monitor/README.md

102 lines
3.7 KiB
Markdown
Raw Normal View History

[feat][monitor] Add rkt-query-inspector-monitor - feat/rtk query monitor (#750) * chore: copy rtk-query example from toolkit * feat(rtk-query): complete initial setup of rtk-query * feat: complete inspector layout and add initial JSONTree setup * fix: unintentional removal of tsconfig * feat(search): add search logic and refactor monitor state shape * fix: inverted monitor theme inside devtoop-app Othetr changes: * simplify monitor integration * fix: rtk monitor reducer not working in app * refactor(rtk-query): simplify theme config * feat(rtk-query-monitor): add query preview tabs * fix: wip * refactor(examples): add rtk-query-polling to workspace Other changes: * docs(rtk-query-polling): add README.md * chore(rtk-query-inspector): add demo to monorepo Other changes: chore: increase isWideScreen polling interval to 300 refactor: add subscription as root node in QueryPreviewSubscriptions * feat(rtk-query): add multiple filter options * chore(rtk-queery): rename demo build script and add SKIP_PREFLIGHT_CHECK=true * feat(rtk-query): display status flags in QueryPreviewInfo * chore(rtk-query): update typescript versions in rkt-inspector-monitor & its demo * docs(rtk-query): add proper README Other changes: * fix examples/rtk-query-poilling * docs(rtk-query): improve rtk-query-inspector-monitor demo gif * docs(rtk-query): clean up demo * fix(rtk-query): clear button not updating redux state * docs(rtk-query): add link to rtk-query-inspector-monitor demo site * chore(rtk-query): run prettier after prettier upgrade (55e2284) * docs(rtk.query): clean up readme add features, todo and development section * docs(rtk-query): fix link href * chore(rtk-query): clean up rtk-query-imspector-monitor-demo and add post example * feat(rtk-query): add counters on tags & subs tab buttons * fix(rtk-query): layering issue between queryPreview tabList and select Other changes: * clean up demo styles * run prettier * fix: revert accidental changes packages/redux-devtools-serialize/tsconfig.json * chore: change QueryComparators.fulfilledTimeStamp label * feat(rtk-query): display api stats * refactor: remove rtk-query-polling example from monorepo * chore: regenerate lock file and add @types/react as monorepo devDep * chore: display apiState Other changes: * fix close button overflow * minor responsive style tweaks * display reducerPath in query tab * fix(rtk-query): resolve CI errors - fix(prettier:check): unformatted file - fix(lint:all): fix accidentallly removed .eslintignore * chore(rtk-query): rename package to '@redux-devtools/rtk-query-monitor' * fix(rtk-query): lint:all error https://github.com/reduxjs/redux-devtools/runs/2869729048?check_suite_focus=true * feat(rtk-query): add fallback message if there are no rtk-query apis * refactor(rtk-query): move Inspector & Monitor to containers clean up typings Other changes: * chore: improved type coverage * chore: do not lint packages/redux-devtools-rtk-query-monitor/demo folder * refactor: put sort order buttons inside a component * chore: hopefully resolve mockServiceWorker formatting issues * fix(rtk-query): incorrect link color Other changes: * fix: add missing anchor property value noopener * refactor(rtk-query): simplify sort order control * feat(rtk-query): add timings to apiStats sections * feat(rtk-query): add slowest and fastest in timings section * feat(rtk-query): improve formatting of timings and display average loading time * fix(rtk-query): rtk-query imports * refactor(rtk-query): reduce selector computations Other changes: * simplify TreeView props * feat(rtk-query): add actions tab * refactor(rtk-query): add custom logic for TreeView shouldExpandNode Other changes: * feat: added duration in QueryPreviewInfo tab * refactor: TreeView component * chore(rtk-query): improve demo visibility on small devices * feat(rtk-query): do not display tree node preview Other changes: * improve visibility of demo devTools on small devices * tweak QueryPreviewInfo labels * chore(rtk-query): improve responsiveness * refactor(rtk-query): move preview to containers remove unnecessary computation * feat(rtk-query): display median of timings Other changes: * improved shouldExpandNode logic of QueryPreviewActions * tweaked mean logic * refactor(rtk-query-monitor): conform demo setup to repo standards * chore(rtk-query-monitor): add option to select active devtools * chore(rtk-query-monitor): remove redux-devtools/examples/rtk-query-polling * refactor(rtk-query): improve UI of api tab * feat(rtk-query): add regex search * feat(rtk-query): display mutations in queryList * refactor(rtk-query): track all fulfilled requests using actions Other changes: * refactor(rtk-query): rename tally properties * chore(rtk-query): update @redux-devtools/rtk-query-monitor dependencies * fix(rtk-query): demo build failing caused by a typing error
2021-08-26 22:33:06 +03:00
# Redux DevTools RTK Query inspector monitor
A monitor that displays [RTK query](https://redux-toolkit.js.org/rtk-query/overview) queries and mutations for [Redux DevTools](https://github.com/gaearon/redux-devtools).
Created by [FaberVitale](https://github.com/FaberVitale), inspired by [react-query devtools](https://github.com/tannerlinsley/react-query/tree/master/devtools).
## Demo
- [link](https://rtk-query-monitor-demo.netlify.app/)
- [demo source](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-rtk-query-monitor/demo)
[feat][monitor] Add rkt-query-inspector-monitor - feat/rtk query monitor (#750) * chore: copy rtk-query example from toolkit * feat(rtk-query): complete initial setup of rtk-query * feat: complete inspector layout and add initial JSONTree setup * fix: unintentional removal of tsconfig * feat(search): add search logic and refactor monitor state shape * fix: inverted monitor theme inside devtoop-app Othetr changes: * simplify monitor integration * fix: rtk monitor reducer not working in app * refactor(rtk-query): simplify theme config * feat(rtk-query-monitor): add query preview tabs * fix: wip * refactor(examples): add rtk-query-polling to workspace Other changes: * docs(rtk-query-polling): add README.md * chore(rtk-query-inspector): add demo to monorepo Other changes: chore: increase isWideScreen polling interval to 300 refactor: add subscription as root node in QueryPreviewSubscriptions * feat(rtk-query): add multiple filter options * chore(rtk-queery): rename demo build script and add SKIP_PREFLIGHT_CHECK=true * feat(rtk-query): display status flags in QueryPreviewInfo * chore(rtk-query): update typescript versions in rkt-inspector-monitor & its demo * docs(rtk-query): add proper README Other changes: * fix examples/rtk-query-poilling * docs(rtk-query): improve rtk-query-inspector-monitor demo gif * docs(rtk-query): clean up demo * fix(rtk-query): clear button not updating redux state * docs(rtk-query): add link to rtk-query-inspector-monitor demo site * chore(rtk-query): run prettier after prettier upgrade (55e2284) * docs(rtk.query): clean up readme add features, todo and development section * docs(rtk-query): fix link href * chore(rtk-query): clean up rtk-query-imspector-monitor-demo and add post example * feat(rtk-query): add counters on tags & subs tab buttons * fix(rtk-query): layering issue between queryPreview tabList and select Other changes: * clean up demo styles * run prettier * fix: revert accidental changes packages/redux-devtools-serialize/tsconfig.json * chore: change QueryComparators.fulfilledTimeStamp label * feat(rtk-query): display api stats * refactor: remove rtk-query-polling example from monorepo * chore: regenerate lock file and add @types/react as monorepo devDep * chore: display apiState Other changes: * fix close button overflow * minor responsive style tweaks * display reducerPath in query tab * fix(rtk-query): resolve CI errors - fix(prettier:check): unformatted file - fix(lint:all): fix accidentallly removed .eslintignore * chore(rtk-query): rename package to '@redux-devtools/rtk-query-monitor' * fix(rtk-query): lint:all error https://github.com/reduxjs/redux-devtools/runs/2869729048?check_suite_focus=true * feat(rtk-query): add fallback message if there are no rtk-query apis * refactor(rtk-query): move Inspector & Monitor to containers clean up typings Other changes: * chore: improved type coverage * chore: do not lint packages/redux-devtools-rtk-query-monitor/demo folder * refactor: put sort order buttons inside a component * chore: hopefully resolve mockServiceWorker formatting issues * fix(rtk-query): incorrect link color Other changes: * fix: add missing anchor property value noopener * refactor(rtk-query): simplify sort order control * feat(rtk-query): add timings to apiStats sections * feat(rtk-query): add slowest and fastest in timings section * feat(rtk-query): improve formatting of timings and display average loading time * fix(rtk-query): rtk-query imports * refactor(rtk-query): reduce selector computations Other changes: * simplify TreeView props * feat(rtk-query): add actions tab * refactor(rtk-query): add custom logic for TreeView shouldExpandNode Other changes: * feat: added duration in QueryPreviewInfo tab * refactor: TreeView component * chore(rtk-query): improve demo visibility on small devices * feat(rtk-query): do not display tree node preview Other changes: * improve visibility of demo devTools on small devices * tweak QueryPreviewInfo labels * chore(rtk-query): improve responsiveness * refactor(rtk-query): move preview to containers remove unnecessary computation * feat(rtk-query): display median of timings Other changes: * improved shouldExpandNode logic of QueryPreviewActions * tweaked mean logic * refactor(rtk-query-monitor): conform demo setup to repo standards * chore(rtk-query-monitor): add option to select active devtools * chore(rtk-query-monitor): remove redux-devtools/examples/rtk-query-polling * refactor(rtk-query): improve UI of api tab * feat(rtk-query): add regex search * feat(rtk-query): display mutations in queryList * refactor(rtk-query): track all fulfilled requests using actions Other changes: * refactor(rtk-query): rename tally properties * chore(rtk-query): update @redux-devtools/rtk-query-monitor dependencies * fix(rtk-query): demo build failing caused by a typing error
2021-08-26 22:33:06 +03:00
## Preview
![RTK Query inspector monitor demo](./monitor-demo.gif)
## Installation
### npm
```bash
npm i @redux-devtools/rtk-query-monitor --save
```
### yarn
```bash
yarn add @redux-devtools/rtk-query-monitor
```
## Usage
You can use `RtkQueryMonitor` as the only monitor in your app:
#### `containers/DevTools.js`
[feat][monitor] Add rkt-query-inspector-monitor - feat/rtk query monitor (#750) * chore: copy rtk-query example from toolkit * feat(rtk-query): complete initial setup of rtk-query * feat: complete inspector layout and add initial JSONTree setup * fix: unintentional removal of tsconfig * feat(search): add search logic and refactor monitor state shape * fix: inverted monitor theme inside devtoop-app Othetr changes: * simplify monitor integration * fix: rtk monitor reducer not working in app * refactor(rtk-query): simplify theme config * feat(rtk-query-monitor): add query preview tabs * fix: wip * refactor(examples): add rtk-query-polling to workspace Other changes: * docs(rtk-query-polling): add README.md * chore(rtk-query-inspector): add demo to monorepo Other changes: chore: increase isWideScreen polling interval to 300 refactor: add subscription as root node in QueryPreviewSubscriptions * feat(rtk-query): add multiple filter options * chore(rtk-queery): rename demo build script and add SKIP_PREFLIGHT_CHECK=true * feat(rtk-query): display status flags in QueryPreviewInfo * chore(rtk-query): update typescript versions in rkt-inspector-monitor & its demo * docs(rtk-query): add proper README Other changes: * fix examples/rtk-query-poilling * docs(rtk-query): improve rtk-query-inspector-monitor demo gif * docs(rtk-query): clean up demo * fix(rtk-query): clear button not updating redux state * docs(rtk-query): add link to rtk-query-inspector-monitor demo site * chore(rtk-query): run prettier after prettier upgrade (55e2284) * docs(rtk.query): clean up readme add features, todo and development section * docs(rtk-query): fix link href * chore(rtk-query): clean up rtk-query-imspector-monitor-demo and add post example * feat(rtk-query): add counters on tags & subs tab buttons * fix(rtk-query): layering issue between queryPreview tabList and select Other changes: * clean up demo styles * run prettier * fix: revert accidental changes packages/redux-devtools-serialize/tsconfig.json * chore: change QueryComparators.fulfilledTimeStamp label * feat(rtk-query): display api stats * refactor: remove rtk-query-polling example from monorepo * chore: regenerate lock file and add @types/react as monorepo devDep * chore: display apiState Other changes: * fix close button overflow * minor responsive style tweaks * display reducerPath in query tab * fix(rtk-query): resolve CI errors - fix(prettier:check): unformatted file - fix(lint:all): fix accidentallly removed .eslintignore * chore(rtk-query): rename package to '@redux-devtools/rtk-query-monitor' * fix(rtk-query): lint:all error https://github.com/reduxjs/redux-devtools/runs/2869729048?check_suite_focus=true * feat(rtk-query): add fallback message if there are no rtk-query apis * refactor(rtk-query): move Inspector & Monitor to containers clean up typings Other changes: * chore: improved type coverage * chore: do not lint packages/redux-devtools-rtk-query-monitor/demo folder * refactor: put sort order buttons inside a component * chore: hopefully resolve mockServiceWorker formatting issues * fix(rtk-query): incorrect link color Other changes: * fix: add missing anchor property value noopener * refactor(rtk-query): simplify sort order control * feat(rtk-query): add timings to apiStats sections * feat(rtk-query): add slowest and fastest in timings section * feat(rtk-query): improve formatting of timings and display average loading time * fix(rtk-query): rtk-query imports * refactor(rtk-query): reduce selector computations Other changes: * simplify TreeView props * feat(rtk-query): add actions tab * refactor(rtk-query): add custom logic for TreeView shouldExpandNode Other changes: * feat: added duration in QueryPreviewInfo tab * refactor: TreeView component * chore(rtk-query): improve demo visibility on small devices * feat(rtk-query): do not display tree node preview Other changes: * improve visibility of demo devTools on small devices * tweak QueryPreviewInfo labels * chore(rtk-query): improve responsiveness * refactor(rtk-query): move preview to containers remove unnecessary computation * feat(rtk-query): display median of timings Other changes: * improved shouldExpandNode logic of QueryPreviewActions * tweaked mean logic * refactor(rtk-query-monitor): conform demo setup to repo standards * chore(rtk-query-monitor): add option to select active devtools * chore(rtk-query-monitor): remove redux-devtools/examples/rtk-query-polling * refactor(rtk-query): improve UI of api tab * feat(rtk-query): add regex search * feat(rtk-query): display mutations in queryList * refactor(rtk-query): track all fulfilled requests using actions Other changes: * refactor(rtk-query): rename tally properties * chore(rtk-query): update @redux-devtools/rtk-query-monitor dependencies * fix(rtk-query): demo build failing caused by a typing error
2021-08-26 22:33:06 +03:00
```ts
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`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) to make it dockable.
### See also
[feat][monitor] Add rkt-query-inspector-monitor - feat/rtk query monitor (#750) * chore: copy rtk-query example from toolkit * feat(rtk-query): complete initial setup of rtk-query * feat: complete inspector layout and add initial JSONTree setup * fix: unintentional removal of tsconfig * feat(search): add search logic and refactor monitor state shape * fix: inverted monitor theme inside devtoop-app Othetr changes: * simplify monitor integration * fix: rtk monitor reducer not working in app * refactor(rtk-query): simplify theme config * feat(rtk-query-monitor): add query preview tabs * fix: wip * refactor(examples): add rtk-query-polling to workspace Other changes: * docs(rtk-query-polling): add README.md * chore(rtk-query-inspector): add demo to monorepo Other changes: chore: increase isWideScreen polling interval to 300 refactor: add subscription as root node in QueryPreviewSubscriptions * feat(rtk-query): add multiple filter options * chore(rtk-queery): rename demo build script and add SKIP_PREFLIGHT_CHECK=true * feat(rtk-query): display status flags in QueryPreviewInfo * chore(rtk-query): update typescript versions in rkt-inspector-monitor & its demo * docs(rtk-query): add proper README Other changes: * fix examples/rtk-query-poilling * docs(rtk-query): improve rtk-query-inspector-monitor demo gif * docs(rtk-query): clean up demo * fix(rtk-query): clear button not updating redux state * docs(rtk-query): add link to rtk-query-inspector-monitor demo site * chore(rtk-query): run prettier after prettier upgrade (55e2284) * docs(rtk.query): clean up readme add features, todo and development section * docs(rtk-query): fix link href * chore(rtk-query): clean up rtk-query-imspector-monitor-demo and add post example * feat(rtk-query): add counters on tags & subs tab buttons * fix(rtk-query): layering issue between queryPreview tabList and select Other changes: * clean up demo styles * run prettier * fix: revert accidental changes packages/redux-devtools-serialize/tsconfig.json * chore: change QueryComparators.fulfilledTimeStamp label * feat(rtk-query): display api stats * refactor: remove rtk-query-polling example from monorepo * chore: regenerate lock file and add @types/react as monorepo devDep * chore: display apiState Other changes: * fix close button overflow * minor responsive style tweaks * display reducerPath in query tab * fix(rtk-query): resolve CI errors - fix(prettier:check): unformatted file - fix(lint:all): fix accidentallly removed .eslintignore * chore(rtk-query): rename package to '@redux-devtools/rtk-query-monitor' * fix(rtk-query): lint:all error https://github.com/reduxjs/redux-devtools/runs/2869729048?check_suite_focus=true * feat(rtk-query): add fallback message if there are no rtk-query apis * refactor(rtk-query): move Inspector & Monitor to containers clean up typings Other changes: * chore: improved type coverage * chore: do not lint packages/redux-devtools-rtk-query-monitor/demo folder * refactor: put sort order buttons inside a component * chore: hopefully resolve mockServiceWorker formatting issues * fix(rtk-query): incorrect link color Other changes: * fix: add missing anchor property value noopener * refactor(rtk-query): simplify sort order control * feat(rtk-query): add timings to apiStats sections * feat(rtk-query): add slowest and fastest in timings section * feat(rtk-query): improve formatting of timings and display average loading time * fix(rtk-query): rtk-query imports * refactor(rtk-query): reduce selector computations Other changes: * simplify TreeView props * feat(rtk-query): add actions tab * refactor(rtk-query): add custom logic for TreeView shouldExpandNode Other changes: * feat: added duration in QueryPreviewInfo tab * refactor: TreeView component * chore(rtk-query): improve demo visibility on small devices * feat(rtk-query): do not display tree node preview Other changes: * improve visibility of demo devTools on small devices * tweak QueryPreviewInfo labels * chore(rtk-query): improve responsiveness * refactor(rtk-query): move preview to containers remove unnecessary computation * feat(rtk-query): display median of timings Other changes: * improved shouldExpandNode logic of QueryPreviewActions * tweaked mean logic * refactor(rtk-query-monitor): conform demo setup to repo standards * chore(rtk-query-monitor): add option to select active devtools * chore(rtk-query-monitor): remove redux-devtools/examples/rtk-query-polling * refactor(rtk-query): improve UI of api tab * feat(rtk-query): add regex search * feat(rtk-query): display mutations in queryList * refactor(rtk-query): track all fulfilled requests using actions Other changes: * refactor(rtk-query): rename tally properties * chore(rtk-query): update @redux-devtools/rtk-query-monitor dependencies * fix(rtk-query): demo build failing caused by a typing error
2021-08-26 22:33:06 +03:00
- [`DockMonitor` README](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor)
- [Read how to start using Redux DevTools.](https://github.com/reduxjs/redux-devtools)
- [Redux Devtools walkthrough](https://github.com/reduxjs/redux-devtools/tree/master/docs/Walkthrough.md)
## Features
- sorts active queries and mutations in ascending or descending order by:
[feat][monitor] Add rkt-query-inspector-monitor - feat/rtk query monitor (#750) * chore: copy rtk-query example from toolkit * feat(rtk-query): complete initial setup of rtk-query * feat: complete inspector layout and add initial JSONTree setup * fix: unintentional removal of tsconfig * feat(search): add search logic and refactor monitor state shape * fix: inverted monitor theme inside devtoop-app Othetr changes: * simplify monitor integration * fix: rtk monitor reducer not working in app * refactor(rtk-query): simplify theme config * feat(rtk-query-monitor): add query preview tabs * fix: wip * refactor(examples): add rtk-query-polling to workspace Other changes: * docs(rtk-query-polling): add README.md * chore(rtk-query-inspector): add demo to monorepo Other changes: chore: increase isWideScreen polling interval to 300 refactor: add subscription as root node in QueryPreviewSubscriptions * feat(rtk-query): add multiple filter options * chore(rtk-queery): rename demo build script and add SKIP_PREFLIGHT_CHECK=true * feat(rtk-query): display status flags in QueryPreviewInfo * chore(rtk-query): update typescript versions in rkt-inspector-monitor & its demo * docs(rtk-query): add proper README Other changes: * fix examples/rtk-query-poilling * docs(rtk-query): improve rtk-query-inspector-monitor demo gif * docs(rtk-query): clean up demo * fix(rtk-query): clear button not updating redux state * docs(rtk-query): add link to rtk-query-inspector-monitor demo site * chore(rtk-query): run prettier after prettier upgrade (55e2284) * docs(rtk.query): clean up readme add features, todo and development section * docs(rtk-query): fix link href * chore(rtk-query): clean up rtk-query-imspector-monitor-demo and add post example * feat(rtk-query): add counters on tags & subs tab buttons * fix(rtk-query): layering issue between queryPreview tabList and select Other changes: * clean up demo styles * run prettier * fix: revert accidental changes packages/redux-devtools-serialize/tsconfig.json * chore: change QueryComparators.fulfilledTimeStamp label * feat(rtk-query): display api stats * refactor: remove rtk-query-polling example from monorepo * chore: regenerate lock file and add @types/react as monorepo devDep * chore: display apiState Other changes: * fix close button overflow * minor responsive style tweaks * display reducerPath in query tab * fix(rtk-query): resolve CI errors - fix(prettier:check): unformatted file - fix(lint:all): fix accidentallly removed .eslintignore * chore(rtk-query): rename package to '@redux-devtools/rtk-query-monitor' * fix(rtk-query): lint:all error https://github.com/reduxjs/redux-devtools/runs/2869729048?check_suite_focus=true * feat(rtk-query): add fallback message if there are no rtk-query apis * refactor(rtk-query): move Inspector & Monitor to containers clean up typings Other changes: * chore: improved type coverage * chore: do not lint packages/redux-devtools-rtk-query-monitor/demo folder * refactor: put sort order buttons inside a component * chore: hopefully resolve mockServiceWorker formatting issues * fix(rtk-query): incorrect link color Other changes: * fix: add missing anchor property value noopener * refactor(rtk-query): simplify sort order control * feat(rtk-query): add timings to apiStats sections * feat(rtk-query): add slowest and fastest in timings section * feat(rtk-query): improve formatting of timings and display average loading time * fix(rtk-query): rtk-query imports * refactor(rtk-query): reduce selector computations Other changes: * simplify TreeView props * feat(rtk-query): add actions tab * refactor(rtk-query): add custom logic for TreeView shouldExpandNode Other changes: * feat: added duration in QueryPreviewInfo tab * refactor: TreeView component * chore(rtk-query): improve demo visibility on small devices * feat(rtk-query): do not display tree node preview Other changes: * improve visibility of demo devTools on small devices * tweak QueryPreviewInfo labels * chore(rtk-query): improve responsiveness * refactor(rtk-query): move preview to containers remove unnecessary computation * feat(rtk-query): display median of timings Other changes: * improved shouldExpandNode logic of QueryPreviewActions * tweaked mean logic * refactor(rtk-query-monitor): conform demo setup to repo standards * chore(rtk-query-monitor): add option to select active devtools * chore(rtk-query-monitor): remove redux-devtools/examples/rtk-query-polling * refactor(rtk-query): improve UI of api tab * feat(rtk-query): add regex search * feat(rtk-query): display mutations in queryList * refactor(rtk-query): track all fulfilled requests using actions Other changes: * refactor(rtk-query): rename tally properties * chore(rtk-query): update @redux-devtools/rtk-query-monitor dependencies * fix(rtk-query): demo build failing caused by a typing error
2021-08-26 22:33:06 +03:00
- fulfilledTimeStamp
- query key
- query status
- endpoint
- api reducerPath
- filters active queries and mutations by:
[feat][monitor] Add rkt-query-inspector-monitor - feat/rtk query monitor (#750) * chore: copy rtk-query example from toolkit * feat(rtk-query): complete initial setup of rtk-query * feat: complete inspector layout and add initial JSONTree setup * fix: unintentional removal of tsconfig * feat(search): add search logic and refactor monitor state shape * fix: inverted monitor theme inside devtoop-app Othetr changes: * simplify monitor integration * fix: rtk monitor reducer not working in app * refactor(rtk-query): simplify theme config * feat(rtk-query-monitor): add query preview tabs * fix: wip * refactor(examples): add rtk-query-polling to workspace Other changes: * docs(rtk-query-polling): add README.md * chore(rtk-query-inspector): add demo to monorepo Other changes: chore: increase isWideScreen polling interval to 300 refactor: add subscription as root node in QueryPreviewSubscriptions * feat(rtk-query): add multiple filter options * chore(rtk-queery): rename demo build script and add SKIP_PREFLIGHT_CHECK=true * feat(rtk-query): display status flags in QueryPreviewInfo * chore(rtk-query): update typescript versions in rkt-inspector-monitor & its demo * docs(rtk-query): add proper README Other changes: * fix examples/rtk-query-poilling * docs(rtk-query): improve rtk-query-inspector-monitor demo gif * docs(rtk-query): clean up demo * fix(rtk-query): clear button not updating redux state * docs(rtk-query): add link to rtk-query-inspector-monitor demo site * chore(rtk-query): run prettier after prettier upgrade (55e2284) * docs(rtk.query): clean up readme add features, todo and development section * docs(rtk-query): fix link href * chore(rtk-query): clean up rtk-query-imspector-monitor-demo and add post example * feat(rtk-query): add counters on tags & subs tab buttons * fix(rtk-query): layering issue between queryPreview tabList and select Other changes: * clean up demo styles * run prettier * fix: revert accidental changes packages/redux-devtools-serialize/tsconfig.json * chore: change QueryComparators.fulfilledTimeStamp label * feat(rtk-query): display api stats * refactor: remove rtk-query-polling example from monorepo * chore: regenerate lock file and add @types/react as monorepo devDep * chore: display apiState Other changes: * fix close button overflow * minor responsive style tweaks * display reducerPath in query tab * fix(rtk-query): resolve CI errors - fix(prettier:check): unformatted file - fix(lint:all): fix accidentallly removed .eslintignore * chore(rtk-query): rename package to '@redux-devtools/rtk-query-monitor' * fix(rtk-query): lint:all error https://github.com/reduxjs/redux-devtools/runs/2869729048?check_suite_focus=true * feat(rtk-query): add fallback message if there are no rtk-query apis * refactor(rtk-query): move Inspector & Monitor to containers clean up typings Other changes: * chore: improved type coverage * chore: do not lint packages/redux-devtools-rtk-query-monitor/demo folder * refactor: put sort order buttons inside a component * chore: hopefully resolve mockServiceWorker formatting issues * fix(rtk-query): incorrect link color Other changes: * fix: add missing anchor property value noopener * refactor(rtk-query): simplify sort order control * feat(rtk-query): add timings to apiStats sections * feat(rtk-query): add slowest and fastest in timings section * feat(rtk-query): improve formatting of timings and display average loading time * fix(rtk-query): rtk-query imports * refactor(rtk-query): reduce selector computations Other changes: * simplify TreeView props * feat(rtk-query): add actions tab * refactor(rtk-query): add custom logic for TreeView shouldExpandNode Other changes: * feat: added duration in QueryPreviewInfo tab * refactor: TreeView component * chore(rtk-query): improve demo visibility on small devices * feat(rtk-query): do not display tree node preview Other changes: * improve visibility of demo devTools on small devices * tweak QueryPreviewInfo labels * chore(rtk-query): improve responsiveness * refactor(rtk-query): move preview to containers remove unnecessary computation * feat(rtk-query): display median of timings Other changes: * improved shouldExpandNode logic of QueryPreviewActions * tweaked mean logic * refactor(rtk-query-monitor): conform demo setup to repo standards * chore(rtk-query-monitor): add option to select active devtools * chore(rtk-query-monitor): remove redux-devtools/examples/rtk-query-polling * refactor(rtk-query): improve UI of api tab * feat(rtk-query): add regex search * feat(rtk-query): display mutations in queryList * refactor(rtk-query): track all fulfilled requests using actions Other changes: * refactor(rtk-query): rename tally properties * chore(rtk-query): update @redux-devtools/rtk-query-monitor dependencies * fix(rtk-query): demo build failing caused by a typing error
2021-08-26 22:33:06 +03:00
- fulfilledTimeStamp
- query key
- query status
- endpoint
- api reducerPath
- toggleable regular expression search
- Displays
[feat][monitor] Add rkt-query-inspector-monitor - feat/rtk query monitor (#750) * chore: copy rtk-query example from toolkit * feat(rtk-query): complete initial setup of rtk-query * feat: complete inspector layout and add initial JSONTree setup * fix: unintentional removal of tsconfig * feat(search): add search logic and refactor monitor state shape * fix: inverted monitor theme inside devtoop-app Othetr changes: * simplify monitor integration * fix: rtk monitor reducer not working in app * refactor(rtk-query): simplify theme config * feat(rtk-query-monitor): add query preview tabs * fix: wip * refactor(examples): add rtk-query-polling to workspace Other changes: * docs(rtk-query-polling): add README.md * chore(rtk-query-inspector): add demo to monorepo Other changes: chore: increase isWideScreen polling interval to 300 refactor: add subscription as root node in QueryPreviewSubscriptions * feat(rtk-query): add multiple filter options * chore(rtk-queery): rename demo build script and add SKIP_PREFLIGHT_CHECK=true * feat(rtk-query): display status flags in QueryPreviewInfo * chore(rtk-query): update typescript versions in rkt-inspector-monitor & its demo * docs(rtk-query): add proper README Other changes: * fix examples/rtk-query-poilling * docs(rtk-query): improve rtk-query-inspector-monitor demo gif * docs(rtk-query): clean up demo * fix(rtk-query): clear button not updating redux state * docs(rtk-query): add link to rtk-query-inspector-monitor demo site * chore(rtk-query): run prettier after prettier upgrade (55e2284) * docs(rtk.query): clean up readme add features, todo and development section * docs(rtk-query): fix link href * chore(rtk-query): clean up rtk-query-imspector-monitor-demo and add post example * feat(rtk-query): add counters on tags & subs tab buttons * fix(rtk-query): layering issue between queryPreview tabList and select Other changes: * clean up demo styles * run prettier * fix: revert accidental changes packages/redux-devtools-serialize/tsconfig.json * chore: change QueryComparators.fulfilledTimeStamp label * feat(rtk-query): display api stats * refactor: remove rtk-query-polling example from monorepo * chore: regenerate lock file and add @types/react as monorepo devDep * chore: display apiState Other changes: * fix close button overflow * minor responsive style tweaks * display reducerPath in query tab * fix(rtk-query): resolve CI errors - fix(prettier:check): unformatted file - fix(lint:all): fix accidentallly removed .eslintignore * chore(rtk-query): rename package to '@redux-devtools/rtk-query-monitor' * fix(rtk-query): lint:all error https://github.com/reduxjs/redux-devtools/runs/2869729048?check_suite_focus=true * feat(rtk-query): add fallback message if there are no rtk-query apis * refactor(rtk-query): move Inspector & Monitor to containers clean up typings Other changes: * chore: improved type coverage * chore: do not lint packages/redux-devtools-rtk-query-monitor/demo folder * refactor: put sort order buttons inside a component * chore: hopefully resolve mockServiceWorker formatting issues * fix(rtk-query): incorrect link color Other changes: * fix: add missing anchor property value noopener * refactor(rtk-query): simplify sort order control * feat(rtk-query): add timings to apiStats sections * feat(rtk-query): add slowest and fastest in timings section * feat(rtk-query): improve formatting of timings and display average loading time * fix(rtk-query): rtk-query imports * refactor(rtk-query): reduce selector computations Other changes: * simplify TreeView props * feat(rtk-query): add actions tab * refactor(rtk-query): add custom logic for TreeView shouldExpandNode Other changes: * feat: added duration in QueryPreviewInfo tab * refactor: TreeView component * chore(rtk-query): improve demo visibility on small devices * feat(rtk-query): do not display tree node preview Other changes: * improve visibility of demo devTools on small devices * tweak QueryPreviewInfo labels * chore(rtk-query): improve responsiveness * refactor(rtk-query): move preview to containers remove unnecessary computation * feat(rtk-query): display median of timings Other changes: * improved shouldExpandNode logic of QueryPreviewActions * tweaked mean logic * refactor(rtk-query-monitor): conform demo setup to repo standards * chore(rtk-query-monitor): add option to select active devtools * chore(rtk-query-monitor): remove redux-devtools/examples/rtk-query-polling * refactor(rtk-query): improve UI of api tab * feat(rtk-query): add regex search * feat(rtk-query): display mutations in queryList * refactor(rtk-query): track all fulfilled requests using actions Other changes: * refactor(rtk-query): rename tally properties * chore(rtk-query): update @redux-devtools/rtk-query-monitor dependencies * fix(rtk-query): demo build failing caused by a typing error
2021-08-26 22:33:06 +03:00
- status flags
- query state
- tags
- subscriptions
- api state
- api stats
- actions relevant to the selected query or mutation
[feat][monitor] Add rkt-query-inspector-monitor - feat/rtk query monitor (#750) * chore: copy rtk-query example from toolkit * feat(rtk-query): complete initial setup of rtk-query * feat: complete inspector layout and add initial JSONTree setup * fix: unintentional removal of tsconfig * feat(search): add search logic and refactor monitor state shape * fix: inverted monitor theme inside devtoop-app Othetr changes: * simplify monitor integration * fix: rtk monitor reducer not working in app * refactor(rtk-query): simplify theme config * feat(rtk-query-monitor): add query preview tabs * fix: wip * refactor(examples): add rtk-query-polling to workspace Other changes: * docs(rtk-query-polling): add README.md * chore(rtk-query-inspector): add demo to monorepo Other changes: chore: increase isWideScreen polling interval to 300 refactor: add subscription as root node in QueryPreviewSubscriptions * feat(rtk-query): add multiple filter options * chore(rtk-queery): rename demo build script and add SKIP_PREFLIGHT_CHECK=true * feat(rtk-query): display status flags in QueryPreviewInfo * chore(rtk-query): update typescript versions in rkt-inspector-monitor & its demo * docs(rtk-query): add proper README Other changes: * fix examples/rtk-query-poilling * docs(rtk-query): improve rtk-query-inspector-monitor demo gif * docs(rtk-query): clean up demo * fix(rtk-query): clear button not updating redux state * docs(rtk-query): add link to rtk-query-inspector-monitor demo site * chore(rtk-query): run prettier after prettier upgrade (55e2284) * docs(rtk.query): clean up readme add features, todo and development section * docs(rtk-query): fix link href * chore(rtk-query): clean up rtk-query-imspector-monitor-demo and add post example * feat(rtk-query): add counters on tags & subs tab buttons * fix(rtk-query): layering issue between queryPreview tabList and select Other changes: * clean up demo styles * run prettier * fix: revert accidental changes packages/redux-devtools-serialize/tsconfig.json * chore: change QueryComparators.fulfilledTimeStamp label * feat(rtk-query): display api stats * refactor: remove rtk-query-polling example from monorepo * chore: regenerate lock file and add @types/react as monorepo devDep * chore: display apiState Other changes: * fix close button overflow * minor responsive style tweaks * display reducerPath in query tab * fix(rtk-query): resolve CI errors - fix(prettier:check): unformatted file - fix(lint:all): fix accidentallly removed .eslintignore * chore(rtk-query): rename package to '@redux-devtools/rtk-query-monitor' * fix(rtk-query): lint:all error https://github.com/reduxjs/redux-devtools/runs/2869729048?check_suite_focus=true * feat(rtk-query): add fallback message if there are no rtk-query apis * refactor(rtk-query): move Inspector & Monitor to containers clean up typings Other changes: * chore: improved type coverage * chore: do not lint packages/redux-devtools-rtk-query-monitor/demo folder * refactor: put sort order buttons inside a component * chore: hopefully resolve mockServiceWorker formatting issues * fix(rtk-query): incorrect link color Other changes: * fix: add missing anchor property value noopener * refactor(rtk-query): simplify sort order control * feat(rtk-query): add timings to apiStats sections * feat(rtk-query): add slowest and fastest in timings section * feat(rtk-query): improve formatting of timings and display average loading time * fix(rtk-query): rtk-query imports * refactor(rtk-query): reduce selector computations Other changes: * simplify TreeView props * feat(rtk-query): add actions tab * refactor(rtk-query): add custom logic for TreeView shouldExpandNode Other changes: * feat: added duration in QueryPreviewInfo tab * refactor: TreeView component * chore(rtk-query): improve demo visibility on small devices * feat(rtk-query): do not display tree node preview Other changes: * improve visibility of demo devTools on small devices * tweak QueryPreviewInfo labels * chore(rtk-query): improve responsiveness * refactor(rtk-query): move preview to containers remove unnecessary computation * feat(rtk-query): display median of timings Other changes: * improved shouldExpandNode logic of QueryPreviewActions * tweaked mean logic * refactor(rtk-query-monitor): conform demo setup to repo standards * chore(rtk-query-monitor): add option to select active devtools * chore(rtk-query-monitor): remove redux-devtools/examples/rtk-query-polling * refactor(rtk-query): improve UI of api tab * feat(rtk-query): add regex search * feat(rtk-query): display mutations in queryList * refactor(rtk-query): track all fulfilled requests using actions Other changes: * refactor(rtk-query): rename tally properties * chore(rtk-query): update @redux-devtools/rtk-query-monitor dependencies * fix(rtk-query): demo build failing caused by a typing error
2021-08-26 22:33:06 +03:00
## Redux DevTools props
| Name | Description |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `theme` | Either a string referring to one of the themes provided by [redux-devtools-themes](https://github.com/gaearon/redux-devtools-themes) (feel free to contribute!) or a custom object of the same format. Optional. By default, set to [`'nicinabox'`](https://github.com/gaearon/redux-devtools-themes/blob/master/src/nicinabox.js). |
| `invertTheme` | Boolean value that will invert the colors of the selected theme. Optional. By default, set to `false` |
<br/>
### Development
#### Start Demo
```bash
yarn lerna run start --stream --scope @redux-devtools/rtk-query-monitor
```
<br/>
## License
[MIT](./LICENSE.md)