Redux-toolkit: Investigate RTK Query-specific additions to the Redux DevTools Extension

[markerikson]

Per discussion in Reactiflux:

• imo, It would be cool to have a dashboard like react-query: https://react-query.tanstack.com/devtools
• Generally, you have the redux devtools. But of course something else could be "prettier".
• query tool are bit more focus on the cache state and config provided.
• It would be super cool if you could add this as an add-in to the Redux Devtools, but I don't know how complicated that would be
• the current Redux devtools already have the full state, so you essentially already ahve all the info there, you'd just have to display them in a different format
• i'd love to split the view here in the dev tools so the standard redux stuff was isolated, and the query aspect were just reformatted to so you could see something like (query|mutation.[method]): endpoint.url on the left

My thoughts:

• Technically, "we" now own the Redux DevTools. The extension and its ecosystem were originally created and maintained by Mihail Diordiev (@zalmoxisus), but he finally went silent a year or so ago. However, he did hand the publishing rights over to Tim Dorr, and the separate packages are now a monorepo under the reduxjs org.
• There's someone named methuselah96 who's been quietly doing maintenance work on it. I have no idea who that person actually is :)
• I did actually contribute the "Action Stack Trace" feature to the DevTools Extension a couple years back, so adding more functionality is doable.
• Presumably it would have to have some way of scanning the store state for what _looks_ like an RTQK cache slice and provide an alternate view of that state

As a bit of reference, here's the PRs I made when I added the "action stack trace" feature:

• https://github.com/zalmoxisus/remotedev-app/pull/43
• https://github.com/zalmoxisus/redux-devtools-instrument/pull/21

and the original issue for that:

• https://github.com/zalmoxisus/redux-devtools-extension/issues/429

The new combined monorepo is at https://github.com/reduxjs/redux-devtools

[asherccohen]

A couple of things that would be nice to see:

• clearly identify rtk queries, so it's easier to scan business logic actions from fetching actions
• group rtk queries so that their statuses don't clutter the list

[FaberVitale]

I'd like the primary view to lists queries currently stored, presenting the following infos:

1. query key
2. status: fresh, stale, fetching...
3. query config, e.g. { pollingInterval: 600000 }.
4. fetched data, if present.
5. tags

Nice to have features

1. Sort queries by dropdown and a asc - desc button group

Dropdown options:

• sort by fulfilledTimeStamp
• sort by query key
• sort by status: fresh, stale, pending

1. A button that triggers a refetch of a query.

2. A filter query by key input[type="text"] field.

[StefanBRas]

Just a quick addition; Methuselah96 mentioned that this could be done by creating a new monitor.

So if anyone is planning on giving this a go, that would be the way to go.

I don't know nearly enough about the DevTools to actually give any guidance, except for this.

[FaberVitale]

@StefanBRas @markerikson As I said on discord I'd like to implement this feature.

Yesterday I've setup up the project and I'd like to submit a PR to reduxjs/redux-devtools once I've got something stable.

The general integration steps are the following:

1. add packages/redux-devtools-rtk-query-inspector-monitor.
2. add rtk-query-inspector-monitor to packages/redux-devtools-app/src/utils/getMonitor.tsx

Presumably it would have to have some way of scanning the store state for what looks like an RTQK cache slice and provide an alternate view of that state

A breadth first search with a configurable max-depth (default 2(?)) that looks for plain objects with shape api state should suffice.

[FaberVitale]

An update

I'm developing here the devtools and I plan to submit a PR this weekend to redux-devtools.

Demo

• https://rtk-query-monitor-demo.netlify.app/

A preview

Current Features

• sort queries in ascending or descending order by:
  
  
  
  • fulfilledTimeStamp
  
  
  • query key
  
  
  • query status
  
  
  • endpoint
  
  
  • api reducerPath
  
  
• filter queries by:
  
  
  
  • fulfilledTimeStamp
  
  
  • query key
  
  
  • query status
  
  
  • endpoint
  
  
  • api reducerPath
  
  
• displays
  
  
  
  • status flags
  
  
  • query state
  
  
  • tags
  
  
  • subscriptions
  
  
  • api slice config
  
  

TO DO

• display mutations
• filter by tags types
• download query.data
• upload query.data
• refetch query button(?)
• ... suggestions are welcome

---

Edit:

Added link to demo site

[FaberVitale]

PR is live 🚀 https://github.com/reduxjs/redux-devtools/pull/750

I've added few extra features and I have updated the demo: https://rtk-query-monitor-demo.netlify.app/

[phryneas]

This is really going places :) Soo cool!