React Query Timeline DevTools

[gpichot]

Hello,

As discussed a bit with @tannerlinsley in PM, I am planning to add a timeline for the React Query Devtools.

Context

I am giving workshops on React & React Query in France. I find it useful for my workshops to make visual presentations on the different concepts related to libraries. For React Query, I like to take some time to explain :

• stale time vs cache time ;
• queries & query observers.

For this I build a small timeline based on the QueryCache.subscribe method which look as below (well okay it's an early early draft/hack):

Interests

I think it will be really interesting to add it to the existing dev tools in React Query as it will better interesting on what is done by React Query and when.

Features

I am planning the following:

• add tabs to the React Query Devtools : "Cache" & "Timeline" (Cache would be the tab for the actual React Query DevTools pane)
• add the timeline feature (a bit like the Network tab on Chrome DevTools):
  • two buttons : "Record" & "Clear" to record the events and to clear the pane when needed
  • an input to filter out queries (in a second version): I will need some insight to find the query matching function
  • display the queries & observers (see schema/draft below) :
    • display query events (fetch, success, error, retries) and reason (on mouse hover if possible/provided) : initial fetch, refetch interval, window focus, component mounted, manual refetch etc) ;
    • display observers timeline (collapse/expand on query click)

I don't have a huge knowledge of the internals of React Query, so I have taken time to write this here to have your feedbacks and ideas on this:

• some features may not be possible (reason for refetch for instance) ;
• I may need some indications to dive in the code (didn't have the chance to look at it more thoroughly) ;
• I may have missed some interesting features that could be displayed.

Timeline for adding this timeline feature :D

I will have some bandwidth starting mid July, so the PR should be ready around end of July.

Your thoughts on this are welcome :)

Best,
Gabriel

[irrelevation]

Hey,

I think this would be super helpful for debugging as well as educational purposes.
Since you wrote this post a while ago and I don't see the feature in the current release, have you made any progress on it? Have you given up on it? Do you need any help with it?

Best regards,
Lukas

[gpichot]

Hey,

I don't have made progress on it so far. I had some other projects that were, well, more urgent :).
I need time to finish/polish the first version, hoping there are not too many conflicts with the recent additions :).

I will have a look at it hopefully before the end of the year.

Best,
Gabriel