[v4] Measure loading time of a query using QueryCache

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),
  )
}