[feat][monitor] Add rkt-query-inspector-monitor - feat/rtk query monitor #750
Conversation
Othetr changes: * simplify monitor integration
Other changes: * docs(rtk-query-polling): add README.md
Other changes: chore: increase isWideScreen polling interval to 300 refactor: add subscription as root node in QueryPreviewSubscriptions
Other changes: * fix examples/rtk-query-poilling
Other changes: * clean up demo styles * run prettier
Other changes: * improved shouldExpandNode logic of QueryPreviewActions * tweaked mean logic
|
Changes:
|
|
I think by now this looks great, and while there might always be something to be improved, I would love to see if we can get this out soon, so just users can already profit from it. And getting user feedback will also only happen when we get this out - at least as a beta of the extension (I remember this was at least possible in the Firefox extension store, not sure for Chrome). @FaberVitale There is one more feature that might be a great addition, but I'm not even sure if it would/should be part of this PR: Can you add a checkbox to the default action monitor to show/hide RTKQ-related actions? I think one of the biggest critiques towards RTKQ in terms of debugging was that it dispatches a lot of actions, and makes non-RTKQ-code more difficult to debug. So having a switch for just hiding those automated actions would be super-cool. @Methuselah96 I am not really aware of the state of your migration on this repo - are we currently in a state where we could just release a new version of the devtools or is there any necessary work required that would have to be done before that? |
|
@phryneas in terms of features I believe the monitor is in good shape and it could be released on npm. Things left to doBlocking
Nice to have (non blocking)
Checkbox to hide RTKQ actions
Yes an
8000
d I would not mind doing it, but it is outside the scope of this PR: Your idea is related to #717 and I think I could implement them both. What do you think? |
|
@phryneas Definitely looking forward to getting this released! I haven't quite finished all the work necessary to release the 3.x extension with the new UI and it would be a little bit of work to get this working in 2.x, I have three things left to do before we can release a 3.0 beta:
I'm thinking it will take me 2-4 weeks to finish up the work I listed above. I also need to look over this PR to make sure everything's in order before we merge it, but it looks great so far! |
|
Awesome! Let us know if there's any help we can provide! |
|
@FaberVitale I think that would go well with #717 - and yup, I think those UI elements would do it :) @Methuselah96 that sounds great :) As for the "thorough testing" part, maybe we can also just put out an alpha or beta and see what feedback comes in :) |
Changes
Updated demo: https://rtk-query-monitor-demo.netlify.app/ |
|
This is looking very good :) But it might just need another title... "Current cache contents summed up" or something? Same goes for the timings, especially mutation timings: since they only sum up what is currently in the cache, their use is a bit limited. But I guess tracking historical data is too much work, right? |
I agree
It is doable but instead of looking for cache keys in the latest user state received, I've got to derive this data from the actions not committed and the initial state. Thank you for the feedback, I'll rework this part. |
Other changes: * refactor(rtk-query): rename tally properties
|
Applied changes based on feedback provided #750 (comment) Updated demo: https://rtk-query-monitor-demo.netlify.app/ |
|
I gave this a once-over and everything looks to be in order. Can you resolve the merge conflicts and we can get this merged (unless anybody has anything else we want to change before merging)? Thanks for your work on this! |
|
Just got a chance to take a look at it today and it looks absolutely fantastic. |
|
Awesome, thank you so much! @Methuselah96 , when should we expect a new DevTools release with the RTKQ monitor? |
|
My timeline was thrown off a little bit because I forgot I would be on vacation over the past couple weeks, sorry about that. Here's the remaining work:
As far as releasing 3.0 my proposed plan is:
|
PR: feat/rtk query monitor
Description
This PR adds a new monitor that displays RTK query queries and mutations for Redux DevTools.
The idea for this project has started as a discussion at
#reduxchannel and has evolved in a discussion in a redux-toolkit issue.More informations are available at rtk-query-inspector-monitor readme
Demo
Previews
Dock monitor
App - default theme inverted
App - default theme
---Notable repo changes
added
@redux-devtools/rtk-query-inspector-monitorto monorepoadded
packages/redux-devtools/examples/rtk-query-pollingintegrated
@redux-devtools/rtk-query-inspector-monitorto@redux-devtools/appadded
@types/reactas monorepo devDepPR Status - TODO
rtk-query-inspector-monitorrtk-query-inspector-monitorhas almost reached all the features planned, see TODO section for more details, but feedback and new ideas are welcome.Integrations
Verify extension integration, It wasn't clear how to start a dev server.
Verify monitor on browsers that run on windows: ugly scrollbars? other issues?
Fix linting errors that have emerged inredux-devtools-serializeOther?