How can I track/observe statuses of all queries?

[bogas04]

Hi all,

So I want to use react-query for my project, and it seems to be a perfect fit. However, for our production app, I want to track how much time each query took during their fetch. This data will then be sent to my event tracking backend to get real world data for API latencies.

If I were to do this manually for each query, I would probably do something like this:

function useQueryTracker(queryName: string, status: QueryObserverResult['status']) {
    const prevTimeRef = useRef(0);

    useEffect(() => {
        const now = Date.now();
        if (status === 'loading') {
            prevTimeRef.current = now;
        }
        if (status === 'success') {
            trackEvent({name: queryName, timeTaken: now - prevTimeRef.current});
        }
    }, [status]);
}

function MyComponent() {
    const {status} = useQuery('my-query', fetchOrderDetails);
    useQueryTracker('my-query', status);
}

Now adding this each time I use useQuery can be tedious/hard to remember, and wrapping useQuery, useQueries and all other hooks with this logic can be a maintenance problem & wrong imports can still lead to missing data, so I wanted a more scalable solution in which I could just observe all queries and their statuses and automatically tracking their loading times.

I tried using queryCache.subscribe but I don't think it gives all the required data. I only get two events of type observerResultsUpdated and queryUpdated and these come only after they're fetched. There's event?.query.state.dataUpdatedAt but it's also only after the fact, i.e. when it signifies the time it was fetched, and not when it was initiated.

Any tips apart from wrapping these hooks with my custom logic OR manually tracking all usages?

[TkDodo]

I wouldn't put this on react-query to be honest - this seems like a responsibility of fetchOrderDetails. If you are using a library like axios, there are also interceptors that you can setup.