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

• link
• demo source

Preview

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

• DockMonitor README

• Read how to start using Redux DevTools.

• Redux Devtools walkthrough

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