How to Log Cache & All react-query data with LogRocket

[bsell93]

Hello!

My team actively uses LogRocket to debug/investigate issues with client & api. We are wanting to use react-query and are trying to discover if and how we could get visibility into react-query cache and any other react-query info in something like LogRocket.

The documentation appears to show the ability to have custom logging, but it's unclear as to what would be logged and it makes me think it would be simply logs from network errors and would not contain react-query cache data.

We currently use redux and are able to utilize middleware to log out to LogRocket whenever redux state is changed. Essentially we would like to know if react-query has the same ability.

Thanks,
Bryant

[TkDodo]

The documentation appears to show the ability to have custom logging, but it's unclear as to what would be logged and it makes me think it would be simply logs from network errors and would not contain react-query cache data.

That's right - the logging that we do is simply about internal warnings and failed fetches. In v4, we'll also only do the logging in development mode.

We currently use redux and are able to utilize middleware to log out to LogRocket whenever redux state is changed. Essentially we would like to know if react-query has the same ability.

You can subscribe to the queryCache and receive events that tell you that something happened - it's what the devtools are using internally:

queryClient.getQueryCache.subscribe(event => ...)

the event has a type, and you'd probably be interested in updated, added or removed (be aware that we made some slight changes here in v4).