[v4] Measure loading time of a query using QueryCache

[talentlessguy]

Hey,
I'm implementing a hook that observes all queries coming to react-query and detects the ones that have poor latency. While implementing I stumbled upon an issue - loading queries have dataUpdatedAt always at zero (because they're loading so there's no data yet). Because of that, I can only detect slow-loading queries only on a page reload when they're picked up from query cache.

How would I measure loading time of a query without a page reload, and if it takes more time to load than usual, to commit some kind of action? (in this case push a query to array)

This is my current implementation:

import { notifyManager, QueryCache, useQueryClient } from '@tanstack/react-query'
import { useCallback, useState } from 'react'

const SLOW_THRESHOLD = 2500

const getSlowQueries = (queryCache: QueryCache, renderedAt: number) => {
  const queries = queryCache.getAll()
  let slowQueries = 0

  queries.forEach((query) => {
    const { dataUpdatedAt, status } = query.state
    const elapsedTime = Date.now() - Math.max(dataUpdatedAt, renderedAt)

    if (query.getObserversCount() > 0) {
      if (elapsedTime > SLOW_THRESHOLD && status === 'loading') {
        slowQueries += 1
      }
    }
  })

  return slowQueries
}

export const useHasLatencyProblems = () => {

  const queryClient = useQueryClient()
  const queryCache = queryClient.getQueryCache()

  const [renderedAt] = useState(() => Date.now())

  const slowQueriesCount = useSyncExternalStore(
    useCallback(
      (onStoreChange) => {
        return queryCache.subscribe(() => {
          notifyManager.batchCalls(onStoreChange)
          setTimeout(() => {
            notifyManager.batchCalls(onStoreChange)
          }, SLOW_THRESHOLD)
        })
      },
      [queryCache],
    ),
    () => getSlowQueries(queryCache, renderedAt),
    () => getSlowQueries(queryCache, renderedAt),
  )
}

[vossmalte]

Your code makes no sense. Calculating loading time from dataUpdatedAt is really unreliable. A query is only updated if it is stale and a refetch is triggered (e.g. on mount, window focus, etc). So if you set staleTime: 5000 all your calculated loading times will at least be 5000ms. Also: even if your app is running and you don't need to worry about initial dataUpdatedAt being zero, you don't calculate the time a queryFn takes to resolve but rather the time between two triggers plus the resolution time.

You might want to consider some network analysis tools (like in your browser devtools) or googling (or ChatGPT) how to measure the time a promise needs to resolve. You then could append this information to your query data and display this.