mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-12-01 14:03:52 +03:00
7d92a5e186
* 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
109 lines
3.7 KiB
Markdown
109 lines
3.7 KiB
Markdown
# 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/FaberVitale/redux-devtools/tree/feat/rtk-query-monitor/packages/redux-devtools-rtk-query-monitor/demo)
|
|
|
|
## Preview
|
|
|
|
|
|
|
|
## 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`
|
|
|
|
```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
|
|
|
|
- [`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 queries in ascending or descending order by:
|
|
- fulfilledTimeStamp
|
|
- query key
|
|
- query status
|
|
- endpoint
|
|
- api reducerPath
|
|
- filters queries by:
|
|
- fulfilledTimeStamp
|
|
- query key
|
|
- query status
|
|
- endpoint
|
|
- api reducerPath
|
|
- displays
|
|
- status flags
|
|
- query state
|
|
- tags
|
|
- subscriptions
|
|
- api state
|
|
- api stats
|
|
|
|
## TODO
|
|
|
|
- [ ] display mutations
|
|
- [ ] filter by tags types
|
|
- [ ] download query.data
|
|
- [ ] upload query.data(?)
|
|
- [ ] refetch query button(?)
|
|
- ...suggestions are welcome
|
|
|
|
## 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)
|