Using RTK Query with Redux DevTools

[dorbaruchh]

Hi everyone,
I recently started migrating some of my projects to use RTK Query.
Overall the transition has been pretty smooth, but one thing that is not ideal is the loss of information when using Redux DevTools.
My app has about 30 endpoints, all attached to the same API slice. When looking at the Redux DevTools actions, I noticed that all actions are fired with the same base type of api/executeQuery/ as follows:

Inside each action, it's possible to find the actual endpoint name via action.meta.arg.endpointName, like so:

This is an OK workaround, but I can imagine that as I continue to migrate my endpoints to RTKQ this might negatively affect how easy it will be to debug my app. Instead of quickly scanning the list of actions and just finding the one I'm looking for, I would have to open each action in the list until I find one with the right endpoint.
Ideally, I would like to be able to differentiate different actions fired by RTK Query directly in the left section of the Redux DevTools. Is there any way to do that currently?
One solution I considered was splitting up my app to multiple API slices and provide a different reducerPath for each one, but this doesn't seem to be the "right" way to handle this.
Any help would be appreciated.

Thanks!

[phryneas]

Splitting the api into multiple reducerPaths is definitely not the right approach and we advise against doing that generally as it will make stuff like automatic invalidation impossible.

@FaberVitale has a monitor plugin for the Redux Devtools in the works, you can check that out over at reduxjs/redux-devtools#750

There is also an in-browser-demo of it available at https://rtk-query-monitor-demo.netlify.app/