web

web / lib/hooks/use-chart-query

lib/hooks/use-chart-query

React Query wrapper hook that adds loading state tracking for charts.

Wraps any React Query hook and automatically tracks whether data has been loaded at least once, providing convenient isInitialLoad and isUpdating flags for chart components.

Type Aliases

ChartQueryResult<TData, TError>

ChartQueryResult<TData, TError> = UseQueryResult<TData, TError> & object

Type declaration

isInitialLoad

isInitialLoad: boolean

True when loading for the first time (no data has been loaded yet)

isUpdating

isUpdating: boolean

True when loading and data has been loaded before (refetching/updating)

Type Parameters

TData

TData

TError

TError

Functions

useChartQuery()

useChartQuery<TData, TError>(queryResult): ChartQueryResult<TData, TError>

Wraps a React Query result with chart-specific loading states.

Type Parameters

TData

TData = unknown

TError

TError = Error

Parameters

queryResult

UseQueryResult<TData, TError>

The result from a React Query hook (useQuery)

Returns

ChartQueryResult<TData, TError>

Extended query result with isInitialLoad and isUpdating flags

Example

function MyChart({ filters, bounds }) {
  const query = useHistogramQuery(filters, bounds);
  const { data, isInitialLoad, isUpdating } = useChartQuery(query);
 
  return (
    <TimeHistogram
      data={data?.histogram}
      isInitialLoad={isInitialLoad}
      isUpdating={isUpdating}
    />
  );
}